#aws #amplify #vuejs #cognito #serverless
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, I have made a repository which is similar to what we're going to make.
- Creating forms and router: How to make forms with Vue.js, using Vuetify for validating content
- Setting up Amplify: How to setup Amplify
- 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.
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"
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.
- Sign Up (Input username, email address, and password)
- Confirm (Receive verification code via email, input email address and the code)
- Sign In (Input username and password)
- Home (Success! Logged In!)
- Sign Out
Here's how the app is going to work:
- 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
- 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.
We will need multiple forms for making those pages above. The forms we're going to create are:
- Sign Up
Let's say the page's form requires "Email", and "Password". Users will use their email address as their username.
- 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.
- Sign In
Now, users need to input their "Email" and "Password" to log in.
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.
https://gist.github.com/2b2c19e677f0497b7a4d2d47fd4546fa
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.
https://gist.github.com/382968b8bc4f58411c70d30a77b872b0
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.
https://gist.github.com/082a584bb454666ecb28d347f834dedc
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.
https://gist.github.com/bf084ab9943ed5bfdf60b8f6edc5d5c0
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.
You may have realized that src/App.vue has changed when you added the Vue Router.
https://gist.github.com/9136468364b1361b4734cb66eab1b590
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 the pages we created.
https://gist.github.com/ac3aba8bb917c773c11947339d183f82
Then, let's register those pages in src/router.js as well.
https://gist.github.com/2b183ee891fbd047ee6ffe931ac313a3
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.
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:
- Sign Up for an AWS account
- 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):
https://gist.github.com/0bd24c032c55dd4c39512c91d978183e
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.
https://gist.github.com/029e20f2162de815f292213858347f8f
Now, you're going to choose options again. Here's the example below.
https://gist.github.com/1a2c685e88b07f45e2bafadaeb62e62a
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(!)
https://gist.github.com/209ed5e9361603aabde749440ddb326e
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:
https://gist.github.com/f37be8da7d091c423748d685106e8a87
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:
https://gist.github.com/59a96ab5c4a82146c949bf2565a41614
You'll see this message in your Terminal. Select 'Yes' to continue.
https://gist.github.com/90a7b0d20d67790cda0b243477b73cf8
That's it! Almost everything is configured automatically; you're now able to use Amplify service in your code.
Let's install packages that Amplify team provides.
https://gist.github.com/968dcc11d8fed3c565b1267e909ce8ef
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!
First thing first, the app needs to load the Amplify JS component and the config file.
https://gist.github.com/85125275c6ec6bd5f49d0fd740d34e24
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.
https://gist.github.com/031eaf5610b9eb1c10188b1e337fc96b
Let's use the auth.js in pages we created.
https://gist.github.com/60b902eeb620120ab16e55878d2051eb
https://gist.github.com/bcda9b8863d07ee1d994fb4906e68e64
https://gist.github.com/fc8ef897889f4f2e938ed9c6ad2440d5
https://gist.github.com/b1099b7d7a1c57db2cb608497d29f63e
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.
https://gist.github.com/e2d07a7587f87df0fd1bbe0b038b4050
You have built everything you need. Visit http://localhost:8080/home 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!
No credentials, applicationId or region
This is already reported, so you can ignore it.
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. Happy coding!