Integrating Laravel, Facebook and Angular with token-based-authentication

Question

My use case:

User is already logged in automatically server side using Facebook with laravel and Socialite.

I check if the user exists in the db and if not create it and log them into laravel.

Then I need to start an Angular app and make sure they are logged in with Laravel / Facebook.

After reading this article, it looks like this token based approach is what I should take.

In the tutorial you serve a login form with Angular, and then pass the email and password to an authenticate controller (Laravel), which returns a token (create by JWT-Auth).

Once the token is in Angular all is well, my problem is that I want to get the token directly into Angular without a login form since the user is already logged in as mention above.

I'm wondering if I could just output the token in markup somewhere and then pick it up from Angular or would that somehow be a security risk? I guess people will only be able to view source and see their own token?

If this is the wrong way to do this, then how should I do it? Do I need to authenticate with Facebook with Javascript, and then create a new laravel user with ajax?

Thanks so much!

@iKode.i am facing socialite problem.if you know can you check this question http://stackoverflow.com/questions/31934494/how-to-login-using-github-facebook-gmail-and-twitter-in-laravel-5-1 — scott, Sep 02 '15 at 03:58

cienki · Accepted Answer · 2015-09-01T01:25:23.160

One approach you could take is to add something to your .config block that checks for the presence of a JWT in local storage and if there isn't one there, makes a request to the API to see if the user is logged in on the Laravel side. If the user is logged in, a JWT is returned which can be picked up and saved in local storage. Since the .config block is run when the Angular app loads, this will only happen once, which is probably what you're looking for.

Here's what that might look like. First the Laravel side:

// AuthenticateController.php

...
// Simulates a user being logged in on the Laravel side through something
// other than credentials sent from the front-end. Obviously you would use
// Socialite

public function authenticate()
{
    $user = User::find(1);
    $token = JWTAuth::fromUser(1);
    return response()->json(compact('token'));
}
...

Then the Angular:

// app.js

...
.run(function($rootScope, $state, $auth) {
    if(!$auth.isAuthenticated()) {

        // No credentials provided because the user is already logged in on the server
        $auth.login().then(function() {
            $state.go('users');
        }
    }

    $rootScope.$on('$stateChangeStart', function(event, toState) {
...

This would just run when the Angular app loads, which will be after your user has logged in with Socialite. It's essentially just checking whether there is a user logged in on the back end and if so, the token is retrieved. It's a bit hacky and the interface isn't obvious, so it might not be the best solution.

You would need to arrange your authenticate controller on the Laravel side such that it returns the token if the user has logged in via socialite or require credentials if he/she hasn't (which is the traditional login).

You could also look at this approach to see if it works for you: https://github.com/barooney/jot-bot/tree/socialite

Let me know if that works out!

sweet, thanks a lot for your advice, I'll look into these options and let you know what works! — Positonic, Aug 31 '15 at 16:07
I don't see how I can call $auth.getToken() from the config. I can't seem to load the service into the config, which seems to be a reality of Angular, from what I have found... I only have access to authProvider in the config... or do you mean to access it directly, like so - localStorage.getItem('satellizer_token') ? — Positonic, Aug 31 '15 at 18:42
My bad, that's true of `config`. What about in the `.run` block, but outside of `$stateChangeStart`? — cienki, Aug 31 '15 at 18:59
sorry don't know what you mean by outside of $stateChangeStart? Tried this code and debugger1 is hit first, then debugger1, perhaps you mean something else though... .run(['$rootScope', function($rootScope) { $rootScope.$on('$stateChangeStart', function (event, next) { debugger2 }); debugger1....... not sure what $stateChangeStart is, what outside it means and why it's important... — Positonic, Aug 31 '15 at 19:24
No worries! I'll put a demo together in a bit, hang tight :) — cienki, Aug 31 '15 at 19:52
@cienki.i am facing socialite problem.if you know can you check this question http://stackoverflow.com/questions/31934494/how-to-login-using-github-facebook-gmail-and-twitter-in-laravel-5-1 — scott, Sep 02 '15 at 03:59

Integrating Laravel, Facebook and Angular with token-based-authentication

1 Answers1