auth0 / nextjs-auth0

Next.js SDK for signing in with Auth0
MIT License
1.99k stars 373 forks source link

Improve App Router DX/documentation #1614

Open dallonf opened 7 months ago

dallonf commented 7 months ago

Checklist

Describe the problem you'd like to have solved

Using nextjs-auth0 with the App Router results in a bunch of noisy warnings:

nextjs-auth0 is attempting to set cookies from a server component,see https://github.com/auth0/nextjs-auth0#using-this-sdk-with-react-server-components

The advice given isn't particularly clear, but the only issue by default seems to be the first one:

If you have a rolling session (the default for this SDK), the expiry will not be updated when the user visits your site. So the session may expire sooner than you would expect (you can use withMiddlewareAuthRequired to mitigate this).

However, enabling withMiddlewareAuthRequired isn't an option for this project; logging in is optional. And even when using it, the warning is still printed constantly!

Digging through the source, I found that this middleware might do something similar while keeping auth optional, but the touchSession function isn't even officially documented!

import { touchSession } from '@auth0/nextjs-auth0/edge';

export async function middleware() {
  await touchSession();
}

A fresh project immediately after following the official setup guide should not be printing unavoidable warnings.

Describe the ideal solution

Only show the warning if there's an actual problem, that is, if userland code tries to set a cookie, or if there is no middleware configured to touch the session.

Document touchSession as an alternative to withMiddlewareAuthRequired.

Alternatives and current workarounds

I suppose you could configure autoSave: false in initAuth0 - I'm not sure if this would help. Maybe it should be set by default? At the very least, it should be documented if it helps!

Additional context

No response

ADTC commented 5 months ago

How can I find out which RSC is trying to set cookies? In my code, I can't find any RSC that imports auth0 and retrieves session. It's always a client component. So IDK how or why this warning shows. It doesn't have any information about the exact location of the RSC.

Only show the warning if there's an actual problem, that is, if userland code tries to set a cookie.

So right now I get this warning even if I'm not doing anything wrong?

ajwootto commented 5 months ago

I'm getting this warning just by adding <UserProvider> to my component tree in a server component layout. I'm not calling any other Auth0 SDK stuff, just rendering that component. I'm also using the middleware.

Not sure why the warning applies in this case

mscottford commented 3 months ago

I found a comment in the source code for the <UserProvider/> that provides some more context around this error message.

https://github.com/auth0/nextjs-auth0/blob/951a24864c61eec98702f91eb7784555d54916da/src/client/use-user.tsx#L97-L115

ADTC commented 3 months ago

@mscottford Any chance of looking at the source code of getSession() and finding out where, how and why it emits the warning?

alist commented 2 months ago

I'm also confused by this. When are you emitting these warnings? I added getSession to every call in middleware per @adamjmcgrath 's advice and I'm still getting it: https://github.com/auth0/nextjs-auth0/issues/1552#issuecomment-1808521687

alist commented 2 months ago

Also, my recent PR applies to this issue https://github.com/auth0/nextjs-auth0/pull/1750