Example using it with AngularJS client about loopback-component-passport HOT 19 CLOSED

I am new to Loopback (also just started using it) but I also looked at that same thing today. Had also some issues like you. Can tell you roughly what I did (not sure if that is 100% correct) but it kind of seems to work. So if you have already the normal login working that should do it:

• You can follow that guide here:
  http://docs.strongloop.com/display/LB/Third-party+login
• Create a route in Angular for the "successRedirect" and then set it.
• Create a controller for the route which takes the info from the cookies and uses it to log the user in. Something like this:

.controller('AuthCallbackCtrl', function($cookies, $location, LoopBackAuth) {
    LoopBackAuth.currentUserId = $cookies.userId;
    LoopBackAuth.accessTokenId = $cookies.access_token;
    LoopBackAuth.rememberMe = true;
    LoopBackAuth.save();

    // Whereever it should go afterwards
    $location.path('/');
})

• Create a "Facebook login"-button which simply redirects to that url: http://localhost:3000/auth/facebook

Make sure that your angular app has "angular-cookies" as dependency.

Like said above, I am also totally new so I can not promise you that is the perfect way. But because nobody else answered I guess it is better then nothing.

from loopback-component-passport.

@eugenehp Your issue is because you need to split on the ':' first, and then the '.'. This code is working for me:

var accessToken = $cookies.get('access_token');
var userId = $cookies.get('userId');
if (accessToken && userId) {
    accessToken = accessToken.split(':')[1].split('.')[0];
    userId = userId.split(':')[1].split('.')[0];
    LoopBackAuth.setUser(accessToken, userId);
    LoopBackAuth.rememberMe = true;
    LoopBackAuth.save();
}

from loopback-component-passport.

Ah sorry. And also look at this example for the models you have to set up:
https://github.com/strongloop/loopback-example-passport

from loopback-component-passport.

@janober thank you for your example! I definitely will try to use it.

But I also want to avoid the cookies, and I will try to implement something like reusing the accessToken created on normal login way. I will try to do it this week, and I let you know here.

from loopback-component-passport.

@douglascorrea did you managed to use accessToken instead of cookies?

from loopback-component-passport.

Hi @belibasakis not yet. I tried but I didn't had success yet...

from loopback-component-passport.

Have you guys tried https://github.com/strongloop/loopback-example-passport

@douglascorrea Is this good to close? Are you still running into issues?

from loopback-component-passport.

ok, we can close it

from loopback-component-passport.

@douglascorrea it still not working with the angular directly, so I think this should be re-opened.

from loopback-component-passport.

for example

var cookies = $cookies.getAll();
var currentUserId = cookies['userId'];
var accessTokenId = cookies['access_token'];

currentUserId = currentUserId.split('.')[0];
currentUserId = currentUserId.split(':')[1];

accessTokenId = accessTokenId.split('.')[0];
accessTokenId = accessTokenId.split(':')[1];

console.log('before',LoopBackAuth);
if( localStorage.getItem('$LoopBack$accessTokenId') == null ){
  LoopBackAuth.currentUserId = currentUserId;
  LoopBackAuth.accessTokenId = accessTokenId;
  LoopBackAuth.rememberMe = true;
  LoopBackAuth.save();
  console.log('after',LoopBackAuth);
}

there is an issue on how the passport module passes cookies to the response

from loopback-component-passport.

https://gist.github.com/eugenehp/e45537b73d58db33cd80

from loopback-component-passport.

+1

from loopback-component-passport.

+1

from loopback-component-passport.

+1

from loopback-component-passport.

Is there anyone still running into this issue?
Could you fork this sandbox and replace with the code that can reproduce this error?

It's a little hard to reproduce an angular related issue without the code. Thanks for understanding.

from loopback-component-passport.

+1
Also, the example doesn't actually implement an Angular client using lbservices and LoopBackAuth. Having that would help the community.

from loopback-component-passport.

@git2g Thank you, your suggestion looks good 👍

from loopback-component-passport.

@eugenehp Sorry I am not an expert in setting up angular app lol, could you fork https://github.com/strongloop/loopback-sandbox and replace it with the FULL app to reproduce the error? Really appreciate your contribution and time spent on it! Thanks!

from loopback-component-passport.

+1 for having a full example with loopback and passport auth.

Thanks for the great project!

from loopback-component-passport.