title: Laravel 5.6 - How to authenticate API using sessions for same folder SPA?
body: <p>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 <code>POST/GET</code> 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 <strong>only</strong> 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.</p>
  
  <p>I've tried using <a href="https://stackoverflow.com/questions/53678019/laravel-5-6-passport-jwt-httponly-cookie-spa-authentication-for-self-consuming">Passport</a> before, and for over a month, I still can't get it to work as intended. I do not want to deal with 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 <code>index.blade.php</code> which includes the react <code>app.js</code></p>
  
  <p>Any idea how we can accomplish this?</p>
  
  <p><strong>UPDATE 1:</strong></p>
  
  <p>After implementing @ceejayoz's suggestion:</p>
  
  <blockquote>
    <p>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.</p>
  </blockquote>
  
  <p>I added to <code>$middlewareGroups.api</code> to match the <code>web</code> middleware in <code>app/Http/Kernel.php</code>:</p>
  
  <pre><code>'api' =&gt; [
      'throttle:60,1',
      'bindings',
      // Newly added middleware to match web middleware
      \App\Http\Middleware\EncryptCookies::class
      \Illuminate\Cookie\Middleware\AddQueuedCookiesToResponse::class,
      \Illuminate\Session\Middleware\StartSession::class,
      \Illuminate\View\Middleware\ShareErrorsFromSession::class,
      \App\Http\Middleware\VerifyCsrfToken::class,
      \Illuminate\Routing\Middleware\SubstituteBindings::class,
  ],
  </code></pre>
  
  <p>I realized there are two issues that occurred:</p>
  
  <ol>
  <li>In the sessions table, even if not logged in, when loading app home page (or any page), multiple sessions are inserted into the <code>sessions</code> table. Shouldn't a new <strong>single</strong> session be inserted into this table <strong>only</strong> after user login?</li>
  <li><p>After user log in, when refreshing the page manually in the browser and a call is made to a protected route, I get a <code>401 Unauthenticated</code> which points me to this method in <code>Illuminate/Auth/GuardHelpers.php</code>:</p>
  
  <pre><code>public function authenticate() {
      if (! is_null($user = $this-&gt;user())) {
          return $user;
      }
  
      throw new AuthenticationException; // throws this 401 exception on logged in page refresh when fetching data from private route
  }
  </code></pre></li>
  </ol>
  
  <p>Some additional notes:</p>
  
  <ul>
  <li>In <code>config/auth.php</code> I updated the <code>guards.api.driver</code> to <code>session</code> instead of <code>token</code>.</li>
  <li>In <code>routes/api.php</code> I have the protected routes wrapped in auth middleware like this: <code>Route::group(['middleware' =&gt; 'auth'], function() { PRIVATE ROUTES HERE }</code></li>
  <li>In <code>config/session.php</code> I have <code>'domain' =&gt; '.mydomain.com'</code></li>
  <li><p>I am sending back these headers with each axios api request like this:</p>
  
  <pre><code>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;
  </code></pre></li>
  </ul>
  
  <p>Any idea how we can fix these 2 issues?</p>