Next-auth: TypeError: Cannot read property 'csrfToken' of null

[ricjohn-acosta]

Please refer to the documentation, the example project and existing issues before creating a new issue.

Your question
Not sure why I'm getting the following error: TypeError: Cannot read property 'csrfToken' of null on the client side and CLIENT_FETCH_ERROR null/csrf TypeError: Only absolute URLs are supported on the server side. This error only occurs when the browser is recently opened and then navigating directly to /signup page. The error disappears when the index page is loaded first and then navigating to /signup page

What are you trying to do
Trying to implement a custom signup page with an email provider and third party providers

Relevant code

signup.js

import { csrfToken, signin, providers } from "next-auth/client";
import Button from "@material-ui/core/Button";

export default ({ csrfToken, providers }) => {
  return (
    <>
      <form
        method="post"
        action="/api/auth/signin/email"
        onSubmit={(e) => {
          e.preventDefault();
          signin("email", { email: document.getElementById("email").value });
        }}
      >
        <input name="csrfToken" type="hidden" defaultValue={csrfToken} />
        <label>
          Email address
          <input type="text" id="email" name="email" />
        </label>
        <button type="submit">Sign in with Email</button>
      </form>

      {Object.values(providers).map((provider) =>
        provider.name === "Email" ? null : (
          <p key={provider.name}>
            <Button
              href={`/api/auth/signin/${provider.name.toLowerCase()}?callbackUrl=${
                process.env.NODE_ENV !== "production"
                  ? "http://localhost:3000/account-setup"
                  : process.env.SITE
              }`}
            >
              Sign in with {provider.name}
            </Button>
          </p>
        )
      )}
    </>
  );
};

export async function getServerSideProps(context) {
  return {
    props: {
      csrfToken: await csrfToken(context),
      providers: await providers(context),
    },
  };
}

Documentation 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
• [X] Could not find relevant documentation
• [X] Found the example project helpful
• [ ] Did not find the example project helpful

[iaincollins]

Thanks for the bug report!

I can confirm is a legitimate bug report of an issue that can happen if you run a function before any cookies are set; we will need to address this.

~As a work around for now, you can either avoid server side functions on potential landing pages (not ideal if you want to use custom sign in pages that support server side rendering) or you can add the following to next.config.js in your app:~

[example deleted]

~This is not ideal as you will need to use different values for this in different environments (e.g. live/prod), but will work for now. We should address this bug as a priority.~

Update:

As of 2.1 you can configure client options in pages/_app.js by passing them to the provider. As with the API route, need to pass the canonical site URL to it (e.g. http://localhost:3000) to make server side calls securely from pages in your app.

Client options should no longer be specified in next.config.js.

[iaincollins]

I think we have a fix for this.

Update: Please see the link to the PR for more information.

[kbardi]

It is still happening to me, but it works correctly in dev mode (running yarn dev), but in prod it fails (running yarn build && yarn start).

I tried with getProviders() and getCsrfToken(), but it didn't work.

Here is the error in console:

[next-auth][error][CLIENT_FETCH_ERROR] [
  '/api/auth/providers',
  TypeError: Only absolute URLs are supported
      at getNodeRequestOptions (/Users/kevinbardi/Projects1/solosetratadevivir/node_modules/next/dist/compiled/node-fetch/index.js:1:145647)
      at /Users/kevinbardi/Projects1/solosetratadevivir/node_modules/next/dist/compiled/node-fetch/index.js:1:147021
      at new Promise (<anonymous>)
      at fetch (/Users/kevinbardi/Projects1/solosetratadevivir/node_modules/next/dist/compiled/node-fetch/index.js:1:146956)
      at /Users/kevinbardi/Projects1/solosetratadevivir/node_modules/next-auth/dist/client/index.js:276:23
      at Generator.next (<anonymous>)
      at asyncGeneratorStep (/Users/kevinbardi/Projects1/solosetratadevivir/node_modules/next-auth/dist/client/index.js:20:103)
      at _next (/Users/kevinbardi/Projects1/solosetratadevivir/node_modules/next-auth/dist/client/index.js:22:194)
      at /Users/kevinbardi/Projects1/solosetratadevivir/node_modules/next-auth/dist/client/index.js:22:364
      at new Promise (<anonymous>)
] 
https://next-auth.js.org/errors#client_fetch_error
[next-auth][error][CLIENT_FETCH_ERROR] [
  '/api/auth/csrf',
  TypeError: Only absolute URLs are supported
      at getNodeRequestOptions (/Users/kevinbardi/Projects1/solosetratadevivir/node_modules/next/dist/compiled/node-fetch/index.js:1:145647)
      at /Users/kevinbardi/Projects1/solosetratadevivir/node_modules/next/dist/compiled/node-fetch/index.js:1:147021
      at new Promise (<anonymous>)
      at fetch (/Users/kevinbardi/Projects1/solosetratadevivir/node_modules/next/dist/compiled/node-fetch/index.js:1:146956)
      at /Users/kevinbardi/Projects1/solosetratadevivir/node_modules/next-auth/dist/client/index.js:276:23
      at Generator.next (<anonymous>)
      at asyncGeneratorStep (/Users/kevinbardi/Projects1/solosetratadevivir/node_modules/next-auth/dist/client/index.js:20:103)
      at _next (/Users/kevinbardi/Projects1/solosetratadevivir/node_modules/next-auth/dist/client/index.js:22:194)
      at /Users/kevinbardi/Projects1/solosetratadevivir/node_modules/next-auth/dist/client/index.js:22:364
      at new Promise (<anonymous>)
] 

is there any workaround for it? If I reload a couple of times the page, it render correctly, which is a weird behaviour.

[iaincollins]

It's addressed in v3 which handles configuration slightly differently to resolve this.

The example repo is currently running v3 beta, I'd give that a go. Hopefully will be out soon.

[iaincollins]

PS: There is a workaround with setOptions for v2 that I think should be described in the URL linked to from the error

[kbardi]

Thank you! It worked! I added in signin page setOptions({ site: process.env.SITE }); and that's it

[iaincollins]

I think we are good to close this one! Hopefully with v3 it shouldn't come up. :-)