Request: example of cypress testing

[CaptainChemist]

Question 💬

I followed this documentation and it isn't quite enough for me to figure out how to use Cypress with NextAuth:
https://next-auth.js.org/tutorials/testing-with-cypress

My home page has a link that calls the signIn method:

            <a onClick={() => signIn()}  >
              Login
            </a>

When I run the test that is suggested in the documentation, I get the error (note I switched it to GitHub to see if that makes a difference, but the results are identical with Google as well)

cy.task('GitHubSocialLogin') failed with the following error:

> waiting for selector "input#login_field" failed: timeout 30000ms exceeded

Even creating a direct link like this on my homepage does not work either:

            <a href="http://localhost:3000/api/auth/signin/github" >
              Login Github
            </a>

Is there a working example of a nextjs app using NextAuth and Cypress? I searched the Github public repositories pretty extensively, but I only found one repo and it didn't seem to work for me.

Thank you!

[test-stackonfire]

I would also appreciate some example which is fully working - would even be up to contributing to one 🙌 @CaptainChemist so far your problem is that you are opening an incorrect url probably, the example on the next-auth page assumes you have your login buttons at the / of your website.

I have another problem though - when I get some cookies back, there is no session-token, only csrf-token. Trying to make Github auth working 🤔

[ubbe-xyz]

Cypress is not the best solution for testing auth flows. If I remember correctly, you can't write tests that jump from one domain to another with it. Have you considered Playwright? I think it doesn't have this limitation and it'll suit you better 😊

[balazsorban44]

although I think they don't want to test how their auth provider works, but probably just want to get through their signin flow to have a user to test with.

For that, I would just mock the /api/auth/session and endpoint, as we did in our tests.

If that helps, here are our tests:

https://github.com/nextauthjs/next-auth/tree/main/src/client/tests

[d-ivashchuk]

Mocking session object is exactly something I'd want to recourse to! The link is not working though - two underscores in the end are not registered :/ 🙌🏼 thanks for pointers also!

[d-ivashchuk]

I am curios if someone here implemented session object as mocked one with cypress, this would be super helpful :D

[balazsorban44]

The signing page that is rendered has this content:

https://www.github.com/nextauthjs/next-auth/tree/main/src%2Fserver%2Fpages%2Fsignin.js

I cannot see the #login_field element, so not surprising that Cypress just times out. See the link above and try targeting something else that exists.

