title: How do I manage an access token, when storing in local storage is not an option?
body: <p>I have a ReactJS app running in browser, which needs access to my backend laravel-passport API server. So, I am in control of all code on both client and server side, and can change it as I please.</p>
  
  <p>In my react app, the user logs in with their username and password, and if this is successful, the app recieves a <a href="https://laravel.com/docs/5.8/passport#personal-access-tokens" rel="nofollow noreferrer">personal access token</a> which grants access to the users data. If I store this token in local storage, the app can now access this users data by appending the token to outgoing requests.</p>
  
  <p>But I do not want to save the access token in local storage, since this is not secure. How do I do this?</p>
  
  <p>Here is what I have tried:</p>
  
  <p>In the <a href="https://laravel.com/docs/5.8/passport" rel="nofollow noreferrer">laravel passport documentation</a>, there is a guide on how to automatically store the access token in a <a href="https://laravel.com/docs/5.8/passport#consuming-your-api-with-javascript" rel="nofollow noreferrer">cookie</a>. I believe this requires the app to be on the same origin, but I cannot get this to work. When testing locally, I run the app on localhost:4000, but the API is run on my-app.localhost. Could this be a reason why laravel passport does not make a cookie with the token, although they technically both have origin localhost?</p>
  
  <p>OAuth has a page on where to <a href="https://auth0.com/docs/security/store-tokens" rel="nofollow noreferrer">store tokens</a>. I tried the three options for <a href="https://auth0.com/docs/security/store-tokens#if-a-backend-is-present" rel="nofollow noreferrer">"If backend is present"</a>, but they seem to focus on how the authorization flow rather than how to specifically store the token.</p>
  
  <p>Here's the relevant parts of my code (of course, feel free to ask for more if needed):</p>
  
  <p>From my react app:</p>
  
  <pre><code>const tokenData = await axios.post(this.props.backendUrl + '/api/loginToken', { email: 'myEmail', password: 'myPassword' })
      console.log('token data: ', tokenData)
      const personalAccessToken = tokenData.data.success.token;
      var config = {
        headers: {
          'Authorization': "Bearer " + personalAccessToken
      };
      const user = await axios.get(this.props.backendUrl + '/api/user', config);
  </code></pre>
  
  <p>From the controller class ApiController:</p>
  
  <pre><code>    public function loginToken()
      {
          if (Auth::attempt(['email' =&gt; request('email'), 'password' =&gt; request('password')])) {
              $user = Auth::user();
  
              $success['token'] = $user-&gt;createToken('MyApp')-&gt;accessToken;
              return response()-&gt;json(['success' =&gt; $success], 200);
          } else {
              return response()-&gt;json(['error' =&gt; 'Unauthorised'], 401);
          }
      }
  </code></pre>
  
  <p>and the loginToken function is called from the /api/loginToken route.</p>
  
  <p>Expected and actual results:</p>
  
  <p>Ideally, I would love to have the token saved in a cookie like in <a href="https://laravel.com/docs/5.8/passport#consuming-your-api-with-javascript" rel="nofollow noreferrer">the passport documentation</a>, so I don't even have to attach the token to outgoing requests from the react app, but I'm not sure that this is even possible. Perhaps with third party cookies?</p>
  
  <p>Else, I'd just like to find some way to store the token securely (for example in a cookie?), and then append it to outgoing calls from the react app.</p>