Post authenticate state not updating.

[BigBallard]

Checklist

• The issue can be reproduced in the auth0-vue sample app (or N/A).
• I have looked into the Readme, Examples, and FAQ and have not found a suitable solution or answer.
• I have looked into the API documentation and have not found a suitable solution or answer.
• I have searched the issues and have not found a suitable solution or answer.
• I have searched the Auth0 Community forums and have not found a suitable solution or answer.
• I agree to the terms within the Auth0 Code of Conduct.

Description

State of the Auth0Client does not seem to be updating. I have conditional rendering based on isLoading and isAuthenticated. isLoading in particular doesn't seem to become true and I am unsure why. Also user is not loaded. I CANNOT reproduce this behavior in the examples.

Client Options

{
    domain: <MY_DOMAIN>,
    clientId: <MY_CLIENT_ID>,
    authorizationParams: {
        redirect_uri: window.location.origin
    },
    useRefreshTokens: true,
    cacheLocation: 'localstorage',
}

Router

const routes = [
    {path:'/', component: DashboardView}
]

for(const route of routes) {
    route.beforeEnter = createAuthGuard(App)
}

App template

<template>
  <RootContainer>
    <NavBar>
    </NavBar>
    <router-view v-if="isAuthenticated"/>
  </RootContainer>
</template>

Navbar

<script setup lang="ts">
import {ref} from "vue";
import {useAuth0} from '@auth0/auth0-vue'

const auth0 = useAuth0()

const navItems = ref([
  {
    label: 'Dashboard',
    icon: 'pi pi-briefcase',
  }
])

</script>

<template>
  <div v-if="!auth0.isLoading" id="nav-bar" class="flex flex-column justify-items-start">
    <Panel id='nav-bar__user' v-if="auth0.isAuthenticated" >
      <template #header>
        <div class="flex">
          <Avatar :label="auth0.user.value?.name?.at(0)" size="large"/>
        </div>
      </template>
    </Panel>
    <div style="height: 10px"/>
    <PanelMenu :model="navItems"/>
  </div>
</template>

<style scoped>
#nav-bar {
  padding: 10px;
  width: 200px;
}
</style>

Reproduction

1. Create a base application with router and guard
2. Place a div with content and unsure it has v-if="!auth0.isLoading" in the tag.
3. Configure with required values
4. Run
5. Should see that what was underneath the conditional render did not render

Additional context

No response

auth0-vue version

2.3.3

Vue version

3.5.3

Which browsers have you tested in?

Chrome, Edge

[axynos]

@BigBallard Did you end up finding a workaround for this? Experiencing the same issue right now.

[BigBallard]

I did not unfortunately, I ended up manually doing everything which wasn't too difficult once you get things configured. I also ended just not using auth0. It's not very friendly for solutions where you want have your own login screen and send the credentials yourself.