SydJS/keystoneJS issues with social login using passport
I wanted to integrate the social login features in my site. So I though of learning SydJS for the same purpose. for that I installed and run the SydJS site on my local machine.
When I tried to signup to my local sydJS site It crashed. I had to work almost 2 days to make it work. and Herewith I am sharing the journy of my effort.
Here is the list of important files and folder.
/lib/auth
Here you can see modules for each passport strategy. IN each module relavant passport stratagies are being used and main a authentication handler function is being implemented. all this is done inside authenticateUser function.
/route/auth/service.js
This module called authenticateUser function from one of above service provider in lib as specified from the URL.
/route/auth/confirm.js
This module is invoked by one of the above service provider when there is new person just signed up.
/route/auth/confirm.js
I dont know.
template/mixin/auth
This is a collection of jade templates for the signup/signin Popup.
additionally You can notice this in the routes/index.js
// Authentication
app.all('/auth/confirm', routes.auth.confirm);
app.all('/auth/app', routes.auth.app);
app.all('/auth/:service', routes.auth.service);
The important node modules used for social login is passport and few of the passport extension from this list. the SydJS has chosen GitHub,facebook, and google.
To enable login via facebook. Login to developer.facebook.com and create an app id,app secrete and add it in your .env file as folllow.
FACEBOOK_CLIENT_ID=1789311074647370
FACEBOOK_CLIENT_SECRET=5d9adf4bbabb9cbb7281573c6981ada6
FACEBOOK_CALLBACK_URL=http://localhost:3003/auth/facebook?cb=true
FACEBOOK_API=2.4
Noticed ?cb=true at the end of the callback URL. It took me one full day to realise that. and it took me 4 hour to understand that I also need to set the API as 2.4 as above otherwise it was crashing, because there was no email from facebook callback.
The Errors which I have struggled are here
(1) Error: passport.initialize() middleware not in use
============================================================ [services.facebook] - Triggered authentication process... ------------------------------------------------------------ [services.facebook] - Authentication workflow detected, attempting to request access... ------------------------------------------------------------ GET /auth/facebook?target=/ 302 29.303 ms ============================================================ [services.facebook] - Triggered authentication process... ------------------------------------------------------------ [services.facebook] - Authentication workflow detected, attempting to request access... ------------------------------------------------------------ Error thrown for request: /auth/facebook?code=A.....M Error: passport.initialize() middleware not in use at /passport/lib/http/request.js:46:34) at Strategy.strategy.success (/passport/lib/middleware/authenticate.js:235:13) at verified (/passport-oauth2/lib/strategy.js:177:20) at Strategy._verify (/lib/facebook.js:31:3) at /passport-oauth2/lib/strategy.js:193:24 at /passport-facebook/lib/strategy.js:181:5 at passBackControl (/oauth/lib/oauth2.js:125:9) at process._tickCallback (internal/process/next_tick.js:98:9) GET /auth/facebook?code=...M 500 531.028 ms
As everyone suggested I resolved it by adding this in my routes/index.js
var passport = require('passport');
keystone.pre('routes', passport.initialize());
keystone.pre('routes', passport.session());
However after fixing problem number 2 even this is not required for sydJS.
(2) Failed to serialize user into session
Error: Failed to serialize user into session at pass (/passport/lib/authenticator.js:271:19) at Authenticator.serializeUser (/passport/lib/authenticator.js:289:5) at IncomingMessage.req.login.req.logIn (/passport/lib/http/request.js:50:29) at Strategy.strategy.success (/passport/lib/middleware/authenticate.js:235:13) at verified (/passport-facebook/node_modules/passport-oauth2/lib/strategy.js:174:20) at Strategy._verify (/lib/auth/facebook.js:31:3) at /passport-facebook/node_modules/passport-oauth2/lib/strategy.js:190:24 at /passport-facebook/lib/strategy.js:181:5 at passBackControl (/passport-oauth2/node_modules/oauth/lib/oauth2.js:125:9)
This is the major pain in @#% I tried many alternatives including what this guy said. but finally I just realised that the sydJS just wanted to make sure that you callback URL is cb in query param. So I just changed my callback URL in .env as follow.
FACEBOOK_CALLBACK_URL=http://localhost:3003/auth/facebook?cb=true
(3) Error retrieving Facebook account data - {}
[services.facebook] - Callback workflow detected, attempting to process data...
------------------------------------------------------------
[services.facebook] - Successfully retrieved Facebook account data, processing...
------------------------------------------------------------
[services.facebook] - Error retrieving Facebook account data - {}
GET /auth/facebook?cb=true&code=A.......8 302 2243.891 ms
The problem was that facebook callback was not providing email. the the fix is to choose facebook API version as 2.4 in .env file.
FACEBOOK_API=2.4
configuring for twitter
Create you twitter App at https://apps.twitter.com/app/new and fill up the application detail. enter your Application name and description as per your wish.
Then give your website URL and also give the callback URL http://yourdomain.com?cb=true. then check the developer agreement.
Configuring for Google.
create new google app as per this link https://developers.google.com/identity/sign-in/web/devconsole-project.
I got this error .
services.google] - Error retrieving Google account data - {"name":"GooglePlusAPIError","message":"Access Not Configured. Google+ API has not been used in project 1067579244238 before or it is disabled. Enable it by visiting https://console.developers.google.com/apis/api/plus/overview?project=1067579244238 then retry. If you enabled this API recently, wait a few minutes for the action to propagate to our systems and retry.","code":403}
GET /auth/google?cb=true&code=4/dvQo6-95y09SGnR6FscJ1Yma3SUsTg73d3teokWk_J4 302 459.444 ms
Some people says wait for 30 minutes before you check, but I followed these steps.
- Goto Google Developers Console on https://console.developers.google.com
- Choose your project from the list
- Select API's from the left nav
- Turn ON the API you are trying to access.
You may need to regenerate your access and refresh token for this to work.
