I'm new to Next.js and Nextauth so bare with me if my terminology is not 100%
I'm trying to implement Nextauth and specifically auth with google.

I'm getting this error:

[next-auth][error][CLIENT_FETCH_ERROR] 
https://next-auth.js.org/errors#client_fetch_error Unexpected token '<', "<!DOCTYPE "... is not valid JSON {error: {…}, url: '/api/auth/session', message: `Unexpected token '<', "<!DOCTYPE "... is not valid JSON`}

Some googling didn't really come up with good answers to fix things.

from my app/api/auth/[...nextauth].js:

export const authConfig = {
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    }),
  ]
}

const handler = NextAuth(authConfig);

export { handler as GET, handler as POST};

from calling sign in my GoogleAuthButton.js

function GoogleAuthButton() {
  const { data: session } = useSession();
  const router = useRouter();

  const handleSignIn = async () => {
    try {
      await signIn("google");
      router.push("/signup");
    } catch (error) {
      console.error(error);
    }
  }

  return (
    <div>
      {!session ? (
        <button onClick={() => handleSignIn()}>Sign in with Google</button>
      ) : (
        <>
          <p>Welcome, {session.user.name}!</p>
          <button onClick={() => signOut()}>Sign out</button>
        </>
      )}
    </div>
  );
};

export default GoogleAuthButton;

Can anyone help let me know what I'm doing wrong?