NextAuth Google Login Redirect to Localhost instead of Production Domain

Question

I am doing a project which will use Google Login in NextJs oauth setting

This is my setting in OAuth 2.0

and in amplify environment variables amplify setting

After I deployed the app and try to login It redirect me to http://localhost:3000 instead of the domain I set at amplify and OAuth 2.0

import NextAuth from 'next-auth';
import GoogleProvider from 'next-auth/providers/google';

export default NextAuth({
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    }),
  ],
  secret: process.env.NEXTAUTH_SECRET || process.env.NEXT_PUBLIC_SECRET,
});

the code above is my src/pages/api/auth/[...nextauth].ts

import { getSession, GetSessionParams, signIn } from 'next-auth/react';
import styles from '@styles/login.module.css';
import Head from 'next/head';
import gmailLogo from '@assets/g.webp';
import logo from '@assets/logo.png';
import Image, { StaticImageData } from 'next/image';

type Props = { logo: StaticImageData; gmailLogo: StaticImageData };

const Login = ({ logo, gmailLogo }: Props) => {
  return (
    <div className={styles.login}>
      <div className={styles['login-overlay']}></div>
      <Head>
        <title>Login</title>
      </Head>

      <Image
        width={logo.width}
        height={logo.height}
        src={logo.src}
        alt="logo"
        className={styles['company-logo']}
      />

      <h1>
        Welcome to <br />
        <span>CausewayLink Visa Portal</span>
      </h1>
      <div
        className={styles['google-login-button']}
        onClick={() => signIn('google')}
      >
        <span>Sign in with your Gmail</span>
        <Image
          width={gmailLogo.width}
          height={gmailLogo.height}
          src={gmailLogo.src}
          alt="gmail-login-logo"
        />
      </div>
    </div>
  );
};

export async function getServerSideProps(context: GetSessionParams) {
  const session = await getSession(context);

  if (session) {
    return {
      redirect: {
        destination: '/dashboard',
        permanent: false,
      },
    };
  }

  return { props: { logo, gmailLogo } };
}

export default Login;

The code above is for my login page

I tried to add this command in amplify.yml in build stage, but seems no value read but from the image you can see my NEXTAUTH_URL is already set

- echo "NEXTAUTH_URL=$NEXTAUTH_URL" >> .env

Please provide any guidance, thanks in advance

EQ0920 · Accepted Answer · 2025-10-23 07:02:31Z

0

Updated: I found the issue

It is not only NEXTAUTH_URL is not read
But all the env variables which are not private
The GOOGLE_CLIENT_ID and GOOGLE_CLIENT_SECRET is not read too

To make them readable
either make them public variable for example

NEXT_PUBLIC_GOOGLE_CLIENT_ID=YOUR_GOOGLE_CLIENT_ID

or echo them in to env during build stage

build:
    commands:
        - echo "API_URL=$API_URL" >> .env
        - echo "GOOGLE_CLIENT_ID=$GOOGLE_CLIENT_ID" >> .env
        - echo "GOOGLE_CLIENT_SECRET=$GOOGLE_CLIENT_SECRET" >> .env
        - echo "NEXTAUTH_URL=$NEXTAUTH_URL" >> .env
        - npm run build

edited Oct 23 at 7:02

answered Oct 23 at 3:35

EQ0920

1248 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

NextAuth Google Login Redirect to Localhost instead of Production Domain

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related