I am trying to implement a third party log-in feature in my web app using the passport-google-oauth20, however I am getting the following error when trying to GET the resource using a function in my client side as shown below:
async function handleGoogleLogin() {
const url = 'http://localhost:5000/auth/google';
try {
let response = await fetch(url, {
method: 'GET',
headers: {
'Content-type': 'application/json',
'Accept': 'application/json',
'Access-Control-Allow-Origin': 'http://localhost:5000'
},
mode: 'cors',
cache: 'no-cache',
credentials: 'include',
})
console.log(response)
} catch (error) {
console.log(error);
}
}
These below are my passport.js code and my server.js respectively:
passport.use(new GoogleStrategy({
clientID: "261273528668-u49b84sr0r8qjerk414jpk1u0odsveoh.apps.googleusercontent.com",
clientSecret: "*******************************",
callbackURL: "http://localhost:5000/auth/google/callback",
passReqToCallback: true
}, (request, accessToken, refreshToken, profile, done) => {
console.log(profile)
return done(null, profile)
}))
server.js
// Google oauth
app.get('/auth/google', passport.authenticate('google', { scope: ['profile'] }));
app.get('/auth/google/callback', passport.authenticate('google', { failureRedirect: '/notFound' }), (req, res) => {
res.send({ loggedIn: true, customer: req.user });
});
////////////// My CORS middleware below : ////////////////////////////
app.use(cors({
origin: 'http://localhost:3000',
credentials: true
}));
The error that I get is as follows:
XHROPTIONShttps://accounts.google.com/o/oauth2/v2/auth?response_type=code&redirect_uri=http://localhost:5000/auth/google/callback&scope=profile&client_id=261273528668-u49b84sr0r8qjerk414jpk1u0odsveoh.apps.googleusercontent.com CORS Missing Allow Origin
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://accounts.google.com/o/oauth2/v2/auth?response_type=code&redirect_uri=http%3A%2F%2Flocalhost%3A5000%2Fauth%2Fgoogle%2Fcallback&scope=profile&client_id=261273528668-u49b84sr0r8qjerk414jpk1u0odsveoh.apps.googleusercontent.com. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 405.
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://accounts.google.com/o/oauth2/v2/auth?response_type=code&redirect_uri=http%3A%2F%2Flocalhost%3A5000%2Fauth%2Fgoogle%2Fcallback&scope=profile&client_id=261273528668-u49b84sr0r8qjerk414jpk1u0odsveoh.apps.googleusercontent.com. (Reason: CORS request did not succeed). Status code: (null).
TypeError: NetworkError when attempting to fetch resource.
I tried to tweak the 'Access-Control-Allow-Origin' header in my get request many times both using the wildcard * as well as my backend as origin however I get the same result either way.
Any suggestion would be appreciated.
