Google callback url giving back 400 when deployed in heroku

Question

I developed an app using MEAN framework and used passportjs's google strategy to authenticate. The local run runs fine, but when I deploy the same to heroku, since Heroku runs its app on a random port. I am not sure what google callback url I need to add in my google console's "Authorized redirect URIs".

passport.use(new GoogleStrategy({
    clientID: config.googleAuth.clientID,
    clientSecret: config.googleAuth.clientSecret,
    callbackURL: config.googleAuth.callbackURL
}, function (token, refreshToken, profile, done) {

    console.log(token, refreshToken, profile, done);
    var query = {
        'google.id' : profile.id
    };
    User.findOne(query, function (err, user) {
        if(user){
            console.log("User found in the database");
            done(null, user);
        }
        else{
            var newUser = new User;
            newUser.displayName = profile.displayName;
            newUser.image = profile.photos[0].value;
            newUser.google = {};
            newUser.google.id = profile.id;
            newUser.google.token = token;
            newUser.save();
            console.log("saved user to the database");
            done(null, newUser);
        }
    });
}));

The above shown code is my google strategy. I am using passport-google-oauth lib for authentication.

    module.exports = {
    development: {
        rootPath: rootPath,
        db: 'xxx',
        port: process.env.PORT || 3030,
        googleAuth: {
          clientID: 'xxx',
          clientSecret: 'xxx',
          callbackURL: 'http://localhost:3030/auth/google/callback'
        }
      },
      production: {
        rootPath: rootPath,
        db: 'xxx',
        port: process.env.PORT || 80,
        googleAuth: {
          clientID: 'xxx',
          clientSecret: 'xxxx',
          callbackURL: 'https://<myheroku-app>:<heroku-port-no>/auth/google/callback'
        }
      }
}

The above is the details of my google strategy. The localhost part works fine if I add http://localhost:3030/auth/google/callback to the Authorized redirect URI's. But when I try to do the same for the heroku app, I get a 400 server error with Error: redirect_uri_mismatch as the error.

How do I fix this thing? I am so close to deploying this app and stuck with just this thing. Let me know if you would need any more info.

Answer 1

You need to add heroku domain name and heroku callback url see working example below:

Answer 2

You could use relative paths at callbackURL (eg callbackURL: '/auth/google/callback') to make your code less depended on specific domains, and add an additional element on googleAuth, by putting a comma after callbackURL, as:

proxy: true

After this, you can use https on google's developers console for your callbacks.