I am using vue js and connecting to aws user pool via amplify, using
Auth.federatedSignIn();
After user login from aws amplify hosted ui successfully, they will be redirected back to my home page (App.vue below).
I try to get the authenticated user when the page create, but it is throwing "not authenticated".
I try to call the function again (or refresh the page), and the user is able to be retrieved.
I also try to use setTimeout to add a delay, but seem vue doesn't update the page, which i am not able to see my currentUser on the screen.
What will be the best practice to getting the authenticated user right after the callback?
App.vue
<template>
<div id="app">
<v-btn @click="getAgain()">Get again</v-btn> #just a button to call again, and it able to get the user
<h1 v-if="currentUser">user id : {{currentUser}}</h1>
</div>
</template>
<script>
import { Auth } from "aws-amplify";
export default {
name: 'app',
components: {
},
data() {
return {
currentUser: null
}
},
created() {
Auth.currentAuthenticatedUser()
.then(user => {
this.currentUser = user;
console.log(user);
})
.catch(e => {});
},
methods: {
getAgain() {
Auth.currentAuthenticatedUser()
.then(user => {
this.currentUser = user;
})
.catch(e => {});
}
}
}
</script>
You can listen to the sign in event and get retrieve the user once the event is triggered
Hub.listen('auth', ({ payload: { event, data } }) => {
if (event === 'signIn') {
Auth.currentAuthenticatedUser()
.then(user => {
this.currentUser = user;
console.log(user);
})
.catch(e => {console.log(e)});
}
});