Secure access tokens stored in local storage using refresh tokens and getting access token only when required

Hi, We have used Auth0-React SDK to enable SSO in our application. Due to our project’s limitations, We cannot create a custom domain for the universal login page. Hence, We enabled the refresh token rotation and local storage to achieve a persistent login across browsers.

Our application has only one API and requires the access token only when users are updating their profiles. So, I have made for following changes in my code.

  • First, I reduced our secured API access token time to 5mins on the auth0 tenant.
  • Then, I commented the audience passed to Auth0Provider so that access tokens will be opaque and cannot be used to hit our API.
       // audience=""
        useRefreshTokens = {true}
  • In Profile.js, I call this method to get access tokens when users click on the submit button, the access token will be expired in 5mins.
async getTokenDetails() {
        const { isAuthenticated, user, getAccessTokenSilently } = this.props?.auth0;
        let token, loggedInUserId;
        if (isAuthenticated && user) {
            token = await getAccessTokenSilently({
                audience: ""
            }).catch((err) => console.log(err))
            loggedInUserId = user.sub;

        return { token, loggedInUserId };

It works as expected but I’m not sure whether it is the correct approach or not.

Am I doing anything wrong here? Is there any alternate way to secure it? Any feedback or help would be much appreciated.

Hi @mohamed.saseek,

We don’t typically do general security reviews here. I’m happy to help answer specific questions if you have them.

Also, I’m not sure I understand the purpose of commenting out the audience param. A user can manipulate anything that is sent to the client, and could easily make a request with the audience.

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.