When using NextJS, signInWithOAuth does not consistently set verifier cookie as part of PKCE flow

[jchaselubitz]

Bug report

• [ √] I confirm this is a bug with Supabase, not with my own application.
• [ √] I confirm I have searched the Docs, GitHub Discussions, and Discord.

Describe the bug

In my NextJS 14 (App Router) application, attempting to sign the user in using the Slack OIDC provider with the recommended PKCE auth flow works after starting the dev server, but NOT after logging out and logging back in to the application. In the first case, signInWithOAuth correctly sets the verifier token in the browser, but in the second case, it does not.

The issue appears to be with this function here: setItemAsync. As described above, it correctly sets the storedCodeVerifier immediately after starting the dev server (or making any change to the code that causes a hot-reload), but it does not do so if the user logs out (via supabase.auth.signOut()).

I was able to fix this behavior by instead using NextJS's cookies() module. I simply set const cookieStore = cookies() then replaced await setItemAsync(storage, ${storageKey}-code-verifier, storedCodeVerifier) with cookieStore.set(${storageKey}-code-verifier, storedCodeVerifier)

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

1. Create a NextJS application that uses signInWithOAuth with Slack (or probably any provider) in a server-side function for login. redirectTo should be set to a route.ts file
2. In your route.ts file, use supabase.auth.exchangeCodeForSession(code) to handle the second step of the login process.
3. I also recommend modifying the Helpers.js file to log the stored cookies just after the setItemAsync() function. I used const cookieStore = cookies() and console.log(cookieStore). This helps reveal exactly what cookies the setItemAsync() function is setting.
4. run rm -rf .next and yarn dev to clear the cached Next files and start the dev server
5. Log into the application using your chosen provider. -- See that you can successfully log in and that the console log after setItemAsync() shows the expected cookies.
6. Log out of your application using supabase.auth.signOut()
7. Immediately try to log in a second time and see that you get an error that reads: "both auth code and code verifier should be non-empty'. You should also see that your console log shows no cookies present.

Steps to temporarily fix:

1. in Helpers.js, within the getCodeChallengeAndMethod function, add const cookieStore = cookies() then replace await setItemAsync(storage, ${storageKey}-code-verifier, storedCodeVerifier) with cookieStore.set(${storageKey}-code-verifier, storedCodeVerifier)
2. run rm -rf .next, then run yarn dev. Repeat steps 5-7 above to see that it now works.

System information

• OS: MacOS
• Browser: Chrome
• Version of supabase-js: 2.45.2
• Version of supabase-ssr: 0.5.0
• Version of Node.js: 20.11.1

Additional context

Discussion that lead to the decision to file this Issue: https://discord.com/channels/839993398554656828/1274475845028675688/1277988844024631406

[j4w8n]

Be aware that if referencing the discord convo, we kinda hijacked the original post; so, going to the comments from 8/27 onward may be most relevant.