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.
<Auth0Provider
domain={Auth0.domain}
clientId={Auth0.client_id}
redirectUri={window.location.origin}
onRedirectCallback={onRedirectCallback}
// audience="https://test.aud.com"
useRefreshTokens = {true}
cacheLocation='localstorage'
>
<App/>
</Auth0Provider>
- 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: "https://test.aud.com"
}).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.