Building AWS Amplify Customized Authentication Forms for Serverless Vue.js Apps

Wataru Oguchi
Jul 2 · 8 min read
Amplify x Vue.js

Contents of the tutorial

  1. Creating forms and router: How to make forms with Vue.js, using Vuetify for validating content
  2. Setting up Amplify: How to setup Amplify
  3. Integrating the app with Amplify: How to integrate the app with AWS Amplify

My rough understanding about Amplify

Before starting the tutorial, I’d like to write up this section, because when I started using Amplify I wasn’t sure what Amplify actually was. I hope this classification helps your understanding of it.

  • Amplify.js: The JavaScript library that provides handy Amplify features & APIs. There’s an equivalent of this for developing native mobile apps as well.
  • Amplify Console: The cloud service that provides a deploy workflow.

Creating forms and router

Before jumping into coding (I know coding is the fun part, but just a sec!), I’d like to mention Amplify’s default flow of authentication.

  1. Confirm (Receive verification code via email, input email address and the code)
  2. Sign In (Input username and password)
  3. Home (Success! Logged In!)
  4. Sign Out

Router

Here’s how the app is going to work:

  • You can’t see “Home” page
  • You “Sign Up”, “Confirm”, then “Sign In” to see the “Home” page
  • You can see “Home” page

Forms

We will need multiple forms for making those pages above. The forms we’re going to create are:

Coding Time!

Install dependencies

First off, let’s create the project and download packages we’re going to use in this chapter. The project name is my-app.

Create form pages

Sign Up Form

The page users can see after signing in

You can’t see the page unless you sign in, and when you sign in, you can sign out through the page. In this tutorial, let’s use the existing page src/views/Home.vue which has been created when you added Vue Router.

Setup the Vue Router

You may have realized that src/App.vue has changed when you added the Vue Router.


Setting Up Amplify

This is another exciting part, especially if you haven’t used AWS. I assume some of you are a “Frontend Developer”, who may not be very familiar with AWS stack. Sure, AWS is more like backend stack, but it doesn’t mean frontend developers shouldn’t/can’t use AWS. As I said earlier, Amplify is a great gateway for frontend developers to make the first step into AWS stack.

  1. Install the CLI and configure

Integrating the app with Amplify

Let’s install packages that Amplify team provides.

main.js

First thing first, the app needs to load the Amplify JS component and the config file. Add these lines in src/main.js .

auth.js

I’d like to have this JS that utilizes the Auth API from aws-amplify. Because it doesn't depend on Vue.js framework, I am making a pure JS file and let Vue.js import that file. This way, Vue.js can focus on rendering the UI, and you can write a unit test easily. When you want to switch UI frameworks in the future, this separation doesn't harm it.

Views import auth.js

Let’s use the auth.js in pages we created.

router.js

We want to “redirect” pages depending on the authentication status. You don’t want to display the Sign Up page when the user has logged in, you don’t want to display the Home page when the user signed out, or hasn’t signed in. Also, we want to take the user to specific pages based on their actions. For example, when the user signed up, we want to show the Confirm page.


Conclusion

Through this tutorial, you managed to create authentication features without visiting the AWS Console much. This is all thanks to AWS Amplify. If you’re curious what’s happening behind the scenes, I’d recommend you visit AWS Console, select “cloudFormation”. Many templates get generated automatically with just a few commands.

Vue.js Developers

Helping web professionals up their skill and knowledge of Vue.js

Wataru Oguchi

Written by

Software Developer. Interested in Civic Tech / UX / Serverless Architecture. Leaning how to learn. https://wataruoguchi.com/ https://note.mu/wataruoguchi

Vue.js Developers

Helping web professionals up their skill and knowledge of Vue.js