Tuesday 23 May 2017

passport-facebook not working on test environment error: 'Sorry, something went wrong.'

We have setup facebook authentication on our MEAN stack application. We have successfully implemented this and tested it on the local development environment running at localhost:3000. Now we have set up a separate facebook app in the developer dashboard to test this on our uat.

Here is the fb strategy and env config file (this works as expected on localhost, however with our test server and domain we are experiencing the 'Sorry, something went wrong error.

Facebook strateg:

'use strict';

/**
 * Module dependencies.
 */
var passport = require('passport'),
    url = require('url'),
    FacebookStrategy = require('passport-facebook').Strategy,
    config = require('../config'),
    users = require('../../app/controllers/users');

module.exports = function() {
// Use facebook strategy
passport.use(
    new FacebookStrategy({
        clientID: config.facebook.clientID,
        clientSecret: config.facebook.clientSecret,
        callbackURL: config.facebook.callbackURL,
        passReqToCallback: true,
        enableProof: true,
        profileFields: ['displayName', 'id', 'emails', 'name', 'gender']
    },
    function(req, accessToken, refreshToken, profile, done) {
        // Set the provider data and include tokens
        let providerData = profile._json;
        providerData.accessToken = accessToken;
        providerData.refreshToken = refreshToken;

        let userRoles = ['user', req.query.state];

        // Create the user OAuth profile
        let providerUserProfile = {
            firstName: profile.displayName,
            lastName: profile.name.familyName,
            displayName: profile.displayName || `${profile.name.givenName} ${profile.name.familyName}`,
            email: profile.emails[0].value,
            profilePhoto: (profile.id) ? '//graph.facebook.com/' + profile.id + '/picture?type=large' : undefined,
            provider: 'facebook',
            providerIdentifierField: 'id',
            roles: userRoles,
            providerData: providerData,
            emailVerified: true
        };

        // Save the user OAuth profile
        users.saveOAuthUserProfile(req, providerUserProfile, done);
    }
));
};

Our environment config files are as follows:

Local dev env:

facebook: {
    clientID: process.env.FACEBOOK_ID  || 'DEVELOPMENT_APP_ID',
    clientSecret: process.env.FACEBOOK_SECRET || 'DEVELOPMENT_APP_SECRET',
    callbackURL: 'http://localhost:3000/auth/facebook/callback'
}

Test env:

facebook: {
            clientID: process.env.FACEBOOK_ID  || 'TEST_APP_ID',
            clientSecret: process.env.FACEBOOK_SECRET || 'TEST_APP_SECRET',
            callbackURL: 'http://testdomain.com/auth/facebook/callback'
        }

When we try to sign in via facebook the correct redirect callback url is hit and that is as follows:

https://www.facebook.com/dialog/oauth?response_type=code&redirect_uri=http%3A%2F%2Ftestdomain.com%2Fauth%2Ffacebook%2Fcallback&scope=email&state=tenant&client_id=CLIENT_ID

However the following error is shown in the browser and the authentication is unsuccessfully. Also all our facebook app configurations are correctly filled to our knowledge.

Facebook error once callback url is hit



via Sachin Karia

No comments:

Post a Comment