title: How do I fix the 401 Unauthorized error with Laravel Sanctum and React?
body: <p>I have the following set-up:</p>
  <ul>
  <li>Laravel running with Homestead</li>
  <li>Domain <code>laravel-api.test</code> pointing to my Homestead environment</li>
  <li>React (npx create-react-app) running locally with a custom HOST <code>app.laravel-api.test:3000</code></li>
  </ul>
  <hr />
  <p><strong>Laravel</strong></p>
  <p>In my routes <code>(routes/api.php)</code> I added two routes:</p>
  <pre><code>Route::post('login', [App\Http\Controllers\LoginController::class, 'login']);
  Route::middleware('auth:sanctum')-&gt;get('books', [App\Http\Controllers\BookController::class, 'list']);
  </code></pre>
  <p>In my <code>config/cors.php</code> I added:</p>
  <pre><code>'paths' =&gt; ['api/*', 'sanctum/csrf-cookie'],
  
  'allowed_methods' =&gt; ['*'],
  
  'allowed_origins' =&gt; ['*'],
  
  'allowed_origins_patterns' =&gt; [],
  
  'allowed_headers' =&gt; ['*'],
  
  'exposed_headers' =&gt; [],
  
  'max_age' =&gt; 0,
  
  'supports_credentials' =&gt; true,
  </code></pre>
  <p>In my <code>.env</code> I added the following:</p>
  <pre><code>SESSION_DOMAIN=.laravel-api.test
  SANCTUM_STATEFUL_DOMAINS=app.laravel-api.test:3000
  </code></pre>
  <hr />
  <p><strong>React</strong></p>
  <p>In React I made a function to easily send Axios requests:</p>
  <pre><code>import axios from &quot;axios&quot;;
  
  const apiClient = axios.create({
    baseURL: &quot;http://laravel-api.test&quot;,
    withCredentials: true,
  });
  
  export default apiClient;
  </code></pre>
  <p>Then I made a submit function for my login form:</p>
  <pre><code>const handleSubmit: FormEventHandler = (e) =&gt; {
      e.preventDefault();
  
      apiClient.get(&quot;sanctum/csrf-cookie&quot;).then((response) =&gt; {
        apiClient
          .post(&quot;api/login&quot;, {
            email: email,
            password: password,
          })
          .then((response) =&gt; {
            console.log(response);
          })
          .catch((error) =&gt; {
            console.error(error);
          });
      });
    };
  </code></pre>
  <ul>
  <li>Now my request for <code>sanctum/csrf-cookie</code> is going well and I'll receive Cookies.</li>
  <li>The request for <code>login</code> is also going great and it will return the User.</li>
  </ul>
  <hr />
  <p><strong>Problem</strong></p>
  <p>But the problem now is that I have made a button to request a list of books (<code>/api/books</code>). The Request is sending, but I get an <code>401 Unauthorized</code> error with a <code>{&quot;message&quot;:&quot;Unauthenticated.&quot;}</code> response.</p>
  <p>I have read a lot of forums, but I cannot find my situation and no answer. What can I try? How can i debug the sanctum and find out why I am not authenticated.</p>
  <p>Is it the cookie? Is it the hostname?</p>
  <pre><code>import React from &quot;react&quot;;
  import apiClient from &quot;../services/api&quot;;
  
  interface Book {
    id: string;
    title: string;
  }
  
  const Books = () =&gt; {
    const [books, setBooks] = React.useState&lt;Book[]&gt;([]);
    
    React.useEffect(() =&gt; {
      apiClient
        .get(&quot;/api/books&quot;)
        .then((response) =&gt; {
          setBooks(response.data);
        })
        .catch((error) =&gt; console.error(error));
    }, []);
  
    const bookList = books.map((book) =&gt; &lt;li key={book.id}&gt;{book.title}&lt;/li&gt;);
  
    return &lt;ul&gt;{bookList}&lt;/ul&gt;;
  };
  
  export default Books;
  </code></pre>