Add reproducible test case for #22751

cypress-io/cypress#22751

.env

@@ -0,0 +1,2 @@
+# Paste the client secret here after the "="
+KEYCLOAK_CLIENT_SECRET=

.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

.gitignore

@@ -1,104 +1,36 @@
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-lerna-debug.log*
-
-# Diagnostic reports (https://nodejs.org/api/report.html)
-report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
-# Runtime data
-pids
-*.pid
-*.seed
-*.pid.lock
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
 
-# Directory for instrumented libs generated by jscoverage/JSCover
-lib-cov
+# testing
+/coverage
 
-# Coverage directory used by tools like istanbul
-coverage
-*.lcov
+# next.js
+/.next/
+/out/
 
-# nyc test coverage
-.nyc_output
+# production
+/build
 
-# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
-.grunt
+# misc
+.DS_Store
+*.pem
 
-# Bower dependency directory (https://bower.io/)
-bower_components
-
-# node-waf configuration
-.lock-wscript
-
-# Compiled binary addons (https://nodejs.org/api/addons.html)
-build/Release
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
 
-# Dependency directories
-node_modules/
-jspm_packages/
+# local env files
+.env*.local
 
-# TypeScript v1 declaration files
-typings/
+# vercel
+.vercel
 
-# TypeScript cache
+# typescript
 *.tsbuildinfo
-
-# Optional npm cache directory
-.npm
-
-# Optional eslint cache
-.eslintcache
-
-# Microbundle cache
-.rpt2_cache/
-.rts2_cache_cjs/
-.rts2_cache_es/
-.rts2_cache_umd/
-
-# Optional REPL history
-.node_repl_history
-
-# Output of 'npm pack'
-*.tgz
-
-# Yarn Integrity file
-.yarn-integrity
-
-# dotenv environment variables file
-.env
-.env.test
-
-# parcel-bundler cache (https://parceljs.org/)
-.cache
-
-# Next.js build output
-.next
-
-# Nuxt.js build / generate output
-.nuxt
-dist
-
-# Gatsby files
-.cache/
-# Comment in the public line in if your project uses Gatsby and *not* Next.js
-# https://nextjs.org/blog/next-9-1#public-directory-support
-# public
-
-# vuepress build output
-.vuepress/dist
-
-# Serverless directories
-.serverless/
-
-# FuseBox cache
-.fusebox/
-
-# DynamoDB Local files
-.dynamodb/
-
-# TernJS port file
-.tern-port
+next-env.d.ts

README.md

