Auth callback error

Question

My web pages https://localhost:3000/#/login and https://localhost:3000/#/new work, https://localhost:3000/#/new has a button to do a facebook login by passportjs. Here is the related code:

In auth.js:

module.exports = {
    'facebookAuth': {
        'clientID': '1416536398420xxx',
        'clientSecret': '...',
        'callbackURL': 'https://localhost:3000/#/auth/facebook/callback'
    }
}

In passport.js:

passport.use(new FacebookStrategy({
    clientID: configAuth.facebookAuth.clientID,
    clientSecret: configAuth.facebookAuth.clientSecret,
    callbackURL: configAuth.facebookAuth.callbackURL
},
    function (accessToken, refreshToken, profile, done) {
        process.nextTick(function () {
            User.findOne({ 'facebook.id': profile.id }, function (err, usr) {
                if (err) return done(err);
                if (user) return done(null, user);
                else {
                    var newUser = new User();
                    newUser.facebook.id = profile.id;
                    newUser.facebook.token = accessToken;
                    newUser.facebook.name = profile.name.givenName + ' ' + profile.name.familyName;
                    newUser.facebook.email = profile.emails[0].value;
                    newUser.save(function (err) {
                        if (err) throw err;
                        return done(null, newUser)
                    })
                }
            })
        })
    }
));

In index.js:

router.get('/auth/facebook', passport.authenticate('facebook', { scope: ['email'] }));

router.get('/auth/facebook/callback',
  passport.authenticate('facebook', { successRedirect: '/login',
                                      failureRedirect: '/login' }));

By clicking the facebook login button, it does redirect to facebook login page, after entering username and password, the address becomes https://localhost:3000/?code=AQCh9Q9KgZjL3TzTpyMW61gxcNZjN2vEgQAvr5r1k9-WxjwfmVzsPL9Txu-oTkP08MJXyvmJiGEt8zrgHGjLAbpg3SsvCGQEM1jdxwj4YUGL5dmUU3Xm7JZZfUOcCqaGuLSEFcfX-s62-X6uUuPS0D62wWzrAI-NK6gdvudl_JzWBK2O5ptdhGhN8PbbLytGpySEsIY8VVKaI55Tu6fjYA9v2R7Fp_7R2c4krdhA8Pp2A3Z9dQDpg42cZLzxuUtDVqxaPHFNZOufETiE23GxSCObjdq_oSmWkgAVOH1sa2EtPzjawohDZllNmNF-8iGLQQ0#/auth/facebook/callback

As a consequence, it hangs; the page is blank.

Does anyone know what's wrong with my routes?

Edit 1: I just added Valid OAuth redirect URIs, but the url address i get still finishes by #/auth/facebook/callbak.

What URL is in your "Valid OAuth redirect URIs" in the facebook oauth settings page? — Ken, Mar 27 '17 at 21:50
Wow, I really hope that's not your actual OAuth credentials... — Paul, Mar 27 '17 at 22:15
In your code sample, the ClientID and ClientSecret are supposed to be, you know, secret. You shouldn't post them on the internet. In the sample from your auth.js file — Paul, Mar 27 '17 at 22:16
@Paul ok, masked a little bit, i am just testing things, no worries... — SoftTimur, Mar 27 '17 at 22:18

gargsms · Answer 1 · 2017-04-05T16:07:56.267

2

It is just the way query params (search), and hash work.

Hash paramater is not passed to the server, it is useful for client side. And query takes precedence over hash.

You can try it yourself in your browser. Open any webpage (I am assuming localhost here), and force a query param, hash param in the URL using console

window.location.hash = 'someHash'

the URL will update to localhost/#someHash

Now do

window.location.search = 'someQueryParam=value'

Notice that the URL changes to localhost/?someQueryParam=value#someHash

The only way you can accomplish this is to use a router which works without the # symbol. Hash routers are client side only.

This has nothing to do with Facebook callback URL or passport.

I hope this helps.

edited Apr 05 '17 at 16:07

answered Apr 05 '17 at 16:02

gargsms

779
8
27

@SoftTimur Please accept the answer if it helped you. – gargsms Apr 06 '17 at 09:23
Thank you for your explanation. I agree that we need to let my angularjs app works without the `#` symbol. So it comes down to the same problem as [this google account](http://stackoverflow.com/questions/43060377/workaround-for-fragment-urls-not-allowed-with-google-redirect-uri), and I still have not got it work.... – SoftTimur Apr 10 '17 at 19:59

score 1 · Answer 2 · answered Mar 27 '17 at 22:32

Your router is looking for /auth/facebook/callback at the root of the URL path. I don't know why but facebook puts its code at the root of the URL.

Change your router as follows

   router.get(/auth\/facebook\/callback$/,
      passport.authenticate('facebook', { successRedirect: '/login',
                                  failureRedirect: '/login' }));

Auth callback error

2 Answers2