Next-auth redirecting to wrong path.
Unanswered
Largehead hairtail posted this in #help-forum
Largehead hairtailOP
I have next-auth in front end and medusa.js in backend. I am using medusa-plugin-auth package to handle the google login.
in my front end env I have added the following
BASE_URL=http://localhost:9000
NEXTAUTH_URL=http://localhost:9000/store/auth
// [...nextauth]/routes.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_ID "",
checks: ["state"],
}),
],
});
export { handler as GET, handler as POST };
With this everything works fine. But when I update the env of front end project with the deployed backend url instead of localhost:9000 google login is not working
BASE_URL=https://example.com
NEXTAUTH_URL=https://example.com/store/auth
With this when I click on google login I am redirected to
https://example.com/store/auth/signin?csrf=true
instead of https://example.com/store/auth/callback/google
/store/auth/callback/google is the expected route to which I should be redirected. Anyone has any idea on this ?
in my front end env I have added the following
BASE_URL=http://localhost:9000
NEXTAUTH_URL=http://localhost:9000/store/auth
// [...nextauth]/routes.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_ID "",
checks: ["state"],
}),
],
});
export { handler as GET, handler as POST };
With this everything works fine. But when I update the env of front end project with the deployed backend url instead of localhost:9000 google login is not working
BASE_URL=https://example.com
NEXTAUTH_URL=https://example.com/store/auth
With this when I click on google login I am redirected to
https://example.com/store/auth/signin?csrf=true
instead of https://example.com/store/auth/callback/google
/store/auth/callback/google is the expected route to which I should be redirected. Anyone has any idea on this ?
9 Replies
show your google button
Largehead hairtailOP
<SocialMediaButton
onClick={onClickGoogleLogin}
name="Sign in with Google"
icon={GoogleIcon}
/>
const onClickGoogleLogin = () => {
signIn("google");
};
onClick={onClickGoogleLogin}
name="Sign in with Google"
icon={GoogleIcon}
/>
const onClickGoogleLogin = () => {
signIn("google");
};
do you have the frontend url set in your allowed callback uris
in google cloud
Largehead hairtailOP
this is my backend url, since I am handling it from backend, front end is in localhost:3000. But with this if I am using localhost:9000 as backend url it is working. Only when I change it to the deployed baceknd url it is failing. That url is also added in the console
@Largehead hairtail this is my backend url, since I am handling it from backend, front end is in localhost:3000. But with this if I am using localhost:9000 as backend url it is working. Only when I change it to the deployed baceknd url it is failing. That url is also added in the console
… you need to add your frontend url too
Largehead hairtailOP
but how come it work when I am using backend from localhost ? Also it works when I use simple a tag with href = https://baceknd-url/store/auth/callback/google/
without using next-auth
without using next-auth
@Largehead hairtail but how come it work when I am using backend from localhost ? Also it works when I use simple a tag with href = https://baceknd-url/store/auth/callback/google/
without using next-auth
because you are using localhost at your pc? It needs to match the url man. in prod the url is different. so you need that one too. this is basic stuff.
Largehead hairtailOP
Sorry if I am wrong, But I think you didn't got my scenario. I haven't deployed my frontend yet. Only backend is deployed. I am still testing front end from localhost. Only the backend url is changed