We have sandboxed an initial auth flow for our Nuxt static site using the Nuxt Auth module (v5) with the PKCE implementation. Although we have an initial login working, some key questions remain on best practices for how to store the token. Auth0 currently returns us a token that is stored in memory only, and thus as expected it does not persist between browser tabs/refreshes.
I’ve searched extensively on Auth0’s website and see that the default behavior for an SPA is to store in memory only, but because we are a static site application this isn’t sufficient as the user loses access when they refresh or navigate browser tabs.
I know there are two additional options - localStorage and cookie - but Auth0 doesn’t seem to provide detailed information on getting these set up in a secure manner to prevent XSS/CSRF attacks and I want to make sure we aren’t putting our application at risk by implementing these methods.
My questions can best be summarized as follows:
- What token storage method is recommended for a Nuxt static web app which will be communicating to various backend services via GraphQL? Should we be storing it in localStorage, a cookie, or both?
- If we utilize these methods, what are the precautions we need to take to ensure the token is properly protected?
- Do we invalidate any of the benefits of a PKCE flow by needing to store the token client-side?
- Is there a way to work with the Auth0 JS SDK to do this for us out of the box (in combination with the Nuxt Auth module), or do we need to roll our own solution here?
Thank you for any insight that can be provided on these questions!