I am currently working on implementing Passport to allow users to log in to my website using their Google accounts. I am utilizing yarn along with the following relevant packages: [email protected], and passport-google-oauth20@^1.0.0. The issue I am facing seems to be related to the callback function defined in the GoogleStrategy not getting executed, leading to errors as the server tries to load a non-existent page.
When I start the server using nodemon and pass the Google client ID and secret as process variables which are then used by the GoogleStrategy (I have verified this through console logs), I navigate to the root page through the browser and click on the login anchor that directs me to /auth/google. At this point, the Google login screen appears with options to choose an account for login. After selecting my account, the server receives a GET request to
/auth/google/callback?code=4/(a long string of characters)auth/google except for the stylesheet.
Here is an example output of these requests:
GET /auth/google 302 1.893 ms - 0
GET /auth/google/callback?code=4/(long string of text) 500 178.246 ms - 3087
GET /auth/google/node_modules/jquery/dist/jquery.js 404 38.048 ms - 3087
GET /auth/google/node_modules/bootstrap/dist/css/bootstrap.css 404 65.666 ms - 3087
GET /auth/google/node_modules/angular-material/angular-material.css 404 89.565 ms - 3087
GET /auth/google/node_modules/angular/angular.js 404 115.541 ms - 3087
GET /auth/google/node_modules/angular-animate/angular-animate.js 404 141.761 ms - 3087
GET /auth/google/node_modules/angular-messages/angular-messages.js 404 161.489 ms - 3087
GET /auth/google/node_modules/angular-material/angular-material.js 404 23.809 ms - 3087
GET /auth/google/node_modules/angular-aria/angular-aria.js 404 43.268 ms - 3087
GET /auth/google/apps/angular_app.js 404 62.520 ms - 3087
GET /stylesheets/style.css 304 86.279 ms - -
At this stage, the page seems to only display elements from its main pug file and the CSS file; functionalities like ng-repeats or ng-includes do not work. The URL in the browser at this point is
http://(my domain)/auth/google/callback?code=4/(a long string of characters)The code snippet below shows the relevant portion in the express file for the root page:
var passport = require('passport');
var GoogleStrategy = require('passport-google-oauth20').Strategy;
console.log('google client id: ' + process.env.GOOGLE_CLIENT_ID);
console.log('google client secret: ' + process.env.GOOGLE_CLIENT_SECRET);
router.use(passport.initialize());
passport.use(new GoogleStrategy({
clientID: process.env.GOOGLE_CLIENT_ID,
clientSecret: process.env.GOOGLE_CLIENT_SECRET,
callbackURL: 'http://(my domain)/auth/google/callback'
},
function(accessToken, refreshToken, profile, done) {
console.log('start of callback');
return done(null, profile);
}));
app.use(passport.initialize());
router.get('/auth/google', passport.authenticate('google', {scope: ['profile']} ));
router.get('/auth/google/callback', passport.authenticate('google', {
failureRedirect: '/',
function(req, res, next) {
res.redirect('/');
}
}));
router.get('/logout', function(req, res) {
console.log('logged out');
req.logout();
res.redirect('/');
});
module.exports = router;
The line
console.log('start of callback');console.log('logged out'); executes when clicking the logout anchor followed by the redirect function.
Below are some resources I have consulted to troubleshoot why the strategy fails to run the anonymous callback function:
- Passport-Google-OAuth Callback Not working
- Custom Callback never called when Google Auth on passportjs
- Passport Callback isn't called Google API
- how to redirect to original page after successful authentication using passport-google-oauth
- Passport-Google-OAuth Callback Not working when used in Web Service
- Google-oauth2 passport not working
- Passport Authenticate doesn't redirect
- https://github.com/mstade/passport-google-oauth2