Unable to login with Google OAuth when deployed to Heroku

Solved it, here's what worked for me:

Please check that your user/password for the Mongodb Atlas prod database correctly match the MONGO_URI variable that you set in Heroku, that was causing this issue for me. I think it's easy to make a typo here since you cannot see the password for the database user after you create it. Also note that the user should not be "read-only", and that this is not the same user/password combination that you use to log in to Mongodb Atlas.

I found that the reason why the authentication callback was failing with a timeout error was that the Google Strategy's callback defined in the file passport.js never called the method done(). This, in turn, happened because the query to find a user in the MongoDB never completed because Mongoose couldn't connect to the mlab.com database. I tried creating a new user for the prod database in mlab and updating that in the Heroku environment variables and it worked!

Try adding full url of server as callback url, check the documentation http://www.passportjs.org/docs/google/ , so your callback

URL will be https://mysterious-thicket-20426.herokuapp.com/auth/google/callback

Had the exact same problem as you with the same setup and everything.

I checked everything and noticed the my cluster on MongoDB had no activity and was paused. The cluster pauses when there are no connection made to it after a while.This meant the backend wasn't able to properly to the database, hence the timeout to /auth/google/callback.

Here's what happened:

After you've go through the OAuth credential on /auth/google page, google redirects you back to /auth/google/callback.

The route handler for /auth/google/callback endpoint picks up the request and uses the passport.authenticate('google') middleware (to verify the authentication)

Your passport.authenticate('google') middleware uses the Google Strategy and its configurations you've set up inside passport.js

Going back on the no connections made to your database issue, this means there will be an authentication problem within the Google Strategy. Specifically, in its callback function:

async (accessToken, refreshToken, profile, done) => {  const existingUser = await User.findOne({ googleId: profile.id });  if (existingUser) {    return done(null, existingUser);  }  const user = await User({ googleID: profile.id }).save()  done(null, user);}

Express app wasn't able to make a connection to the MongoDB earlier, and now it attempts to execute a promise: await User.findOne({ googleId: profile.id }) with no error handling.This means there should an unhandled promise rejection error appearing in your console and your app crashing down.

Like @Agasthian Rathinavel mentioned, do double check on your MongoDB credentials and the environmental variables so you're certain the backend is able to connect to the database.