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 