Auth callback error
My web pages are up https://localhost:3000/#/login
and https://localhost:3000/#/new
running, https://localhost:3000/#/new
has a button to login to facebook via 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 is redirected to the facebook login page, after entering the 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 freezes; the page is empty.
Does anyone know what is wrong with my routes?
Edit 1: I just added Valid OAuth redirect URIs
, but the url I still end with #/auth/facebook/callbak
.
source to share
This is how the query parameters (search) and hash work.
The hash paramater is not passed to the server, it is useful for the client side. And the request takes precedence over the hash.
You can try it yourself in your browser. Open any webpage (I'm assuming localhost here) and force add request parameter, hash parameter to url using console
window.location.hash = 'someHash'
The url will be updated to localhost/#someHash
Now let's do
window.location.search = 'someQueryParam=value'
Note that the url changes to localhost/?someQueryParam=value#someHash
The only way you can do this is by using a router that works without a symbol #
. Hash routers are client-side only.
It has nothing to do with Facebook return address or passport.
Hope this helps.
source to share
Your router looks /auth/facebook/callback
at the root of the path for a URL. I don't know why, but facebook puts its code in the root of the url.
Change your router as follows
router.get(/auth\/facebook\/callback$/,
passport.authenticate('facebook', { successRedirect: '/login',
failureRedirect: '/login' }));
source to share