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

Amplify x Vue.js

Have you tried building a web app? Have you ever tried AWS Amplify? I recently started using it and I see a lot of potential, more directly, I LOVE IT. It enables you to build serverless web apps super quickly, and using other AWS services seamlessly. TBH, I don’t have much experience with AWS, but Amplify doesn’t require those experiences. It’s an AWS gateway for frontend developers.

In this post, I’d like to explain how to build authentication features such as Sign up, Log in and Log out with Amplify and Vue.js. Are you a React.js user? Don’t worry, I’m trying to write this up without much Vue.js context.

If you want to see code in GitHub, here is the repository.

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

I’d like to write up how to use AWS AppSync with AMAZON_COGNITO_USER_POOLS in my next post.

What I don’t explain is Amplify’s Vue.js UI components. They’re super easy to use, but hard to customize. Creating your own forms is pretty easy, there’s no need to use the provided UI components.

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” is a tool group formed by these components:

• Amplify CLI: The CLI tool that helps you build web apps in your terminal.
• 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.

What’s impressive at first glance is that it supports a lot of platforms/frameworks of Web Development, Native Mobile Development, and even IoT. In this tutorial, we’re going to use “Amplify CLI” and “Amplify.js”

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.

Here’s the workflow from Sign Up to Sign Out.

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

Router

Here’s how the app is going to work:

1. When you’ve logged out, or are not signed up:

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

2. When you’ve logged in:

• You can’t see “Sign Up”, “Confirm”, and “Sign In” page
• You can see “Home” page

It requires multiple pages and navigations, so I’d like to use the Vue Router. The navigation items will look like this (After styling):

Forms

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

1. Sign Up

Let’s say the page’s form requires “Email”, and “Password”. Users will use their email address as their username.

2. Confirm

Users receive a confirmation email which has multi digit letters when they sign up. The confirm form requires “Email”, which is used internally as the user’s username. The form also has “Code” where you set the digits in the email to confirm that the user has access to the email address’s inbox.

3. Sign In

Now, users need to input their “Email” and “Password” to log in.

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.

With Vue CLI, you can install major Vue.js packages and it even automatically creates/updates files.

Create form pages

Sign Up Form

Let’s create the Sign Up form. We use the email address as username. It’s because username is a required field when you use AWS Amplify. So internally, email address is also used as username.

The documents of Vuetify is very well made. The style of the validation rules is pretty intuitive. When the submit() event is executed, this.$refs.form.validate() checks if every value is appropriate. When everything is ok, we'd like to send the information to backend later. Right now, let's just console.log() and make sure the form validation is working fine.

Sign Up Confirmation Form

When a user signs up, the user receives an email that has a multiple digit code. We will verify the user with the code in this form. The code is pretty similar to what we have in Sign Up Form.

Let’s also add a button for resending the email in case the user wasn’t able to receive the email. We will add the event later.

Sign In Form

In the last form, we’re making Sign In Form. Like the form you see every time you sign in, it takes username and password. This is the third time making a form, so you must be familiar with the style already.

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.

This means that we’re going to display the Home page and the About page in src/App.vue. Yes, it's nested. Let's add new links for the pages we created.

Then, let’s register those pages in src/router.js as well.

Now, you can see those pages in the navigation, and the forms by clicking the navigation items. It’s easy! Please confirm those form validations are working as you anticipated.

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.

Let’s follow this Get Started guide. What you can do with this is:

1. Sign Up for an AWS account
2. Install the CLI and configure

You’re going to choose multiple options when you run amplify configure command. When you choose the region, I'd recommend you to take the one geographically close to you. For example, this is my configuration (I live in Vancouver):

This configuration step is the, “Hey, AWS. I’m going to develop AWS apps on my computer. Allow me to access to your resource.” message.

Then, let’s set up the AWS backend. In this part, we’re stating, “hey, AWS. Let me use AWS features via Amplify CLI.” You run following commands in your app’s root directory.

Now, you’re going to choose options again. Here’s the example below.

We’re ready to use Amplify features. We’d like to build an app with the Authentication feature. We can use it with one line command(!)

And choose “Email” option to use “Cognito User Pool”. It’s ok even if you don’t know what Cognito is. You can blindly use it via Amplify for making the app. Here’s the example:

You have just built configurations for AWS Cognito on your computer without much knowledge. Isn’t it amazing? Let’s upload the configurations to AWS with this command:

You’ll see this message in your Terminal. Select ‘Yes’ to continue.

That’s it! Almost everything is configured automatically; you’re now able to use Amplify service in your code.

Integrating the app with Amplify

Let’s install packages that Amplify team provides.

Here we installed aws-amplify-vue for using AmplifyEventBus. It's a simple module you can register/execute events with. If you're using React.js, you can easily find substitutes. Let's start integrating!

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.

You have built everything you need. Visit http://localhost:8080/ and make sure you can't see the contents in src/views/Home.vue. Try Sign Up with your Email address. You'll receive an email with the code. Confirm your account then Sign In. NOW you're supposed to be able to see the contents in Home. Congratulations!

Side note: As of July 1st, 2019, you might see following error when you sign up / sign in:

No credentials, applicationId or region

This is already reported, so you can ignore it.

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.

Also for managing users, select “Cognito” in the AWS Console. Click the “Manage User Pools” then you see one user pool created. When you select “General Settings > Users and groups”, there’s one user created. When you select the user, that user must have your email address. Yes, that’s your account.

With just AWS Amplify, you can create a serverless app without much effort. This is incredible. You build the app fast, trial & error and fail faster in a lean startup manner. This is powerful when you’re not sure of the user needs. Of course, Amplify is not perfect. For example, it doesn’t support SSR (Server Side Rendering) well, like Firebase does, although I like the ease of integration with AWS eco-system. Vender lock-in? It’s not something you’re afraid of, unless you believe your business will last longer than AWS does.

I hope you enjoyed this post. Thank you for reading! Happy coding!