5

I am creating an app using Laravel and building a small internal API to connect to with an Angular frontend.

I have the auth working, but wanted to ensure that this is an acceptable way to log in a user, and to make sure everything is secure.

Sessions Controller:

public function index() {
    return Response::json(Auth::check());
}


public function create() {
    if (Auth::check()) {
        return Redirect::to('/admin');  
    }
    return Redirect::to('/');
}

public function login() {

    if (Auth::attempt(array('email' => Input::json('email'), 'password' => Input::json('password')))) {
        return Response::json(Auth::user());
        // return Redirect::to('/admin');
    } else {
        return Response::json(array('flash' => 'Invalid username or password'), 500);   
    }       
}

public function logout() {
    Auth::logout();
    return Response::json(array('flash' => 'Logged Out!'));
}

Laravel Route:

Route::get('auth/status', 'SessionsController@index');

Angular Factory:

app.factory('Auth', [ "$http", function($http){


var Auth = {};

Auth.getAuthStatus = function() {
    $http({
        method: "GET", 
        url: "/auth/status", 
        headers: {"Content-Type": "application/json"}
    }).success(function(data) {
        if(!data) {
        console.log('Unable to verify auth session');
        } else if (data) {
            console.log('successfully getting auth status');
            console.log(data);              

            // return $scope.categories;
            Auth.status = data;
            return Auth.status;
        }
    });

}

return Auth;

}

]);

I would then essentially wrap the whole app in something like an "appController" and declare the 'Auth' factory as a dependency. Then I can call Auth.getAuthStatus() and hide / show things based on the user state since this will essentially be SPA.

I realize I also need to hide the /auth/status URI from being viewed / hit by anyone, and was wondering how to do that as well. Kind of a general question but any insight would be greatly appreciated. Thanks.

1 Answer 1

9

Great question. I've answered this same question before so I will say the same thing.

Authentication is a bit different in SPAs because you separate your Laravel app and Angular almost completely. Laravel takes care of validation, logic, data, etc.

I highly suggest you read the article linked at the bottom.

You can use Laravel's route filters to protect your routes from unauthorized users. However, since your Laravel application has now become an endpoint only, the frontend framework will be doing the heavy lifting as far as authentication and authorization.

Once you have route filters set, that doesn't prevent authorized users from attempting to do actions that they are not authorized to do.

What I mean by the above is for example:

You have an API endpoint: /api/v1/users/159/edit

The endpoint is one of the RESTful 7, and can be used to edit a user. Any software engineer or developer knows that this is a RESTful endpoint, and if authorized by your application, could send a request with data to that endpoint.

You only want the user 159 to be able to do this action, or administrators.

A solution to this is roles/groups/permissions whatever you want to call them. Set the user's permissions for your application in your Angular application and perhaps store that data in the issued token.

Read this great article (in AngularJS) on how to authenticate/authorize properly using frontend JavaScript frameworks.

Article: https://medium.com/opinionated-angularjs/techniques-for-authentication-in-angularjs-applications-7bbf0346acec

Sign up to request clarification or add additional context in comments.

8 Comments

I have seen this article, just didn't quite realize on first glance how helpful and well written it is. Thanks a bunch Noah.
One more follow up question. I get how this is all working, but how can I persist the login state between browser tabs or new windows / later visits? Would I just check for laravel's cookie existence in the "Session" service. Its all starting to click... thanks again
I have the same problem. The Session service persist all the infos until you refresh the page. So i think a way to go is using the SessionStorage to store the users data. But then you need some secure way to verify that the local user data exist on the server side, something like a Token validation. ( excuse me for typo ).
Store the auth token in local storage.
@cpk cookies should be used as a fallback.
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.