CORS error in vercel
Answered
Sphynx posted this in #help-forum
SphynxOP
I am runing nextjs with Nodejs and in my local enviroment when i try to login with google it works fine but then i deploy my site to vercel it gives me a origin Error
Please help me out
Please help me out
Answered by Anay-208 | Ping in replies
It is a known issue: https://github.com/MomenSherif/react-oauth/issues/378
50 Replies
SphynxOP
Anyone??
Are you using firebase?
SphynxOP
No i am not using firebase.
I am using googleLogin services
I am using googleLogin services
@Anay-208 | Ping in replies
SphynxOP
But i am using the pop up google modal, to login the user and as i click the google login button it says cross origin error
@Anay-208 | Ping in replies .
SphynxOP
I also added those but still same error ,
And fyi it works perfectly fine locally but if i deploy it anywhere like cloudflare or vercel it gies me the following error
can you temporarily switch to
signInFlow="redirect"
to see if it works?SphynxOP
let me try , Do i have to change anything in backend for that?
or wait, can you try adding this to config
Changing the source to login path
module.exports = {
async headers() {
return [
{
source: "/login",
headers: [
{
key: "Cross-Origin-Embedder-Policy",
value: "unsafe-none",
},
],
},
];
},
};
Changing the source to login path
(if you haven't added the header before)
SphynxOP
OK LET ME TRY THIS ONE
SphynxOP
@Anay-208 | Ping in replies Do i have to put this in next config file?
Also source can be different or no , cause i am using it for register page so please guide if that should be different or same as /login
@Sphynx Also source can be different or no , cause i am using it for register page so please guide if that should be different or same as /login
As mentioned, change the source to that path
SphynxOP
I tried it but still the same error on both cloudflare as well as vercel
SphynxOP
@Anay-208 | Ping in replies Is this cors error or something else?
@Anay-208 | Ping in replies can you temporarily switch to `signInFlow="redirect"` to see if it works?
This is a alternate solution which can fix it
SphynxOP
ok soo this will redirect to google login page?
export const runtime = "edge";
import { Nodeapi } from "@/utils/axios";
import { useGoogleLogin } from "@react-oauth/google";
import { useState } from "react";
export const useLoginWithGoogle = () => {
const [userData, setUserData] = useState<object | null>(null); // State to hold the response data
const [error, setError] = useState<string | null>(null);
const login = useGoogleLogin({
onSuccess: async (tokenResponse) => {
console.log("ZajjajL", tokenResponse);
try {
console.log("🔄 Sending Token to Backend:", tokenResponse.access_token);
const res = await Nodeapi.post("/auth/google-popup", {
token: tokenResponse.access_token,
});
console.log(res.data);
localStorage.setItem("jwt_token", res.data.token);
setUserData(res.data);
// Update user state
} catch (err:unknown) {
console.error("Login failed", err);
setError("Login failed. Please try again.");
}
},
onError: () => console.error("Google login failed"),
});
return { signIn: login, userData, error }; // Return the signIn function for triggering the login
};
this is the frontend code @Anay-208 | Ping in replies
router.post("/google-popup", async (req, res) => {
const { token } = req.body;
console.log("Received Google Token:", token); // Debugging
if (!token) {
return res.status(400).json({ error: "Missing Google token" });
}
try {
const userInfoRes = await axios.get("https://www.googleapis.com/oauth2/v2/userinfo", {
headers: { Authorization: `Bearer ${token}` },
});
console.log("Google Response:", userInfoRes.data); // Debugging
const { id, email, name, picture } = userInfoRes.data;
// ✅ Check if user exists, otherwise create a new user
let user = await User.findOne({
$or: [{ googleId: id }, { email: email }]
});
if (!user) {
user = await User.create({
googleId: id,
email,
name,
avatar: picture,
});
}
// ✅ Generate JWT Token
const jwtToken = jwt.sign(
{ googleId: user.googleId, email: user.email, name: user.name, avatar: user.avatar },
process.env.JWT_SECRET, // Use a secure secret key
{ expiresIn: "7d" } // Token expires in 7 days
);
res.json({ token: jwtToken, user });
console.log("Zajjjajj",jwtToken);
} catch (err) {
console.error("Google Authentication Error:", err.response?.data || err.message); // Debugging
res.status(400).json({ error: "Invalid Google Token" });
}
});
Backend code
Sorry @Anay-208 | Ping in replies for being such a noob , try to fix this issue since 3 days
Can you create a min repro repo?
Tomorrow is my last exam, so I’ll be able to check it after that
@Sphynx
SphynxOP
Sure
Updates?
SphynxOP
Frontend Code repo:
https://github.com/Zajjaj-Khan/web-pay-FE.git
https://github.com/Zajjaj-Khan/web-pay-FE.git
Backend Code :
https://github.com/Zajjaj-Khan/nodeJS-BE-Auth.git
https://github.com/Zajjaj-Khan/nodeJS-BE-Auth.git
it contains only the auth part of the application
locally everything still runs fine but the issue is when i deploy it
Can you tell what Envs I'll have to create to get this working?
and I'll be checking this out tmr
SphynxOP
Sure
You from ?
SphynxOP
For frontend you only need GOOGLE_OAUTH_CLIENT_SECRET="Your google client id"
For backend
GOOGLE_CLIENT_ID = "Your Google ID"
GOOGLE_CLIENT_SECRET = "GOOGLE_SECRET"
MONGO_URI = "MONGODB_ATLAS_URI"
JWT_SECRET="FINANCIAL_APP"
I think you dont have to do anything with the backend , it is from frontend.
GOOGLE_CLIENT_ID = "Your Google ID"
GOOGLE_CLIENT_SECRET = "GOOGLE_SECRET"
MONGO_URI = "MONGODB_ATLAS_URI"
JWT_SECRET="FINANCIAL_APP"
I think you dont have to do anything with the backend , it is from frontend.
SphynxOP
Any update?
I’ll be checking this soon
@Sphynx can you try setting
ux_mode: "redirect"
?It is a known issue: https://github.com/MomenSherif/react-oauth/issues/378
Answer
SphynxOP
@Anay-208 | Ping in replies Thanks man for the help, I will change it to redirect url
can you mark solution