CODEWITHSUNDEEP
vue.jsvuexamazon-cognitoaws-amplify
Sunrise Joz
Sunrise Joz

Reputation: 372

How to persist cognito user session in Vue

Whilst learning Vue, I've gone in at the deep end and have gotten in to a little pickle...

I am trying to use AWS Cognito user pools to authenticate my app's sessions. So far I have managed to create a Userpool (in Cognito), create the custom login/out components within my Vue app and successfully login and out. The whole logging in process creates a few (about 10) key/value pairs in the browsers localStorage and this is where I'm struggling.

I need to getItem from localStorage and store it in Vuex so that when I do a refresh I am able to retrieve the token from state and setItem back to localStorage.

It all sounds terribly easy, though I'm currently finding myself learning Vue, Vuex and AWS services all at once which is adding a level of "blinkers" to my panic.

My current @click method goes like this...

signIn: function() {
    Auth.signIn(this.formResponses.username, this.formResponses.password)
        .then(user => {
            console.log(user);
            this.$store.state.signedIn = !!user;
            this.$store.state.user = user;
            this.signedIn = true;
            this.$store.state.token = user.signInUserSession.idToken.jwtToken;
            // this.currentUserInfo();
        })
        .catch(err => console.log(err));
},

Upvotes: 2

Views: 1892

Answers (1)

av0000
av0000

Reputation: 1967

I'd recommend checking out this walkthrough of how to add an auth workflow but the gist of it is that when a user tries to login you dispatch an action

async login(){
try{
await this.$store.dispatch('login', {formWithEmailAndPassword})
} catch(error){
console.log({error})
}

which calls "login" in your store that tries to use Amplify's Auth services (dont forget to import them with import {Auth} from 'aws-amplify):

export const actions = {
    async login({commit}, {email, password}){
    const user = await Auth.signIn(email, password)
    commit('set', user)
    return user
    }
...

which actually sets your user via "set":

export const mutations = {

    set(state,user){
    state.user = user
    }

...

Upvotes: 1

Related Questions