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

in my production enterprise app that the entire company uses, i get sketchy message: "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" #1552

Closed
6 tasks done
Jared-Dahlke opened this issue Nov 9, 2023 · 19 comments
Closed
6 tasks done

in my production enterprise app that the entire company uses, i get sketchy message: "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" #1552

Jared-Dahlke opened this issue Nov 9, 2023 · 19 comments
Labels
question Further information is requested

Comments

@Jared-Dahlke
Copy link

Checklist

Description

I am surprised this still persists. Isn't this the official Nextjs Auth0 package? Lee Rob said he tried to talk to you guys about this and is not sure why it is still appearing. Is there some kind of problem that needs fixed? It is embarrassing to have this warning in the console in our production enterprise applications at work. We are 2 major versions in.

Reproduction

run the official Auth0 Nextjs library with any Nextjs 13 or Nextjs 14 app.

Additional context

No response

nextjs-auth0 version

"@auth0/nextjs-auth0": "^3.2.0",

Next.js version

14

Node.js version

20
@adamjmcgrath
Copy link
Contributor

Hi @Jared-Dahlke

It is embarrassing to have this warning in the console in our production enterprise applications at work

The warning only shows in development (when NODE_ENV=development) (see https://github.com/auth0/nextjs-auth0/blob/main/src/http/auth0-next-response-cookies.ts#L8) - so this would suggest your production enterprise applications are running in development mode.

Also, if you read the link the warning points to - you'll see that this is still a valid warning. You cannot write to the cookie in React Server Components, and you are using a feature of the SDK that expects to write to the cookie in a RSC. In these cases the SDK may not behave as expected - more info: https://github.com/auth0/nextjs-auth0#using-this-sdk-with-react-server-components

@adamjmcgrath adamjmcgrath added the question Further information is requested label Nov 9, 2023
@Jared-Dahlke
Copy link
Author

Jared-Dahlke commented Nov 10, 2023 via email

@adamjmcgrath
Copy link
Contributor

Hi @Jared-Dahlke

Why is their a valid warning using the official auth0 library

The warning is there to inform you that you can't write cookies in a Server Component. This is not a restriction imposed by the SDK, it is imposed by Next.js. The SDK can't change this - we have to operate within the bounds of the framework.

What we can do is warn you, at development time, that the features of the SDK that rely on writing to the cookie wont work in Server Components and share a link where we offer some solutions to this (like writing to the session cookie in the middleware).

We chose to add this warning, at development time, so that you can take any necessary steps to workaround this restriction on Server Components before going to production. If we didn't add a warning developers might only discover this when they start getting feedback from their users about sessions expiring early or noticing increased traffic to their refresh token endpoint.

We are a paid user, is there someone I can talk to about this?

Information about what support channels Auth0 offer are here https://auth0.com/docs/troubleshoot/customer-support/support-channels

@Jared-Dahlke
Copy link
Author

Jared-Dahlke commented Nov 10, 2023 via email

@adamjmcgrath
Copy link
Contributor

Hi @Jared-Dahlke

It's difficult to give the exact code without knowing how you're using the SDK. In most cases it will simply be a case of protecting your routes with withMiddlewareAuthRequired - then your session expiry will be updated every time the user touches the session and you can safely ignore the warning.

If your application has more complex requirements, like refreshing access tokens from react server components - then I'd need some more info to give you a good recommendation.

@ipv6sq
Copy link

ipv6sq commented Nov 13, 2023

experiencing the same issue here

export default withMiddlewareAuthRequired();

export const config = {
    matcher: [
        "/dashboard/"
    ]
};

If I understand it correctly, then I can safe ignore this warning in server rendering components right? because the /dashboard is protected and the session is touched every time a user tried to open it?

@adamjmcgrath
Copy link
Contributor

If I understand it correctly, then I can safe ignore this warning in server rendering components right? because the /dashboard is protected and the session is touched every time a user tried to open it?

Correct 👍

@Jared-Dahlke
Copy link
Author

ok awesome thank you @adamjmcgrath . I am using middleware so I am good then. I think what throws people off is this sentence here where it says the cookie "can" be written from middleware. Almost as if it's implying something extra has to be done, and it doesn't help that i get the warning as well. Thanks for the clarification!

image

@Jared-Dahlke Jared-Dahlke reopened this Nov 13, 2023
@Jared-Dahlke
Copy link
Author

@adamjmcgrath after writing that comment I realized I need to ask you a clarifying question.

i am using middleware.ts to protect my app, but i'm not using withMiddlewareAuthRequired, i'm doing it manually like this:

//middleware.ts

import { getSession } from "@auth0/nextjs-auth0/edge";
import { NextRequest, NextResponse } from "next/server";

export async function middleware(req: NextRequest) {
  const { nextUrl } = req;
  const session = await getSession();

  const isProtectedRoute =
    nextUrl.pathname.startsWith("/app") || nextUrl.pathname.startsWith("/api");

  const isNotProtectedRoute = nextUrl.pathname.startsWith("/api/auth");
  if (!session && isProtectedRoute && !isNotProtectedRoute) {
    const loginUrl = new URL("/api/auth/login", req.url);
    loginUrl.searchParams.set("returnTo", req.nextUrl.pathname);
    return NextResponse.redirect(loginUrl);
  }

  return NextResponse.next();
}

Am I all good still doing it this way?

@adamjmcgrath
Copy link
Contributor

Yep - you're good, anything that accesses the session (like getSession) is fine, you just need to make sure you use the req/res when you get the session

export async function middleware(req: NextRequest) {
  const { nextUrl } = req;
  const res = NextResponse.next()
  const session = await getSession(req, res);

  const isProtectedRoute =
    nextUrl.pathname.startsWith("/app") || nextUrl.pathname.startsWith("/api");

  const isNotProtectedRoute = nextUrl.pathname.startsWith("/api/auth");
  if (!session && isProtectedRoute && !isNotProtectedRoute) {
    const loginUrl = new URL("/api/auth/login", req.url);
    loginUrl.searchParams.set("returnTo", req.nextUrl.pathname);
    return NextResponse.redirect(loginUrl);
  }

  return res;
}

@adamjmcgrath
Copy link
Contributor

Also, will take another look at those docs. Going to put some time aside shortly to see if there's a better way to support using RSC's than what we're doing at the moment.

@Jared-Dahlke
Copy link
Author

Jared-Dahlke commented Nov 13, 2023 •
edited
Loading

@adamjmcgrath , I noticed that I am getting a bunch of these errors in Sentry:
image

If you read the error it looks like Auth0 is causing the error. Could you share your thoughts/ what i could do to prevent this error , assuming everything is ok...

Error: Dynamic server usage: Page couldn't be rendered statically because it used `cookies`. See more info here: https://nextjs.org/docs/messages/dynamic-server-error
  File "app:///_next/server/chunks/9009.js", line 1, in staticGenerationBailout
  File "app:///_next/server/chunks/9206.js", line 9, in cookies
  File "app:///_next/server/chunks/9206.js", line 1, in Auth0NextRequestCookies.getCookies
  File "app:///_next/server/chunks/9206.js", line 1, in StatelessSession.deleteSession
  File "app:///_next/server/chunks/9206.js", line 1, in StatelessSession.save
...
(5 additional frame(s) were not displayed)

@adamjmcgrath
Copy link
Contributor

Hi @Jared-Dahlke - this looks like an issue in Sentry (see getsentry/sentry-javascript#9290) - Those errors are a normal part of a successful build (next uses errors to bail out of static rendering) that shouldn't surface to the user.

Looks like Sentry have fixed this in 7.80.0 getsentry/sentry-javascript#9503

@adamjmcgrath
Copy link
Contributor

I think I've answered your questions - so closing.

@Jared-Dahlke
Copy link
Author

Jared-Dahlke commented Nov 15, 2023 via email

@ADTC

This comment was marked as duplicate.

Sign in to view
@ADTC
Copy link
Contributor

ADTC commented Jan 31, 2024

Apologies for the revival. I'll move this to #1614

@alist alist mentioned this issue May 21, 2024
Open
5 tasks
@ilovemesomeramen
Copy link

ilovemesomeramen commented Jun 17, 2024 •
edited
Loading

So if i understand this correctly,
when using the middleware withMiddlewareAuthRequired the session will always be updated correctly but you will still get the warning message when a RSC calls getSession or anything related to it?

So the only method to get rid of the warning would be to set the environment variable AUTH0_SESSION_AUTO_SAVE=false and modify the withMiddlewareAuthRequired middleware such that touchSession is called like this:

export default withMiddlewareAuthRequired({
  async middleware(req) {
    const res = NextResponse.next();
    await touchSession(req, res);
    return res;
  },
});

This seems a little convoluted. I feel like it is misleading that the the warning gets emitted in the first place when everything is setup correctly anyways. Or i missed something in the docs, but it appears to me that the warning is always emitted when AUTH0_SESSION_AUTO_SAVE is not set to false. Having a warning emitted while following the recommended setup is extremely confusing.

@ADTC
Copy link
Contributor

ADTC commented Jun 19, 2024

@ilovemesomeramen or you can just ignore the warning. 😂

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

No branches or pull requests
5 participants
@adamjmcgrath @ADTC @ilovemesomeramen @Jared-Dahlke @ipv6sq