A few months ago I started using auth0, following the tutorials I had it up and running in no time. But as my site is maturing I’m starting to need more advanced features. As such, I’m now struggling to have the user remain signed-in when offline.
When offline and doing a page refresh (F5), the Vue application restarts and goes through initialization again hitting:
// Import the Auth0 configuration
import { domain, clientId } from "../auth_config.json";
// Import the plugin here
import { Auth0Plugin } from "./auth";
// Install the authentication plugin here
Vue.use(Auth0Plugin, {
domain,
clientId,
onRedirectCallback: appState => {
router.push(
appState && appState.targetUrl
? appState.targetUrl
: window.location.pathname
);
}
});
Which triggers the created() lifecylce method in index.js, doing:
this.auth0Client = await createAuth0Client({
domain: options.domain,
client_id: options.clientId,
audience: options.audience,
redirect_uri: redirectUri,
useRefreshTokens: true // on auth0: set "Refresh Token Behavior" to Rotating
});
This causes the whole auth0-thing to reset and loose authentication. As you can see I’ve already changed from static to rotating tokens, as I read and think to understand that is required for offline use. When going through the forums and documentation, I get the impression that the problem is that the token is lost on the refresh (stored in mem?), perhaps, I need to call getTokenSilently somewhere somehow??
My setup is the same as the ‘vanilla’ index.js provided in the Vue tutorial: Auth0 Vue SDK Quickstarts: Login
I ‘simply’ (?) need it to continue working offline for users that were already logged-in before going offline. Any help for this novice?
UPDATE 1: After reading Auth0 Single Page App SDK, I’ve added the cacheLocation: ‘localstorage’ setting to createAuth0Client(). This seemed to fix the problem, it also notes that the getTokenSilently is done by createAuth0Client() in the background, so that makes sense…
At this point I’m very confused about whether or not I’m now more vulnerable to XSS-attacks and/or that is (partly?) mitigated by the rotating tokens. Looking in the localStorage, I can clearly see the token, thus if any malicious code would find its way into a page of my site, it would be able to get the token? Is this bad / how bad, and is are there any alternatives that still provide this required offline authentication?
UPDATE 2: To not pollute the forum with complex composite questions, and to expedite my follow-up question, I’ll give an answer to the main question here, and will move the follow-up question about rotating tokens + local storage + offline to its own forum topic:
ANSWER:
Add the cacheLocation: ‘localstorage’ setting to createAuth0Client(), like so:
this.auth0Client = await createAuth0Client({
domain: options.domain,
client_id: options.clientId,
audience: options.audience,
redirect_uri: redirectUri,
cacheLocation: 'localstorage'
});