Next.js Discord

Discord Forum

CORS error in vercel

Answered
Sphynx posted this in #help-forum
Open in Discord
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
Answered by Anay-208 | Ping in replies
View full answer

50 Replies

SphynxOP
Anyone??
SphynxOP
No i am not using firebase.
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
 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
yes
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?
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
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.
SphynxOP
Any update?
I’ll be checking this soon
@Sphynx can you try setting ux_mode: "redirect"?
Answer
SphynxOP
@Anay-208 | Ping in replies Thanks man for the help, I will change it to redirect url
.
can you mark solution