Google OAuth Issues

1

I am having issues getting google oauth working on my render platform. It currently works fine and well on my local, but not on the render site.

Here are the issues I get on the console log. Also, it is noted that the google credential is received
main.a0e0e16d.js:2 Google login response status: 200
main.a0e0e16d.js:2 Google login response data: (empty)
I believe there is an issue with google cloud console, but I am not 100% sure. In my authorized domains for credentials, I have my godaddy website which my render app is connected to, as well as my front end server (…onrender.com). In my credentials, I have localhost, localhost3000, onrender.com frontend static site, and onrender.com back end web service, and my go daddy website. I also have the same for Authorized redirect URIs.

Here is my server side:
app.post(“/google-login”, async (req, res) => {
const { token } = req.body;
try {
console.log(“Received token:”, token); // Log received token
const response = await axios.get(https://www.googleapis.com/oauth2/v3/tokeninfo?id_token=${token});
console.log(“Google token info response:”, response.data); // Log response data
const { email, sub, name } = response.data; // sub is the user id
await tryMongooseConnection();

let user = await userCollection.findOne({ email });
if (!user) {
  user = await userCollection.create({
    email: email,
    googleId: sub,
    username: name,
    listings: []
  });
} else {
  user.googleId = sub; // update Google ID if user already exists
  await user.save();
}

let cookie = crypto.randomBytes(16).toString('hex');
await userCollection.updateOne({ email: email }, { $set: { session: cookie } });

res.cookie("session", cookie, {
  maxAge: 30 * 24 * 60 * 60 * 1000, // 30 days
  secure: true, // true if using HTTPS
  httpOnly: true,
  sameSite: 'None', // None for cross-site cookies
  path: '/' // Ensure the path is set correctly
});

console.log("Set cookie:", cookie); // Log the cookie value

res.status(201).json({ message: 'Google login successful', email, userId: sub });

} catch (error) {
console.error(“Error during Google login:”, error); // Log the error
res.status(400).json({ message: ‘Google login failed’, error: error.message });
}
});

Here is my front-end side:
const handleGoogleLoginSuccess = async (response) => {
try {
const { credential } = response;
console.log(“Google credential received:”, credential); // Log credential
const res = await axios.post(
“/google-login”,
{ token: credential },
{ withCredentials: true },
);
console.log(“Google login response status:”, res.status); // Log response status
console.log(“Google login response data:”, res.data); // Log response data

  if (res.status === 201 && res.data.message === 'Google login successful') {
    window.location.href = "/home"; // Redirect to /home
  } else {
    console.error("Google login failed with status:", res.status, "and message:", res.data.message);
  }
} catch (error) {
  console.error("Error with Google login:", error);
}

};

Here is some of my CORS info for consideration as well:
const allowedOrigins = [
(local host)
(backend web service on render)
(front end static side on render)
(go daddy domain websites)
];

const app = express();
app.use(cors({
origin: function (origin, callback) {
if (!origin) return callback(null, true); // Allow requests with no origin, like mobile apps or curl requests
if (allowedOrigins.indexOf(origin) === -1) {
var msg = ‘The CORS policy for this site does not allow access from the specified Origin.’;
return callback(new Error(msg), false);
}
return callback(null, true);
},
credentials: true
}));

2

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.