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:
But when comparing my redirect_uri in the headers to the redirect_uri I have set up in google cloud, they appear to match.
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.