google oauth with nextjs

79 views Asked by At

I've tried following numerous tutorials for this, and it seems like something that should be very straightforward. However, I am consistently getting either invalid_request or redirect_uri_mismatch error responses whenever I attempt to authenticate my test user with Google.

app/api/auth/[...nextauth]/route.ts:

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

const handler = NextAuth({
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID!,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET!,
      authorization: {
        params: {
          response_type: "code",
          redirect_uri: "http://localhost:3000/api/auth/callback/google",
          scope: "https://www.googleapis.com/auth/userinfo.profile https://www.googleapis.com/auth/userinfo.email"
        }
      }
    })
  ]
});

export { handler as GET, handler as POST }

app/NavBar.tsx:

import React from "react";
import Link from "next/link";

const NavBar = () => {
  return (
    <div className="flex bg-slate-200 p-5">
      <Link className="mr-5" href="/">
        NextJS
      </Link>
      <Link className="mr-5" href="/users">
        Users
      </Link>
      <Link href="api/auth/signin">Sign In</Link>
    </div>
  );
};

export default NavBar;

On localhost, upon clicking "Sign in with google", it always shows the following error response:

enter image description here

But when comparing my redirect_uri in the headers to the redirect_uri I have set up in google cloud, they appear to match.

enter image description here

enter image description here

I have tried adding other users to the test user whitelist and logging into those, logging in with other browsers, re-creating the app in Google Cloud and regenerating credentials, and clearing my cache / attempting the request in an incognito window.

What's interesting is that the tutorial I was following did not explicitly state to include response_type, redirect_uri, and scope in the GoogleProvider setup - only clientId and clientSecret were specified. If I omit these completely and only pass in clientId and clientSecret, I still get the redirect_uri_mismatch error.

0

There are 0 answers