Which is the best way to store the auth0 token for a web app

JWT.io
,
1

Which is the best way to store the auth0 token?
Is that localstorage?
In auth0 js docs, all over it is mentioned to store the tokens in localstorage.

2

It depends on the web app. for regular web applications the best place to store the token is in the server side session. For client side applications the best place to store tokens is in memory. This however comes with challenges in itself, but it is considered the best place. In other words the more transient the storage facility the better. Our auth0 quickstarts all user localstorage. We like to use localstorage in our quick starts so our applications can survive a page refresh, mitigate against CSRF, but they can be vulnerable to XSS if you don’t take care in your implementation of your application.

3

Is there any example for storing the id_token in the memory, @sgmeyer? Would it be better if we have quickstarts with the best practice?

I have this problem when working with Apollo Client. Since there is no other way to store the token, I had to store it in localStorage which is considered not safe.

const httpLink = new HttpLink({ uri: 'http://localhost:4000/' })
const authLink = setContext((_, { headers }) => {
// get the authentication token from local storage if it exists
const token = localStorage.getItem('id_token');
  // return the headers to the context so httpLink can read them
  return {
    headers: {
      ...headers,
      Authorization: token ? `Bearer ${token}` : ``
    }
  };
});

const client = new ApolloClient({
  link: ApolloLink.from([authLink, httpLink]),
  cache: new InMemoryCache()
});

const auth = new Auth(result => console.log('auth result', result), client);

Here is the code in routes.js of my React SPA.

2 Likes
4

Did you find any solution? I am facing almost the same problem.

1 Like
5

Hi @nghitrum and @KevinKons,

An updated VueJS quickstart has been released which demonstrates storing tokens in memory, if you’d like to use that as a reference. In principal, once the tokens have been received from the authz server, they are assigned to a class-level property, from which they can be retrieved by other objects in the application through a method. An instance of the class itself is exported from the module, so it is kept alive for the duration of the running of the application.

For reference, have a look at the VueJS Quickstart docs. Also see the code where the tokens are saved within the Vue sample.

Hope that helps!

6

Hi @steve.hobbs, thanks for answering.

With this you mean that the token can survive to a page refresh?

7

Hey @KevinKons,

With this you mean that the token can survive to a page refresh?

Unfortunately not. Once the page is refreshed then the application is restarted, so the memory is lost. The way this is dealt with in the Vue sample is to use checkSession to revive the login session in the background when the application starts.

To refer you to some code from the Vue quickstart, a method called renewTokens is defined, which calls checkSession on the WebAuth object. renewTokens is called from the App component.

As the App component is the over-arching component that wraps all the other components and is created when the page is loaded, it effectively means that renewTokens is called when the application is started and thus renews the user’s login session on startup.

Please see this reference for further reading, including our notes on renewing tokens in Safari.

Hope that helps!