Store client secret, id and token in a react app

Question

I'm making a app with Laravel in the backend and create-react-app in the front end and I'm using Passport's Password grant type to secure the connection. But the problem is I don't know how to store the client secret, id and even the access token securely. Thanks.

Answer 1

It depends on the client you are using (axios, superagent, etc), but you will need to revise this section of the passport documentation: https://laravel.com/docs/master/passport#consuming-your-api-with-javascript

You will need to ensure you have the following middleware in place:

'web' => [
    // Other middleware...
    \Laravel\Passport\Http\Middleware\CreateFreshApiToken::class,
],

And that you javascript async client is set up to send the following on every request:

'X-CSRF-TOKEN', Laravel.csrfToken

I don't know if you actually want to be storing client secret, id and the access token on the frontend. You say you want to store it on the frontend securely, this is generally accepted as being impossible, unless I am misunderstanding the question

Answer 2

You can use these simple libraries to store user's id and access token in your react app:

1)senchalabs/connect

2)session-manager

3)session

4)session-storage

Answer 3

What about using Implicit Grant Tokens? They do not require storing client credentials.