Vuex

This workshop will not teach you how Vue.js works in detail. If you’ve got experience with React + Redux, or any other frontend framework with a state management pattern, you will find this very similar.

Vuex

Vuex is a state management pattern + library for Vue.js. We need to know some of it because we’ll use a great Vuex module which let’s us authenticate with MIC very easily.

Vuex Cognito Module

The MIC API relies on AWS Cognito for user management. We’ve already touched upon Cognito, and actually used it, but so far we’ve been doing things quite manually. What we’ll be using going forward is a pre-made Vuex module which handles all the hassle with login/logout and keeping track of the current user session.

We’ll be using the Vuex Cognito Module. This module will attach to our Vuex central state as a separate module, exposing methods such as signInUser, signOut and fetchSession. This makes it easy for us to login/logout and revive a user session.

All we need to do is to provide it the correct configurations to know which Cognito instance to use. Luckily, this is already to for you in this workshop.

If you open .env you’ll see this:

VUE_APP_USER_POOL_ID=eu-west-1_jKaY6EGjT
VUE_APP_IDENTITY_POOL_ID=eu-west-1:360ad910-a783-4887-8607-6495e2c2031c
VUE_APP_CLIENT_ID=4ff11oo3ehurg6s6sq00jtrune
VUE_APP_REGION=eu-west-1

These are the configurations needed for our current Cognito instance.

If you open src/main.js you’ll see this:

/* Attach Cognito module to Vuex store.
 * This gives the application a module in our 'central state'
 * with information about the user / session. It also gives
 * us actions that we can dispatch to login/logout.
 */
attachCognitoModule(store, {
  userPoolId: process.env.VUE_APP_USER_POOL_ID,
  identityPoolId: process.env.VUE_APP_IDENTITY_POOL_ID,
  userPoolWebClientId: process.env.VUE_APP_CLIENT_ID,
  region: process.env.VUE_APP_REGION
}, 'Cognito') // The name of the module

Here we use the configurations to attach the Vuex module to our application state.