@@ -0,0 +1,24 @@
+# Steps to reproduce the issue
+
+- Follow the steps to getting Keycloak running locally with Docker [here](https://www.keycloak.org/getting-started/getting-started-docker) while accounting for the exceptions below:
+* Be sure to keep the docker image running on port 8080. Killing the docker image will result in all configurations lost.
+* When creating the user
+  * set the username to `myuser`
+  * set the password to `testuser` and turn `temporary` to `off`.
+
+* When creating the client
+  * set the client id to `myclient`
+  * turn `Client authentication` to `on`
+  * set the Root URL / Admin URL on the client to `http://localhost:8080`
+  * set valid redirect URIs to `*`
+  * set Web Origins to `*`
+  * `Save` and go to `Credentials` of the Client and copy the `Client secret`
+  * Paste the `Client secret` in the `.env` file in the project
+
+* Inside the project directory, run `yarn`.
+* Spin up the dev server by running `yarn dev`
+* In another terminal, run `yarn cy:open` and execute the `api-request.cy.js` test.
+* The frontend will receive the string lengths of each cookie the API received and shows them on the page.
+* Notice the cookies received by the API and returned back to the test page are all doubled. The bottom line `all:` should display a value below `600`.
+
+![Recording of the test](docs/api-request.cy.ts.gif)

cypress.config.ts

@@ -0,0 +1,13 @@
+import { defineConfig } from "cypress";
+
+export default defineConfig({
+  e2e: {
+    baseUrl: "http://localhost:3000",
+
+    setupNodeEvents(on, config) {
+      // implement node event listeners here
+    },
+    experimentalSessionAndOrigin: true
+  },
+
+});

cypress/e2e/api-request.cy.ts

@@ -0,0 +1,25 @@
+describe('empty spec', () => {
+  it('passes', () => {
+    cy.visit('/')
+
+    cy.contains('Sign in with Keycloak').click()
+    cy.origin('http://localhost:8080', () => {
+      cy.get('#username').type('myuser')
+      cy.get('#password').type('testuser')
+
+      cy.get('#kc-login').click()
+    })
+
+    cy.contains('Request Cookies').click()
+
+    cy.contains('next-auth.csrf-token')
+    cy.contains('next-auth.callback-url')
+    cy.contains('next-auth.session-token')
+
+    cy.contains('all:').invoke('text').then((text) => {
+      // turn "all: number" into "number"
+      const length = text.split(': ')[1]
+      return parseInt(length, 10)
+    }).should('be.below', 600)
+  })
+})

cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "hello@cypress.io",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

cypress/support/commands.ts

@@ -0,0 +1,37 @@
+/// <reference types="cypress" />
+// ***********************************************
+// This example commands.ts shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
+//
+// declare global {
+//   namespace Cypress {
+//     interface Chainable {
+//       login(email: string, password: string): Chainable<void>
+//       drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
+//     }
+//   }
+// }

cypress/support/e2e.ts

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/e2e.ts is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

cypress/tsconfig.json

@@ -0,0 +1,21 @@
+{
+    "extends": "../tsconfig.json",
+    "compilerOptions": {
+        "baseUrl": "../node_modules",
+        "target": "es5",
+        "lib": [
+            "es5",
+            "dom"
+        ],
+        "isolatedModules": false,
+        "types": [
+            "cypress",
+            "node",
+        ]
+    },
+    "include": [
+        "**/*.ts",
+        "**/*.cjs"
+    ],
+    "exclude": [] // override the parent exclude
+}

next.config.js

@@ -0,0 +1,7 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+  swcMinify: true,
+}
+
+module.exports = nextConfig

package.json

@@ -0,0 +1,28 @@
+{
+  "name": "cypress-issue-22751",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "cy:run": "cypress run",
+    "cy:open": "cypress open"
+  },
+  "dependencies": {
+    "next": "12.2.4",
+    "next-auth": "4.10.3",
+    "react": "18.2.0",
+    "react-dom": "18.2.0"
+  },
+  "devDependencies": {
+    "@types/node": "18.6.4",
+    "@types/react": "18.0.15",
+    "@types/react-dom": "18.0.6",
+    "cypress": "10.4.0",
+    "eslint": "8.21.0",
+    "eslint-config-next": "12.2.4",
+    "typescript": "4.7.4"
+  }
+}

pages/_app.tsx

@@ -0,0 +1,15 @@
+import '../styles/globals.css'
+import type { AppProps } from 'next/app'
+import { SessionProvider } from 'next-auth/react'
+
+function MyApp({ Component, pageProps }: AppProps) {
+  const { session, ...otherPageProps } = pageProps
+
+  return (
+    <SessionProvider session={session}>
+      <Component {...otherPageProps} />
+    </SessionProvider>
+  )
+}
+
+export default MyApp

pages/api/auth/[...nextauth].ts

@@ -0,0 +1,22 @@
+import NextAuth from "next-auth"
+import KeycloakProvider from "next-auth/providers/keycloak"
+
+const KEYCLOAK_CLIENT_ID = process.env.KEYCLOAK_CLIENT_ID || 'myclient'
+const KEYCLOAK_CLIENT_SECRET = process.env.KEYCLOAK_CLIENT_SECRET || ''
+const KEYCLOAK_ISSUER = process.env.KEYCLOAK_ISSUER || 'http://localhost:8080/realms/myrealm'
+
+console.log(JSON.stringify({
+    KEYCLOAK_CLIENT_ID,
+    KEYCLOAK_CLIENT_SECRET,
+    KEYCLOAK_ISSUER
+}, null, 2))
+
+export default NextAuth({
+    providers: [
+        KeycloakProvider({
+            clientId: KEYCLOAK_CLIENT_ID,
+            clientSecret: KEYCLOAK_CLIENT_SECRET,
+            issuer: KEYCLOAK_ISSUER,
+        }),
+    ],
+})