Google Sign In continuously refreshes on production

[IainMcHugh]

Hello,

I've a NextJS portfolio app hosted on netlify. I'm trying to use next-auth but it only works locally for me (on localhost:3000), not in production.

• pages/api/auth/[...nextauth].ts

import NextAuth from 'next-auth';
import Providers from 'next-auth/providers';
import getConfig from 'next/config';

const {
  serverRuntimeConfig: { GOOGLE_CLIENT_ID, GOOGLE_CLIENT_SECRET, AUTH_EMAIL },
} = getConfig();

export default NextAuth({
  providers: [
    Providers.Google({
      clientId: GOOGLE_CLIENT_ID,
      clientSecret: GOOGLE_CLIENT_SECRET,
      authorizationUrl:
        'https://accounts.google.com/o/oauth2/v2/auth?prompt=consent&access_type=offline&response_type=code',
    }),
  ],
  callbacks: {
    async signIn(_user, _account, profile) {
      /** This only allows my email for logging in, works locally. */
      if (profile.email === AUTH_EMAIL) {
        return true;
      } else {
        return false;
      }
    },
  },
});

• next.config.js

module.exports = {
  reactStrictMode: true,
  publicRuntimeConfig: {
    ...
  },
  serverRuntimeConfig: {
    GOOGLE_CLIENT_ID: process.env.GOOGLE_CLIENT_ID,
    GOOGLE_CLIENT_SECRET: process.env.GOOGLE_CLIENT_SECRET,
    AUTH_EMAIL: process.env.AUTH_EMAIL,
  },
  ...
};

• components/.../Header.tsx

import { signIn, signOut } from 'next-auth/client';
...
<button onClick={() => signIn()}>
  Login
</button>

I have .env.development and .env.production files which both have:

• GOOGLE_CLIENT_ID
• GOOGLE_CLIENT_SECRET
• NEXTAUTH_URL (http://localhost:3000 in .env.development and https://mywebsite.com in .env.production

In my Google developer console

When I run locally it works perfectly:

1.mov

But when I run on production clicking Sign in with Google just continuously refreshes the page:

2.mov

I have also set all of the above environment variables directly in netlify but no luck. Any help at all or even suggestion for debugging would be greatly appreciated. Thanks.

[IainMcHugh]

For anyone who comes across this issue, I found the solution in issue #656. My site can be accessed with both www and non-www, with www being the primary domain and non-www redirecting to the primary. I had set my NEXT_AUTH value to the non-www domain, adding the www fixed it (just make sure it matches in your provider setup also)