Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Improve App Router DX/documentation #1614

Open
5 tasks done
dallonf opened this issue Dec 21, 2023 · 6 comments
Open
5 tasks done

Improve App Router DX/documentation #1614

dallonf opened this issue Dec 21, 2023 · 6 comments

Comments

@dallonf
Copy link

dallonf commented Dec 21, 2023

Checklist

  • I have looked into the Readme, Examples, and FAQ and have not found a suitable solution or answer.
  • I have looked into the API documentation and have not found a suitable solution or answer.
  • I have searched the issues and have not found a suitable solution or answer.
  • I have searched the Auth0 Community forums and have not found a suitable solution or answer.
  • I agree to the terms within the Auth0 Code of Conduct.

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 ADTC mentioned this issue Jan 31, 2024
Closed
6 tasks
@ADTC
Copy link
Contributor

ADTC commented Jan 31, 2024

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?

@ADTC ADTC mentioned this issue Jan 31, 2024
Open
6 tasks
@ajwootto
Copy link

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
Copy link

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

nextjs-auth0/src/client/use-user.tsx

Lines 97 to 115 in 951a248

* ```js
* // app/layout.js
* import { UserProvider } from '@auth0/nextjs-auth0/client';
*
* export default async function RootLayout({ children }) {
* // this will emit a warning because Server Components cannot write to cookies
* // see https://github.com/auth0/nextjs-auth0#using-this-sdk-with-react-server-components
* const session = await getSession();
*
* return (
* <html lang="en">
* <body>
* <UserProvider user={session?.user}>
* {children}
* </UserProvider>
* </body>
* </html>
* );
* }

@ADTC
Copy link
Contributor

ADTC commented Apr 7, 2024

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

@alist
Copy link

alist commented May 21, 2024

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:
#1552 (comment)

@alist
Copy link

alist commented May 21, 2024

Also, my recent PR applies to this issue #1750

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@mscottford @dallonf @alist @ajwootto @ADTC