1 year ago

Laravel 5.6 - How to authenticate API using sessions for same folder SPA?

Posted 1 year ago by Wonka

I have a React SPA in the same Laravel project. The login/signup/logout and all other js views are in the js folder and use axios api calls for all POST/GET requests. I want to use the default Laravel session based web authentication for the embedded SPA, since it's in the same project folder and it will be the only javascript client accessing it. This api does not need to be open to the public, just for this react app, and it's an SPA for the speed and good user experience instead of full page reloads.

I do not want to deal with Passport tokens, access tokens, refresh tokens, revoking tokens, CSRF, etc. Just the out of the box simple Laravel session based auth that works so easily on web, but want it to work on my react app. The only blade file is the index.blade.php which includes the react app.js

Someone on Stack Overflow guided me to:

You have to add the various Session/Cookie middlewares in app/Http/Kernel.php (stuff like \Illuminate\Session\Middleware\StartSession::class) to the API routes.

Based on that suggestion, I added to $middlewareGroups.api to match the web middleware in app/Http/Kernel.php:

'api' => [
    // Newly added middleware to match web middleware

I realized there are two issues that occurred:

  1. In the sessions table, even if not logged in, when loading app home page (or any page), multiple sessions are inserted into the sessions table. Shouldn't a new single session be inserted into this table only after user login?

  2. After user log in, when refreshing the page manually in the browser and a call is made to a protected route, I get a 401 Unauthenticated which points me to this method in Illuminate/Auth/GuardHelpers.php:

     public function authenticate() {
         if (! is_null($user = $this->user())) {
             return $user;
         throw new AuthenticationException; // throws this 401 exception on logged in page refresh when fetching data from private route

Some additional notes:

  • In config/auth.php I updated the guards.api.driver to session instead of token.

  • In routes/api.php I have the protected routes wrapped in auth middleware like this: Route::group(['middleware' => 'auth'], function() { PRIVATE ROUTES HERE }

  • In config/session.php I have 'domain' => '.mydomain.com'

  • I am sending back these headers with each axios api request like this:

      window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
      let token = document.head.querySelector('meta[name="csrf-token"]');
      window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;

Any idea how we can fix these 2 issues?

Please sign in or create an account to participate in this conversation.