My app is blocked using Google Strategy with PassportJs and MERN - node.js

Question

i develop an app using MERN stack and PassportJs for authentication. I used Google strategy to allow user authentication but i'm faced issues.
Here are the errors that appear in the console:
Access to fetch at 'https://tagsite.herokuapp.com/users/google' from origin 'https://tagsite.netlify.app' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
GET https://tagsite.herokuapp.com/users/google net::ERR_FAILED
How can i fix it? Some help please.
I already use cors package in backend, but still have same errors.
Here is my code.
Backend
app.js
const express = require('express');
const cors = require('cors');
const bodyParser = require('body-parser');
const cookieParser = require('cookie-parser');
const passport = require('passport');
const serverless = require('serverless-http');
if (process.env.NODE_END !== 'production') {
// Load environment variables from .env file for non production environment
require('dotenv').config()
}
// Connect database
require('./utils/connectdb')
// Strategies
require('./strategies/GoogleStrategy')
require('./utils/authenticate')
// Routes import
const userRoutes = require('./routes/user')
const app = express();
app.use(bodyParser.json())
app.use(cookieParser(process.env.COOKIE_SECRET))
app.use(cors())
app.use(passport.initialize())
// Use routes
app.use('/users', userRoutes)
app.get('/', (req, res) => {
res.send({ status: 'success' })
})
// Server set up
let port;
if (process.env.PORT) {
port = process.env.PORT
} else {
port = 8000
}
app.listen(port, () => {
console.log('Listen on port: ' + port)
})
module.exports.handler = serverless(app)
GoogleStrategy.js
const passport = require('passport')
const googleStrategy = require('passport-google-oauth20').Strategy
const User = require('../models/user')
const slug = require('slug')
require('dotenv').config()
// serialize & deserialize user
passport.serializeUser((user, done) => {
done(null, user.id)
// done(null, user)
})
passport.deserializeUser((id, done) => {
User.findById(id)
.then((user) => {
done(null, user)
})
// done(null, user)
})
passport.use(
new googleStrategy(
{
clientID: process.env.GOOGLE_APP_ID,
clientSecret: process.env.GOOGLE_APP_SECRET,
callbackURL: process.env.GOOGLE_APP_CALLBACK_URL
},
(accessToken, refreshToken, profile, done) => {
User.findOne({ providerId: profile.id })
.then((user) => {
if (user) {
const userData = {
username: profile.displayName,
provider: profile.provider,
providerId: profile.id,
email: profile.emails[0].value,
avatar: profile._json.picture
&& profile._json.picture,
token: accessToken,
slug: slug(profile.displayName)
}
user.refreshToken.push({ refreshToken: accessToken })
user.save()
done(null, userData)
} else {
new User({
username: profile.displayName,
provider: profile.provider,
providerId: profile.id,
email: profile.emails[0].value,
avatar: profile._json.picture
&& profile._json.picture,
$addToSet: { refreshToken: accessToken },
slug: slug(profile.displayName)
})
.save()
.then((user) => {
const userData = {
username: profile.displayName,
provider: profile.provider,
providerId: profile.id,
email: profile.emails[0].value,
avatar: profile._json.picture
&& profile._json.picture,
token: accessToken,
slug: slug(profile.displayName)
}
user.refreshToken.push({ refreshToken: accessToken })
user.save()
done(null, userData)
})
.catch((error) => {
console.log(`create new user failed: ${error}`)
})
}
})
}
)
)
user.js (controllers)
const passport = require('passport');
module.exports = {
googleLogin: [
passport.authenticate('google', { scope: ['profile', 'email'] })
],
googleLoginCallback : [
passport.authenticate('google', {
failureRedirect: process.env.AUTH_FAILURE_REDIRECT_URL,
session: false
}),
(req, res, next) => {
const token = req.user.token
// res.status(200).json({userData: req.user})
res.cookie('refreshToken', req.user.token, COOKIE_OPTIONS)
res.send({ success: true, token })
}
],
user.js (routes)
const router = require('express').Router()
// Controllers
const {
googleLogin, googleLoginCallback
} = require('../controllers/user')
router.get('/google', googleLogin)
router.get('/google/callback', googleLoginCallback)
module.exports = router
Frontend
google.js (component)
import { Button, Callout } from '#blueprintjs/core'
import React, { useContext, useState } from 'react'
import { UserContext } from '../../utils/context/UserContext'
const GoogleLogin = () => {
const [error, setError] = useState(null)
const [userContext, setUserContext] = useContext(UserContext)
const loginGoogle = () => {
setError(null)
const genericErrorMessage = 'Something error'
fetch(`${process.env.REACT_APP_API_URL}/users/google`, {
method: 'GET',
// credentials: 'include',
headers: {
'Content-Type': 'application/json',
'Access-Control-Allow-Origin': '*'
},
})
.then(async (res) => {
if (!res.ok) {
if (res.status === 400) {
setError('Please try again')
} else if (res.status === 401) {
setError('Unauthorized')
} else {
setError(genericErrorMessage)
}
} else {
const data = await res.json()
setUserContext((oldValues) => {
return { ...oldValues, token: data.token }
})
}
})
.catch((err) => {
setError(genericErrorMessage)
})
}
return (
<>
{error && <Callout intent="danger">{error}</Callout>}
<Button text="login with google" onClick={loginGoogle} />
</>
)
}
export default GoogleLogin

Answer 1

app.use(
cors({
origin: [
"https://tagsite.netlify.app"
],
credentials: true,
methods: "GET,HEAD,PUT,PATCH,POST,DELETE",
})
);
Like your error is saying, CORS doesn't like your Front End Code. It doesnt know it. You have to introduce your Front End to your Backend, and tell your Backend to let certain origins access your server.
I'm not experienced enough on whether you have to include credentials or not, but it works for me!