Next-auth: Server Side providers/csrfToken/getCsrfToken is null on page reload on dev server

[yournatalita]

Your question
_version: "^3.1.0"
mode: production_

I use the credentials-signin as described here.

I get csrfToken on server-side as described in documentation

SignIn.getInitialProps = async (context) => {
  return {
    csrfToken: await csrfToken(context)
  }
}

I redirect client-side as described in one of your issue treads

useEffect(() => {
    if (!loading && !session) {
      Router.push(REDIRECT_URL);
    }
  }, [session, loading]);

The problem is
When app redirects from another page via Router.push i get the correct token on signin page.

When user reloads signin page manually, for example via F5, provider, csrfToken and getCsrfToken are null (cookies are fine) and console logs https://next-auth.js.org/errors#client_fetch_error error with javascript error SyntaxError: Unexpected token in JSON at position, and by "<" in it I can assume REST API returns a DOC page and breakes somehow.

Is this a bug or I am missing something?

When the person tries login with credentials without csrfToken it redirects to /api/auth/signin?csrf=true and not in my custom error page.

Is this a bug or designed behaviour? I don't need build-in auth page at all and I find it weird since it still creates an empty page https://prnt.sc/ucur6y which means for Next the URL is not breaking the 404 case.

_Additional Info that might be related:_

1) I have client-side redirect to custom signin page (changed via pages)

pages: {
    signin: '/auth/signin',
    error: '/auth/signin', // Error code passed in query string as ?error=
}

2) This is might be a bug related to #299 but it is closed during v3 upgrade.
3) I'm 100% sure NEXTAUTH_URL is in the right place and if my site is site.com it doesn't work with both
NEXTAUTH_URL=http://site.com and NEXTAUTH_URL=http://site.com/api/auth
4) My dev server is working on http and served via container in kubernetes
5) I've tried both csrfToken and getCsrfToken
6) providers doesn't work in this case too
7) production mode in localhost doesn't show that issue so it makes harder to debug

What are you trying to do
I am trying to make a custom credentials signin page.

Things I'm trying to achieve:
1) csrfToken is not null when user reloads page
2) login without csrfToken should return the error like the .reject() in authorize callback
3) Ability to specify custom signin page without creating empty default page to avoid custom 404 config

Currently I use csrfToken client-side as workaround.

I would be happy with any ideas for changes in my settings or explanation of this behavoiur.

Feedback
Documentation refers to searching through online documentation, code comments and issue history. The example project refers to next-auth-example.

• [ ] Found the documentation helpful
• [x] Found documentation but was incomplete
• [ ] Could not find relevant documentation
• [ ] Found the example project helpful
• [x] Did not find the example project helpful

[znk]

Working on a white-label, product, I get the same error after copying the internal pages

[iaincollins]

I appreciate I don't think this fully resolves your query and will follow up, but I think it should resolve most of it:

In 3.0 we made all the options camelCase to be consistent, so if you change 'signin' to 'signIn' here, that should resolve the problem with it not redirecting to your sign in page:

pages: {
    signIn: '/auth/signin',
    error: '/auth/signin', // Error code passed in query string as ?error=
}

(I appreciate this was an annoying change and could have been handled better, but is a one time growing pain for the lib.)

The route /api/auth/csrf should always work - and so should the client method.

I can't see any issues with that. I wonder if it's sometimes failing on dev due to the page being rebuilt by Next.js?

Dev mode is a bit weird in that respect and can trigger multiple page calls (and some failures) and is a bit out of our control.

@znk Did you also upgrade from a previous version or did you follow a tutorial or example from somewhere? I ask as a few folks have reported running into the same issue and am trying to work out if we have outdated docs / examples somewhere or if it's just confusing and we need to improve the error / warnings here.

[luigimassa]

Hi,
I resolved the problem
I use the latest nextjs
getInitialProps is deprecate. I used getServerSideProps

export async function getServerSideProps(context) {
  const csrfToken = await csrfTokenF(context);
  return { props: { csrfToken } };
}

You can see the nextjs doc in https://nextjs.org/docs/basic-features/data-fetching#getserversideprops-server-side-rendering

[yournatalita]

As I can see getInitialProps is not deprecated in last release. Neither code docs neither documentation says about it.

They just run another purpose by design and authors recommend to use getServerSide-way for data fetching for more optimized result.

But still getInitialProps is good for SSR + SPA as it merges client store with server store while routing as it works both from client side or from initial routing.

You can't just change the function as it will require architecture change of big part of app, and since the getInitialProps is not deprecated in documentation, I don't think that resolves the whole problem. But it will help for someone in their cases for sure.

[stale[bot]]

Hi there! It looks like this issue hasn't had any activity for a while. It will be closed if no further activity occurs. If you think your issue is still relevant, feel free to comment on it to keep ot open. Thanks!

[stale[bot]]

Hi there! It looks like this issue hasn't had any activity for a while. To keep things tidy, I am going to close this issue for now. If you think your issue is still relevant, just leave a comment and I will reopen it. (Read more at #912) Thanks!