Search⌘ K
AI Features
Home
Courses
Building a WhatsApp Clone with Vue.js and AWS Amplify

Integrating User Authentication and Protecting Routes

Explore how to integrate user authentication in a Vue.js WhatsApp clone using AWS Amplify and AWS Cognito. Learn to register users, confirm emails, handle login, reset passwords, and protect routes. Understand the use of lambda triggers for automatic user confirmation and secure application access.

We'll cover the following...

Introduction

We have created our frontend UI as well as the backend UI. Now we can integrate and make the frontend function. The process we are going to implement is as follows:

We now have a plan to integrate our backend and frontend. To begin with, we need to install the aws-amplify package. We run the following command to install the AWS Amplify library:

npm install aws-amplify

Once installed, we need to update the ./main.js file with the following:

Javascript (babel-node)
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import "./assets/index.css"
Vue.config.productionTip = false;
// amplify settings
import Amplify from 'aws-amplify';
import awsconfig from './aws-exports';
Amplify.configure(awsconfig);
new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount("#app");

That is all we have to do to configure our Vue.js application with the AWS Amplify library.

Adding authentication

Let’s begin by creating a folder called lib and creating a file called auth.js. Then we add the following contents:

Javascript (babel-node)
import { Auth } from 'aws-amplify';
// check user authentication status
export const checkUserStatus = async () => {
  try {
    const user = await Auth.currentAuthenticatedUser()
    return user
  } catch (error) {
    throw new Error(error)
  }
}
// signin
export const signIn = async (username, password) => {
  try {
    const user = await Auth.signIn(username, password);
    return user
  } catch (error) {
    throw new Error(error)
  }
}
// signup
export const signUp = async (email, phoneNumber, password) => {
  try {
    const { user } = await Auth.signUp({
      username: email,
      password: password,
      attributes: {
        email: email,
        'custom:phoneNumber': phoneNumber
      }
    });
    return user
  } catch (error) {
    throw new Error(error)
  }
}
// confirm account
export const confirmSignUp = async (username, code) => {
  try {
    await Auth.confirmSignUp(username, code);
  } catch (error) {
    throw new Error(error)
  }
}
// resend confirmation code
export const resendConfirmationCode = async (username) => {
  try {
    await Auth.resendSignUp(username);
  } catch (err) {
    throw new Error(error)
  }
}
// signout
export const signOut = async () => {
  try {
    await Auth.signOut();
  } catch (error) {
    console.log(error);
  }
}
// global sign out
// this will signout user from all devices
export const globalSignOut = async () => {
  try {
    await Auth.signOut({ global: true });
  } catch (error) {
    console.log(error);
  }
}
// Send confirmation code to user's email
export const sendResetCodePassword = async (username) => {
  try {
    const code = await Auth.forgotPassword(username)
    return code
  } catch (error) {
    throw new Error(error)
  }
}
// reset user password
export const resetPassword = async (username, code, new_password) => {
  try {
    await Auth.forgotPasswordSubmit(username, code, new_password)
  } catch (error) {
    throw new Error(error)
  }
}

We now have all the functions that are needed to complete the following actions:

  • Register a new user.
  • Confirm user email.
  • Log in to the application.
  • Set up a forgotten password mechanism–this will send a code to the user’s primary email.
  • Reset password.
  • Provide signout
...