(although you probably don't want to actually log in in tests, just mock a user. see: #2053 (reply in thread)

[d-ivashchuk]

@CaptainChemist you are using a cypress-social-login which will open the headless(by default) browser - execute your workflow and return cookies to the cypress test(these are next-auth ones) so when you see this selector not found error it's basically something wrong with your redirecting setup. Try out headless: false please in your test, you will see how it works and it will be easier to debug hopefully!

@balazsorban44 I am almost done with testing the provider auth setup - it works locally and almost works on github action, I will be up to contributing to docs to clarify it even better and provide a small app with pipeline as an example. I am still having troubles with those next-auth. cookies. For some reason locally I get this:

[
  {
    name: 'next-auth.session-token',
    value: 'c34291004e40c40a1f272b6a9bc71f61fa87e103c52f3b57185b87469b75a4e6',
    domain: 'localhost',
    path: '/',
    expires: 1628062901.973861,
    size: 87,
    httpOnly: true,
    secure: false,
    session: false,
    sameSite: 'Lax'
  },
  {
    name: 'next-auth.callback-url',
    value: 'http%3A%2F%2Flocalhost%3A3000',
    domain: 'localhost',
    path: '/',
    expires: -1,
    size: 51,
    httpOnly: false,
    secure: false,
    session: true,
    sameSite: 'Lax'
  },
  {
    name: 'next-auth.csrf-token',
    value: 'd15e9b1b10d43a991d530ad2094f5cf24e436b5db3aec2c5f3ddacb6c20ac944%7Cc3095c8f3b4053c99dd704080275543a9f2e5a58104d5adc5f8d16d2c9ef9433',
    domain: 'localhost',
    path: '/',
    expires: -1,
    size: 151,
    httpOnly: true,
    secure: false,
    session: true,
    sameSite: 'Lax'
  }
]

But on my CI pipeline(GH actions) the next-auth.session-token is totally missing 🤔 any ideas?

[d-ivashchuk]

Seems like the answer why it fails is quite simple - cypress social login is not design to be used on ci - it can not bypass verifications and other 2fa 😒

[balazsorban44]

you shouldn't test full auth flows from CI (that is our headache... 🤕😅) just mock the responses.

[d-ivashchuk]

Got it - already found something with msw library 👍🏼

[pixelass]

I'm not sure if this has been mentioned here but I would like to explain how we handle the login in cypress.

NOTE: We do not test the login flow we just stub the session to be able to access pages hidden behind the auth wall

Set up a login with cypress

1. Create a fixture and fill it with the session object you expect (if you add things to your session then this should also be added here)

NOTE: the accessToken can be any value.
NOTE: the expires can be any date in the future.

cypress/fixtures/session.json

{
  "user": {
    "name": "Morty Smith",
    "email": "test@example.com",
    "image": "/path/to/your/mock/user.jpg"
  },
  "expires": "3000-01-01T00:00:00.000Z",
  "accessToken": "abcdefghijklmnopqrst"
}

2. Provide a command for cypress login and require it in your support file

cypress/support/commands.js

Cypress.Commands.add("login", () => {
	cy.intercept("/api/auth/session", { fixture: "session.json" }).as("session");

	// Set the cookie for cypress.
	// It has to be a valid cookie so next-auth can decrypt it and confirm its validity.
	// This step can probably/hopefully be improved.
	// We are currently unsure about this part.
	// We need to refresh this cookie once in a while.
	// We are unsure if this is true and if true, when it needs to be refreshed.
	cy.setCookie("next-auth.session-token", "a valid cookie from your browser session");
	Cypress.Cookies.preserveOnce("next-auth.session-token");
});

cypress/support/index.js

require("./commands");

NOTE: You can grab a valid session token from your browser:

3. Use Cypress to login

describe("Cypress login", () => {
	it("should provide a valid session", () => {
		// Call your custom cypress command
		cy.login();
		// Visit a route in order to allow cypress to actually set the cookie
		cy.visit("/");
		// Wait until the intercepted request is ready
		cy.wait("@session");
		// This is where you can now add assertions
		// Example: provide a data-test-id on an element.
		// This can be any selector that "always and only" exists when the user is logged in
		cy.get("[data-test-id='authenticated']").should("exist").then(() => {
			cy.log("Cypress login successful");
		});
	});
});

This setup works without flaws (for us) and is very easy to setup.
No extra libraries are needed, it is just vanilla Cypress.

A lot of trial and error (and even more headaches) allowed us to come up with this strategy.

We hope it helps.

💖 Thank you 🚀

[tommynguyen1]

be careful when using cy.clearCookies(), it delete your Next Auth cookies stuff leading to error when testing

[summer-cook]

hi @pixelass - thank you so much for this solution. It definitely simplified and solved the issue to make creating a session easier.
I was just wondering, would it be bad if the "valid cookie from your browser session" was accidentally committed to git? is it a vulnerability/would it potentially allow someone to access a session somehow? Or would it not necessarily be an issue?
Thanks in advance for the help.

[helloukey]

session not working in SSR, any other way?

[ayjay4]

@helloukey I'm also having this issue. Did you find a fix?

[Tura-lab]

Won't the session cookie expire?

[baptisteArno]

I'm not a fan of manually get a session token and set it as an environment variable so I came up with another solution.

I add the CredentialsProvider only for e2e tests:

if (process.env.NODE_ENV !== 'production')
  providers.push(
    CredentialsProvider({
      name: 'Credentials',
      credentials: {
        email: {
          label: 'Email',
          type: 'email',
          placeholder: 'email@email.com',
        },
      },
      async authorize(credentials) {
        // fetch user from your database or else
        return user
      },
    })
  )

export default NextAuth({
  adapter: PrismaAdapter(prisma),
  secret: process.env.SECRET,
  providers,
  session: {
    strategy: process.env.NODE_ENV === 'production' ? 'database' : 'jwt',
  },
})

And I use this as a Cypress command to sign in the user:

Cypress.Commands.add('signIn', (email: string) => {
  cy.log(`🔐 Sign in as ${email}`)
  return cy.wrap(signIn('credentials', { redirect: false, email }))
})

Easy peasy 👌

[odahcam]

It's nice, but imagine if you accidentally add this to production. I would like to find a way of configuring what I need for testing without ever changing the production code to avoid any accidents.

[baptisteArno]

Yes, I found that it isn't really great in practice.
I'm lacking a viable solution (#3765)

[helloukey]

Not working for me unfortunately.
I'm using Next-Auth v4 and Cypress v12.

[yeungalan0]

I've since updated the code so that a valid next-auth cookie can be generated from JSON object which seemed a bit more flexible to me compared to a fixture.

I have the below in my cypress/support/commands.js file.

import hkdf from "@panva/hkdf";
import { EncryptJWT, JWTPayload } from "jose";

// Function logic derived from https://github.com/nextauthjs/next-auth/blob/5c1826a8d1f8d8c2d26959d12375704b0a693bfc/packages/next-auth/src/jwt/index.ts#L113-L121
async function getDerivedEncryptionKey(secret: string) {
  return await hkdf(
    "sha256",
    secret,
    "",
    "NextAuth.js Generated Encryption Key",
    32
  );
}

// Function logic derived from https://github.com/nextauthjs/next-auth/blob/5c1826a8d1f8d8c2d26959d12375704b0a693bfc/packages/next-auth/src/jwt/index.ts#L16-L25
export async function encode(
  token: JWTPayload,
  secret: string
): Promise<string> {
  const maxAge = 30 * 24 * 60 * 60; // 30 days
  const encryptionSecret = await getDerivedEncryptionKey(secret);
  return await new EncryptJWT(token)
    .setProtectedHeader({ alg: "dir", enc: "A256GCM" })
    .setIssuedAt()
    .setExpirationTime(Math.round(Date.now() / 1000 + maxAge))
    .setJti("test")
    .encrypt(encryptionSecret);
}

Cypress.Commands.add("login", (userObj: JWTPayload) => {
  // Generate and set a valid cookie from the fixture that next-auth can decrypt
  cy.wrap(null)
    .then(() => {
      return encode(userObj, Cypress.env("NEXTAUTH_JWT_SECRET"));
    })
    .then((encryptedToken) =>
      cy.setCookie("next-auth.session-token", encryptedToken)
    );
});

Here's a usage example:

  const user = {
    name: "Morty Smith",
    email: "test@picklerick.com",
    image: "/path/to/butterbot.jpg",
    birthdate: "12/02/13",
  };

    cy.login(user);
...

You can see the current code here, and usage examples here.

Old DEPRECATED example below

In case it helps someone else, I hacked together the below code using what @pixelass so kindly provided (thank you BTW!) to generate a valid cookie from the fixture that can be parsed by useSession. I had some tests that would require a valid token to implement, and I didn't want to (and would definitely forget to) copy/paste a valid token from my browser every so often to keep tests working.

I have the below in my cypress/support/commands.js file. Open for feedback if anyone has a better way of doing it, this is just what I could figure out from looking at the source code that ended up working for me.

import hkdf from "@panva/hkdf";
import { EncryptJWT } from "jose";

// Function logic derived from https://github.com/nextauthjs/next-auth/blob/5c1826a8d1f8d8c2d26959d12375704b0a693bfc/packages/next-auth/src/jwt/index.ts#L113-L121
async function getDerivedEncryptionKey(secret: string) {
  return await hkdf(
    "sha256",
    secret,
    "",
    "NextAuth.js Generated Encryption Key",
    32
  );
}

// Function logic derived from https://github.com/nextauthjs/next-auth/blob/5c1826a8d1f8d8c2d26959d12375704b0a693bfc/packages/next-auth/src/jwt/index.ts#L16-L25
// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
export async function encode(token: any, secret: string) {
  const maxAge = 30 * 24 * 60 * 60; // 30 days
  const encryptionSecret = await getDerivedEncryptionKey(secret);
  return await new EncryptJWT(token)
    .setProtectedHeader({ alg: "dir", enc: "A256GCM" })
    .setIssuedAt()
    .setExpirationTime(Date.now() / 1000 + maxAge)
    .setJti("test")
    .encrypt(encryptionSecret);
}

Cypress.Commands.add("login", () => {
  cy.intercept("/api/auth/session", { fixture: "session.json" }).as("session");

  // Generate and set a valid cookie from the fixture that next-auth can decrypt
  cy.wrap(null)
    .then(() => cy.fixture("session.json"))
    .then((sessionJSON) =>
      encode(sessionJSON, Cypress.env("NEXTAUTH_JWT_SECRET"))
    )
    .then((encryptedToken) =>
      cy.setCookie("next-auth.session-token", encryptedToken)
    );

  Cypress.Cookies.preserveOnce("next-auth.session-token");
});

Also below are the contents of cypress/fixtures/session.json (same as in @pixelass's answer above)

{
  "user": {
    "name": "Morty Smith",
    "email": "test@example.com",
    "image": "/path/to/your/mock/user.jpg"
  },
  "expires": "3000-01-01T00:00:00.000Z",
  "accessToken": "abcdefghijklmnopqrst"
}

[nemanjam]

Interesting, but in session I store userId that is created dynamically in database and it has to match for every seed, how do I write fixture for that?

{
	"user": {
		"id": "ckzwmjsll00385wr0k2h1i8fl",
		"email": "user0@email.com"
	}
}

[yeungalan0]

Not sure on your exact use case @nemanjam, but I've since updated my tests such that a fixture isn't even needed anymore. You can see the current code here, and usage examples here. Basically you can use any Javascript object you like with this new setup (so don't need a fixture), and for your case if you have the code to dynamically generate the session should be able to use it in an object to pass into the login command I would think.

[rnnyrk]

This really helped me out, thanks a lot!

[sonesay]

Hi @yeungalan0, I'm still having some issues with this. I think I've copied your example correctly and can set the cookie with no errors but my session seems to still be invalid for the next call i.e. requesting a restricted page.

Some problems are:

1. The next request to api/auth/session in Cypress doesn't return information about my accessToken or user details i.e. user email or user groups. In my next.js front-end this information is there when logging in normally.

2. In my next.js jwt callback I seem to be missing account information. This is always undefined unlike when I login using the next.js front-end UI.

Any ideas on what I could be missing here?

[toddym42]

Is there a reason to re-implement the encode function rather than importing it directly from 'next-auth/jwt'?

[kuroski]

Hello everyone, I know this thread is a bit older, but just in case I've written something about this topic:
https://dev.to/kuroski/writing-integration-tests-for-nextjs-next-auth-prisma-using-playwright-and-msw-388m

I hope it will help someone with this

[jmarceli]

Many thanks @yeungalan0!

Building on top of your solution and comments below it seems that it is enough to:

Declare inside cypress/support/commands.js:

import { JWTPayload } from "jose";
import { encode } from "next-auth/jwt";

Cypress.Commands.add("login", (userObj: JWTPayload) => {
  // Generate and set a valid cookie from the fixture that next-auth can decrypt
  cy.wrap(null)
    .then(() => {
      return encode({
        token: userObj,
        secret: Cypress.env("NEXTAUTH_JWT_SECRET"),
      });
    })
    .then((encryptedToken) =>
      cy.setCookie("next-auth.session-token", encryptedToken)
    );
});

Create cypress.env.json file with the following content:

{
"NEXTAUTH_SECRET": "[should have same value as in your .env file used by NextAuth]"
}

And then use it as follows in tests:

  const user = {
    name: "Morty Smith",
    email: "test@picklerick.com",
    image: "/path/to/butterbot.jpg",
    birthdate: "12/02/13",
  };

    cy.login(user);

[jophuijbers-wf]

My useSession from next-auth returns undefined in my component that checks auth. It seems like the JWT is created, but the payload is not passed down as it looks like this: "ey<...>..ua_<...>". Payload should be in between those dots right?

What am I missing?

Cypress.Commands.add('login', (userObj: User) => {
  cy.wrap(null)
    .then(() => {
      return encode({
        token: userObj,
        secret: 'my-secret',
      });
    })
    .then((encryptedToken) => cy.setCookie('next-auth.session-token', encryptedToken));
});

describe('Login', () => {
  it('Logs in with Keycloak and assert home page', () => {
    const user = {
      email: 'example@email.com',
      username: 'example-user',
    };

    cy.login(user);

    cy.visit('http://localhost:3000/heat-pumps');

    cy.url().should('include', '/heat-pumps');
  });
});

Tried doing this aswell, but no luck:

return encode({
    token: {email: 'example@email.com', ...},
    secret: 'my-secret',
 });

[muratkeremozcan]

Here you go. Working app, reproducible example and demo.

muratkeremozcan/next-issue-tracker#23

https://youtu.be/SzhulGxprCw

[alexandre-sarfati]

@muratkeremozcan got JWEInvalid: Invalid Compact JWE why is your working...

[phil-w]

Anyone got an up to date solution to this? I don't really want to automatically test my OpenAuth authentication providers, they work fine already.

This tutorial is complicated, depends on lots of things, and I can't get it to work. In any case I don't use username/ password authentication, and have 2FA on my personal accounts... it's just not looking like the way forward.

Mocking up the authorization cookie on a development machine ought to work, but although these examples run, they don't work; my auth guards are still saying "nope, you're not logged in, mate". I guess I can stub out the auth on test machines, but that seems... a bit crude.

[pixelass]

Any of the examples above should work fine. Just stitch it together. SInce this thread was started, several exports where added to next-auth to make the process a lot easier.

Here's a similar mechanism using playwright (we recently switched but this should be mostly compatible with cypress):
https://github.com/blib-la/blibla-template/blob/main/cucumber/steps/auth.steps.ts#L17-L58

[jinn2u]

thank you sooo much! i love you

[nkpgardose]

Maybe I'm late to the party. This is what I've done in my pet project.

Limitation of this approach.

• I only have one user that can access Credential(aka email/password) on e2e and vercel preview links.
• Since it's Credential approach on e2e and preview, it will only use strategy: 'jwt'. Meaning it will not store user, account, session from the database.
• There is an extra step instead of running npm run dev normally.
• I thought of PR preview builds(self-generated URL in vercel) i.e. https://some-app-sakdjnsadkja.vercel.app/ to use Credential instead of OAuth(this one is also another headache because I need to manually add the URLs of preview build on Authorized JavaScript origins URIs, etc if I want to use OAuth).

What I've done.

in package.json

    "scripts": {
        ....
      "ci:dev": "CYPRESS_MODE=CI npm run dev",
    }

in auth.ts

import NextAuth from 'next-auth'
import Google from 'next-auth/providers/google'
import Credentials from 'next-auth/providers/credentials'
import getConfig from 'next/config'
import { DrizzleAdapter } from '@auth/drizzle-adapter'
import { database } from '@/db'
import { usersTable, accountsTable, sessionsTable } from '@/db/schema'

const { serverRuntimeConfig } = getConfig()
const isToUseJWT =
	process.env.CYPRESS_MODE === 'CI' || process.env.VERCEL_ENV === 'preview'

let providers = [Google]

if (isToUseJWT) {
	/**
	 * NOTE: This is a custom provider for Cypress tests and vercel preview links.
	 */
	providers.push(
		// @ts-ignore
		Credentials({
			id: 'cypress-auth',
			name: 'Cypress Test',
			credentials: {
				email: { label: 'Email' },
				password: { label: 'Password', type: 'password' },
			},
			authorize: (credentials) => {
				if (
					credentials.email === serverRuntimeConfig.authCredentialsEmail &&
					credentials.password === serverRuntimeConfig.authCredentialsPassword
				) {
					return {
						id: 'sample-id-for-cypress',
						name: serverRuntimeConfig.authCredentialsName,
						email: serverRuntimeConfig.authCredentialsEmail,
						image: serverRuntimeConfig.authCredentialsImage,
					}
				}

				throw new Error('User not found.')
			},
		}),
	)
}

export const { handlers, auth, signIn, signOut } = NextAuth({
	adapter: DrizzleAdapter(database, {
		usersTable,
		accountsTable,
		sessionsTable,
	}),
	providers,
	basePath: '/auth',
	debug: process.env.NODE_ENV !== 'production',
	// NOTE: this is custom for preview and development environments
	...(isToUseJWT ? { session: { strategy: 'jwt' } } : {}),
})

and the extra step I'm talking about.

Instead of running this locally.

$ npm run dev

I need to explicitly run this command instead.

$ npm run ci:dev # to have `CYPRESS_MODE`

then on another terminal,

$ npm run cypress:headless # cypress run

and my cypress command

Cypress.Commands.add(
	'authenticate',
	(email, password, redirectTo = '/home') => {
		cy.log('Authenticating using email/password')
		cy.visit('/auth/signin')
		cy.findByLabelText('Email').click().type(email)
		cy.findByLabelText('Password').click().type(password)
		cy.findByRole('button', { name: 'Sign in with Cypress Test' }).click()
		cy.title().should('eq', 'sample project')
		cy.visit(redirectTo)
	},
)

This approach only has one account that can access email/password. Mainly to access pages behind auth. my production only use OAuth and, unfortunately, can't test it on e2e because it acts as bot.

---

I'm looking into using Keycloak https://authjs.dev/guides/testing since the core team suggests using it.

[nkpgardose]

☝️ I'm using a tab with an indentation of 2. sorry for 4 spaces here. 😓