Tuesday, April 19, 2016

How should I make sure the user accessing a backend rendered frontend route is authenticated?

By Hường Hana 9:00 PM , , , , Leave a Comment

I'm using Laravel and Angular to write a web app.

In the front end Laravel is used to create the basic template, but otherwise controlled by Angular. In the back end laravel is used to create a restful API.

I have a few routes like this:

Route::group(['domain' => 'domain.com'], function() {      Route::get('/', ['as' => 'home', function () {         return view('homepage');     }]);      Route::get('/login', ['as' => 'login', function () {         return view('login');     }]);      //users should be authenticated before accessing this page     Route::get('/dashboard', ['as' => 'dashboard', function () {         return view('dashboard');     }]);   });  Route::group(['domain' => 'api.domain.com', 'middleware' => ['oauth']], function() {     Route::post('/post/create', ['uses' => 'PostController@store']);     Route::get('/post/{id}', ['uses' => 'PostController@show']);       //other API endpoints      // ... });

I want to make sure my domain.com/dashboard URL is only accessed by authenticated users.

In my backend I have OAuth implemented for my API routes which makes sure the user accessing those routes are authentic. Laravel's Auth::once() is used by the OAuth library to make sure the user credentials are correct then generates an access_token. Since Auth::once() is a "stateless" function no session or cookies are utilized and I cannot use Auth::check() to make sure a user is authenticated before the dashboard page is rendered.

How should I go about checking to see if the user trying to access domain.com/dashboard is authenticated? Should I send the access_token in the header when I forward the user from /login to /dashboard? Or should I implement Laravel's a session/cookie based authentication?

EDIT: As per this: Adding http headers to window.location.href in Angular app I cannot forward the user to the dashboard page with an Authorization header.

In order to reuse my API for my mobile apps I STRONGLY prefer to use some sort of token based authentication.

4 Answers

Answers 1

Pierre was right in suggesting JWT for your token based auth.

When the user successfully logs in, before you finish the request, you can create a JWT and pass that back to the client. You can store it on the client (localStorage, sessionStorage) if you want. Then on subsequent requests, put the JWT inside of your Authorization header. You can then check for this header in your middleware and prevent access to your API routes if the token is valid. You can also use that token on the client and prevent Angular from switching routes if the token doesn't exists or isn't valid.

Now if you are trying to prevent the user from accessing the page entirely on initial load (Opens browser, goes straight to domain.com/dashboard), then I believe that is impossible since there is no way to get information about the client without first loading some code on the page.

Answers 2

I would advise to use JWT (JSON Web Tokens) to control for authentication.

I think there are several tutorials for their use with Lavarel and AngularJS. I'm more into Python and I use Flask, but the followings look interesting :

Answers 3

Not sure about Angular, as I have never used it, but have you tried targeting a controller with your dashboard route? For example

Route::get('/dashboard', [     'uses' => 'UserController@getDashboard',     'as' => 'dashboard',     'middleware' => 'auth' ]);

UserController.php (I'm assuming you have a blade called dashboard.blade.php)

<?php namespace App\Http\Controllers;  use Illuminate\Support\Facades\Auth; use Illuminate\Http\Request; use Illuminate\Support\Facades\Session; class UserController extends Controller {     public function getDashboard()     {         if(Auth::user()) {              return view('dashboard');         } else {              redirect()->back();         }     } }

Also, you could always group whichever routes you want to protect with this (taken from the Laravel 5.2 documentation):

Route::group(['middleware' => 'auth'], function () {     Route::get('/', function ()    {         // Uses Auth Middleware     });      Route::get('user/profile', function () {         // Uses Auth Middleware     }); });

EDIT: Regarding the session token, your login blade should have this in its code:

 <input type="hidden" name="_token" value="{{ Session::token() }}">

Answers 4

When the /dashboard HTML loads, does it already include data specific to the user's account?

I would suggest to load the /dashboard HTML separately from the user's data, and hide the dashboard items with ng-cloak while Angular loads the data to populate it.

  1. Redirect to /dashboard URL
  2. Load (static?) dashboard HTML / Angular app, hiding all parts with ng-cloak.
  3. Have Angular access the API using the access_token to load all dashboard data.
  4. Revealing the parts of the dashboard when the data from the API comes in, or showing an error message if the access_token wan't valid.

That way, your /dashboard HTML could actually be just a static HTML file and directly served by the web server and cached by any proxy on the way.

If that isn't an option, you could put your access_token into a cookie with Javascript that runs on the /login view, then redirect to /dashboard, then have your server-side /dashboard view read the cookie to check if the access_token is valid. But that sounds messy and mixes up things that should be separated.

If You Enjoyed This, Take 5 Seconds To Share It

0 comments:

Post a Comment