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

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