Cannot access authenticated user after login redirection

Help
,
1

Hi,

I am having some trouble with using the login authentication. I am able to redirect to the Auth0 login page and successfully login, but once I am redirected back to my website it seems to have not saved the login authentication/user info. When I call the getUser() function the user is undefined, and the isAuthenticated() function returns false.

I thought it may be an issue with third party cookies but after allowing them it is still an issue. I am unsure how to persist the user information from the Auth0 login page to my website page,

I am using the free trial of Auth0 for my project on the localhost that uses Vue.js and Vitepress (uses very similar config to Vuepress). This is what I have on my main page index.md:

<div>
<div v-if="user">
      <p align="center">
        Logged in as {{ user }}
      </p>
    </div>
    <div v-else>
      <p align="center">
        NOT LOGGED IN
      </p>
      <p align="center">
        <LoginButton :client="auth0client" @login-complete="getUser()" />
      </p>
      <p align="center">
        <LogoutButton :client="auth0client" />
      </p>
      <p align="center"> Authenticated: {{ authenticated }} </p>
      <p align="center"> auth0client: {{ auth0client }} </p>
    </div>
  </div>

<script>
import auth from "./.vitepress/auth";
import LoginButton from "./.vitepress/theme/components/LoginButton.vue";
import LogoutButton from "./.vitepress/theme/components/LogoutButton.vue";

export default {
  data() {
    return {
      auth0client : null,
      user : null,
      authenticated : null,
    }
  },
  async mounted(){
    this.auth0client = await auth.createClient();
    this.user = await this.auth0client.getUser();
    this.authenticated = await auth.isAuthenticated(this.auth0client);
  },
  methods : {
    async login () {
      await auth.loginWithRedirect(this.auth0client);
    },
    async getUser(){
      this.user = await this.auth0client.getUser();
      console.log(this.user);
    }
  }
}
</script>

And this is my login button:

<template>
    <div>
      <button class="login-button" @click="login()">Sign In</button>      
    </div>
  </template>
  
  <script>
  import auth from "../../auth";

  export default {
    props : ['client'],


  methods: {
    async login() {
      await auth.loginWithRedirect(this.client);
      this.$emit('login-complete');
    }, ...

Any ideas on how to get this to work would be very appreciated! FYI it’s my first time using Auth0 so I am not the most experienced with it :slight_smile: