Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to use Feathers Client to Authenticate Facebook/Instagram credentials #204

Closed
mdhanda opened this Issue May 13, 2016 · 8 comments

Comments

Projects
None yet
4 participants
@mdhanda
Copy link

mdhanda commented May 13, 2016

How to use Client's API to authenticate Facebook/Instagram credentials?
I can successfully authenticate local credentials, but can't find any example using Feather's client to authenticate Facebook or any similar credentials.

I am using it in Angular2/webpack. Please guide. Thanks.

@daffl

This comment has been minimized.

Copy link
Member

daffl commented May 13, 2016

This is described in the client side authentication section in the OAuth 2 chapter:

Typically the only thing you need to do client-side is have a link or a redirect to your authentication provider's endpoint (ie. /auth/facebook).
The Feathers server will handle all the OAuth2 redirects, verification and will do a final redirect to the successRedirect endpoint, which by default is /auth/success. From there you would load your client side app and read the JWT token from the cookie and use it to authenticate. Using the Feathers client this all handled for you. It parses the JWT out of the cookie and places it in local storage. You simply need to call app.authenticate().

@mdhanda

This comment has been minimized.

Copy link
Author

mdhanda commented May 17, 2016

Take the case of Instagram,
It's a 3 step process as below:
Step One: Direct your user to our authorization URL [Success]
Step Two: Receive the redirect from Instagram [Success]
Step Three: Request the access_token [Not working]

As per network traffic, I have received the 'code' and 'state' successfully after valid credentials.
Now as per Instagram docs,

Now you need to exchange the code you have received in the previous step for an access token. In order to make this exchange, you simply have to POST this code, along with some app identification parameters, to our access_token endpoint. These are the required parameters:

client_id: your client id
client_secret: your client secret
grant_type: authorization_code is currently the only supported value
redirect_uri: the redirect_uri you used in the authorization request. Note: this has to be the same value as in the authorization request.
code: the exact code you received during the authorization step.

Feathers server is not completing this step 3 OR there is something that I am missing.

@marshallswain

This comment has been minimized.

Copy link
Member

marshallswain commented May 17, 2016

Since it's OAuth 2.0, it should be the same workflow as the GitHub login. Going through that example may help you: https://github.com/feathersjs/feathers-demos/blob/master/examples/authentication/oauth2/README.md

@daffl

This comment has been minimized.

Copy link
Member

daffl commented May 18, 2016

The description sounds like token based OAuth (see #169). From what I can see Instagram should also allow to perform OAuth2 authentication with redirects similar to Facebook, Google, GitHub etc.

@mdhanda

This comment has been minimized.

Copy link
Author

mdhanda commented May 20, 2016

It's interesting that same code is working on localhost and when put to cloud, it's behaviour is unexpected. Sometimes it comes as failed, sometimes successful. Here is the link to cloud:
http://instacards-cloudgroup.rhcloud.com/

Please only try with Instagram with below credentials:
Login: manuraj.dhanda
Pwd: insta1234

Thanks.

@ekryski ekryski added the Question label May 21, 2016

@ekryski

This comment has been minimized.

Copy link
Member

ekryski commented May 21, 2016

@mdhanda Without seeing some code it's really hard for us to tell what is going on. Can you put together a stripped down gist that reproduces the issue? If it's working locally and not in production then it's likely a config issue or your callback URLs are not configured properly for instagram.

@mdhanda

This comment has been minimized.

Copy link
Author

mdhanda commented May 23, 2016

@ekryski

This comment has been minimized.

Copy link
Member

ekryski commented May 23, 2016

@mdhanda I was able to generate a new app with both Facebook and Instagram and authenticate with both auth providers without issue using MongoDB. What does your User Model look like? You most likely need to set up your schema like so:

const userSchema = new Schema({
  facebookId: { type: String },
  facebook: { type: Schema.Types.Mixed },
  instagramId: { type: String },
  instagram: { type: Schema.Types.Mixed },
  createdAt: { type: Date, 'default': Date.now },
  updatedAt: { type: Date, 'default': Date.now }
});

You also need to make sure your JSON config has:

"auth": {
    "shouldSetupSuccessRoute": false,
    ....
}

and you need a route handler for your success page. My middleware.js file looks like this:

'use strict';

const handler = require('feathers-errors/handler');
const notFound = require('./not-found-handler');
const logger = require('./logger');
const path = require('path');

module.exports = function() {
  // Add your custom middleware here. Remember, that
  // just like Express the order matters, so error
  // handling middleware should go last.
  const app = this;

  app.get('/auth/success', function(req, res){
    res.sendFile(path.resolve(__dirname, '../..', 'public', 'success.html'));
  });

  app.use(notFound());
  app.use(logger(app));
  app.use(handler());
};

If you are still running into issues try following some tips in the debugging section of the docs.

@ekryski ekryski closed this May 23, 2016

@ekryski ekryski removed the Question label May 23, 2016

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.