auth0 / auth0-vue

Auth0 authentication SDK for Vue.js apps
Other
140 stars 27 forks source link

Post authenticate state not updating. #422

Open BigBallard opened 2 months ago

BigBallard commented 2 months ago

Checklist

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