Cognito User Pool, Vue 3 et amplify

index.js

import { createStore } from 'vuex';
import authentication from './modules/authentication';

const debug = process.env.NODE_ENV !== 'production';

const store = createStore({
  modules: {
    authentication,
  },
  strict: debug,
});

export default store;

authentication.js

const { Auth } = require('aws-amplify');
const router = require('../../router').default;

Auth.configure({
  region: process.env.VUE_APP_COGNITO_REGION,
  userPoolId: process.env.VUE_APP_COGNITO_USER_POOL,
  userPoolWebClientId: process.env.VUE_APP_COGNITO_CLIENT_ID,
  oauth: {
    domain: process.env.VUE_APP_COGNITO_DOMAIN,
    scope: process.env.VUE_APP_COGNITO_SCOPE ? process.env.VUE_APP_COGNITO_SCOPE.split(',') : [],
    redirectSignIn: process.env.VUE_APP_COGNITO_REDIRECT_SIGN_IN,
    redirectSignOut: process.env.VUE_APP_COGNITO_REDIRECT_SIGN_OUT,
    responseType: 'code',
  },
});

const state = {
  profile: null,
  tokens: null,
  isAuthenticated: false,

  info: null,
};

const getters = {
  isAuthenticated: (state) => {
    return state.isAuthenticated;
  },

  getUserInfo: (state) => {
    return state.profile;
  },

  idToken: (state) => {
    console.log(state.tokens);
    return state.tokens?.idToken;
  },

  status: (state) => {
    return state.info;
  },
};

const actions = {
  async autoSignIn({ commit }) {
    let response = await Auth.currentSession();
    console.debug('autoSignIn', response);
    commit('SIGN_IN', response);
    return response;
  },

  async signIn({ commit }, creds) {
    try {
      let response = await Auth.signIn(creds.email, creds.password);

      console.debug('signIn', response);

      commit('SIGN_IN', response);
      return response;
    } catch (e) {
      if (e.code === 'UserNotConfirmedException') {
        router.push('/verify-account');
        return;
      }
      throw e;
    }
  },

  async signOut({ commit }, global = false) {
    await Auth.signOut({ global: global });
    commit('SIGN_OUT');

    router.push('/signin');
  },

  async loadCurrentUser({ commit }) {
    let response = await Auth.currentAuthenticatedUser().catch((e) => {
      console.debug('Unable to load the current user, ', e);
    });

    console.debug('Current user info', await Auth.currentUserInfo());

    if (response) {
      commit('CURRENT_USER', { attributes: response.attributes, username: response.username });
    }
    return response;
  },

  async signUp({ commit }, creds) {
    let response = await Auth.signUp({
      username: creds.email,
      password: creds.password,
      attributes: {
        email: creds.email,
        name: creds.name,
      },
    }).catch((e) => {
      throw e;
    });

    commit('SIGN_UP', response.username);
    return response;
  },

  async verifyAccount({ commit }, creds) {
    try {
      let response = await Auth.confirmSignUp(creds.email, creds.code);
      commit('ACCOUNT_VERIFIED', response.username);
      router.push('/signin');
    } catch (e) {
      if (e.code === 'CodeMismatchException' || e.code === 'ExpiredCodeException') {
        router.push('/resend-code');
        return;
      }

      if (e.code === 'NotAuthorizedException') {
        router.push('/signin');
        return;
      }

      throw e;
    }
  },

  async resendCode({ commit }, creds) {
    let response = await Auth.resendSignUp(creds.email).catch((e) => {
      throw e;
    });

    commit('CODE_RESENT', response.username);
    return response;
  },

  async signInWithFacebook({ commit }) {
    let response = await Auth.federatedSignIn({ provider: 'Facebook' });

    commit('SIGN_IN', 'FB');
    return response;
  },

  async changePassword({ commit }, creds) {
    const user = await Auth.currentAuthenticatedUser();
    const response = await Auth.changePassword(user, creds.currentPassword, creds.newPassword);

    commit('CURRENT_USER', user);
    return response;
  },

  async lostPassword({ commit }, username) {
    const info = await Auth.forgotPassword(username);
    commit('STATUS', info);
  },

  async recoverPassword({ commit }, creds) {
    const info = await Auth.forgotPasswordSubmit(creds.email, creds.code, creds.password);

    commit('STATUS', info);
    return info;
  },
};

const mutations = {
  SIGN_IN(state, response) {
    state.username = response.username;
    state.tokens = {
      idToken: response.signInUserSession
        ? response.signInUserSession.idToken.jwtToken
        : response.idToken.jwtToken,
    };
    state.isAuthenticated = true;
  },

  SIGN_OUT(state) {
    state.profile = null;
    state.tokens = {};
    state.isAuthenticated = false;
  },

  CURRENT_USER(state, user) {
    state.profile = { username: user.username, ...user.attributes };
  },

  SIGN_UP(state, username) {
    state.username = username;
  },

  ACCOUNT_VERIFIED(state, username) {
    state.username = username;
  },

  CODE_RESENT(state, username) {
    state.username = username;
  },

  STATUS(state, info) {
    state.info = info;
  },
};

export default {
  namespaced: true,
  state,
  getters,
  actions,
  mutations,
};

App.vue

<template>
  <div>
    <div class="w-50 mb-5">
      <webuxlab-change-password :changePassword="changePasswordFn" />
    </div>

    <div class="w-50 mb-5">
      <webuxlab-recover-password :recoverPassword="recoverPasswordFn" />
    </div>

    <div class="w-50 mb-5">
      <webuxlab-lost-password :lostPassword="lostPasswordFn" />
    </div>

    <div class="w-50 mb-5">
      <webuxlab-sign-in :signIn="signInFn" />
    </div>

    <div class="w-50 mb-5">
      <webuxlab-sign-up :signUp="signUpFn" />
    </div>

    <div class="w-50 mb-5">
      <webuxlab-resend-code :resendCode="resendCodeFn" />
    </div>

    <div class="w-50 mb-5">
      <webuxlab-verify-account :verifyAccount="verifyAccountFn" />
    </div>

    <div class="whoami mb-5 mt-5">
      <h5>User Info</h5>
      <pre>{{ getUserInfo }}</pre>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex';

export default {
  name: 'App',

  computed: {
    ...mapGetters('authentication', ['getUserInfo']),
  },

  async mounted() {
    await this.autoSignIn();
    await this.loadCurrentUser();
  },

  methods: {
    ...mapActions('authentication', [
      'signIn',
      'signUp',
      'verifyAccount',
      'resendCode',
      'loadCurrentUser',
      'changePassword',
      'lostPassword',
      'recoverPassword',
      'autoSignIn',
    ]),

    async recoverPasswordFn(ev) {
      await this.recoverPassword(ev);
    },

    async lostPasswordFn(ev) {
      await this.lostPassword(ev.email);
    },

    async signInFn(ev) {
      await this.signIn(ev);
      await this.loadCurrentUser();
    },

    async signUpFn(ev) {
      await this.signUp(ev);
    },

    async verifyAccountFn(ev) {
      await this.verifyAccount(ev);
    },

    async resendCodeFn(ev) {
      await this.resendCode(ev);
    },

    async changePasswordFn(ev) {
      await this.changePassword(ev);
    },
  },
};
</script>