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?