Auth0VueClient.isAuthenticated always returns false after page refresh, checkSession does not help

Help
,
1

Hi

I am working on a Vue 3.0 SPA in which some features are password protected with New Universal Login, and no Custom Domain. I’m testing it on localhost. It’s not yet deployed. If I refresh the browser, the UI shows me as not logged in. If I then click login, I don’t have to enter username and password again, it just logs in directly, as if I was already logged in after all. I’m using the isAuthenticated property of the Auth0VueClient to see if the user is logged in:

<script setup lang="ts">

  import { useAuth0 } from "@auth0/auth0-vue";
  const { isAuthenticated } = useAuth0();
  
</script>

<template>
    <div v-if="!isAuthenticated">
    	User not logged in...
    </div>
    <div v-else>
    	User logged in...
    </div>
</template>

I have looked at this thread and it recommends using checkSession(), which apparently is supposed to solve the problem. The checkSession() implemented in Auth0VueClient returns a Promise<void>. According to the thread linked to, I’m supposed to then check authResult in my callback, but if it returns a Promise<void> there can’t be any authResult parameter. So, I tried to simply call await checkSession() and recheck isAuthenticated after it’s done, but it’s still false.

Surely this problem is meant to be solvable with ‘@auth0/auth0-vue’, which all the quickstart examples for Vue are based on? So I checked this readme

Which lists three possible reasons. 1) does not apply. 2) might apply, I’m using Google Chrome. But what does it matter what browser I am using if the end user is using another one? Surely it’s not meant to only work for a limited set of browsers? 3) does not apply, however, the proposed solution does work, setting the following settings in createAuth0:

useRefreshTokens: true,
cacheLocation: 'localstorage',

It doesn’t work to only set useRefreshTokens, however, from what I gather Auth0 recommends against setting the second setting. So, what should I do?

1 Like
3

Hello @Balthazar! Welcome to the community.

Using silentAuth() with PKCE is what will securely solve your problem. Here is how you can Configure Silent Authentication. Auth0 highly discourages the use of refresh tokens for SPAs (Single Page Application). Read more about this in the documentation: Refresh Token Rotation.

I hope this helps!

Best,
Alex