How to Add Authentication to Vue App with AWS Amplify: Complete Guide
By Braincuber Team
Published on April 6, 2026
What You'll Learn:
- What AWS Amplify is and how it simplifies cloud authentication
- How to install and configure the Amplify CLI with AWS IAM users
- How to scaffold a Vue.js project with Vue CLI and router
- How to initialize Amplify back-end and add authentication services
- How to create registration, login, and logout pages with Vue components
- How to use the Auth module from aws-amplify for user management
In this complete tutorial, we are going to create a Vue application using the Vue CLI. We will modify the default scaffolded application so it provides a form to register as a new user, a login page, and a dashboard page only shown to people that are logged in. Users will be able to register using an email and password. Once they have registered and logged in, they will be presented with the dashboard page. This step by step guide will show you exactly how to implement secure authentication in your Vue.js applications using AWS Amplify and Amazon Cognito. Whether you are a beginner or experienced developer, this beginner guide will show you exactly how to add production-ready authentication to your Vue apps.
What is AWS Amplify?
AWS Amplify is an open-source framework created by Amazon that contains a set of tools and services that can be used together or on their own.
One of the tools is Amplify Auth. Amplify Auth lets you quickly set up secure authentication and control what users have access to in your application.
The Amplify framework uses Amazon Cognito as the main authentication provider. Amazon Cognito is a robust user-directory service that handles user registration, authentication, account recovery, and other operations.
Secure Authentication
Amazon Cognito handles user registration, authentication, and account recovery with enterprise-grade security.
Quick Setup
Amplify CLI automates the creation of AWS cloud services. Add authentication with a single command.
User Management
Built-in user directory service handles registration, login, password recovery, and multi-factor authentication.
Framework Agnostic
Works with Vue, React, Angular, React Native, and more. Same API across all JavaScript frameworks.
Step 1: Create the Vue Project
I will be using the Vue CLI to scaffold out a project for us to start with. To do that, you need to have the Vue CLI installed on your system. If you do not have it installed, you can install it globally with this command:
npm install -g @vue/cli
Now we can use the Vue CLI to create our project. Create a new project using this command:
vue create vue-amplify-auth-tutorial
You will be asked to pick a preset. Choose "Manually select features," and then select "babel," "Router," and "Linter / Formatter."
You will be asked if you want to use the history mode for the router. Choose "Yes" (should be the default). For a linter, select "ESLint with error prevention only."
After the Vue CLI is finished, it will give you the commands to change into the new directory that was just created and the command to start the server. Follow those directions. Once the server is started you can open your browser to localhost:8080.
Step 2: Create an AWS Account
To get started, you will need to create an AWS account. If you do not have an AWS account, follow the directions on the AWS website to create one. Having an AWS account is free if you do not use any services. You will not be charged for creating the account.
Step 3: Install and Configure the Amplify CLI
The Amplify CLI is a unified toolchain to create AWS cloud services for your app. You can install it globally with this command:
npm install -g @aws-amplify/cli
Next, we need to configure Amplify by running the following command:
amplify configure
This command will open up a new browser window and ask you to sign into the AWS console. Once you are signed in, return to your terminal, and press Enter. You will be asked to specify the AWS Region. Select the region closest to you.
You will need to specify the username of the new IAM user. It will provide a default name you can use by hitting enter or you can specify your own name. When you hit Enter, you will be taken back to your browser. Click through the Next buttons (Permissions, Tags, Review) and then click the Create User button.
Now go back to your terminal and press Enter to continue. Type in the accessKeyId of the user you just created, and press Enter. Type in the secretAccessKey of the user you just created, and press Enter. You will be asked to enter a profile name. Accept the supplied value (the default) by just pressing Enter.
Important: Save Your Credentials
Make sure to securely store your accessKeyId and secretAccessKey. You will need these to configure the Amplify CLI. Never commit these credentials to version control or share them publicly.
Step 4: Initialize a New Back End
Now that we have a running Vue app, it is time to set up Amplify so we can create the necessary back-end services needed to support the app. From the root of your Vue application, run:
amplify init
When you initialize Amplify, you will be prompted for some information about your application. Enter a project name. Set the back-end environment name to be dev. Sometimes the CLI will prompt you to edit a file - it will use this editor to open those files. Select your preferred code-editor software.
Amplify will provide configuration files for your front-end application to connect to this back-end environment. Since Vue is based on JavaScript, we will select that here. We are using Vue, so select that as our JavaScript framework.
The Vue CLI sets up the source files for your project under a ./src folder. Select src for the Source Directory Path. When your project is ready to be hosted, Vue will generate your website, ready for public use, into a folder called dist. This is the default, so you can just press Enter to continue.
Amplify automated deployment needs to know what steps are needed to build your application for publishing. Here, we will set that to be the Vue CLI default build script. If Amplify needs to run the application in development mode, it needs to know how to start the development server. Again, we will use the Vue CLI default scripts.
Finally, Amplify needs an AWS account to connect to so we can begin creating the back-end services. This is the profile you created with the amplify configure command earlier. Select "yes" by typing y and pressing Enter. Proceed to select your profile from the list, and press Enter. Amplify will now begin deploying your back-end framework.
When you initialize a new Amplify project, a few things happen:
Amplify Directory Created
It creates a top-level directory called amplify that stores your back-end definition. As you add features, the amplify folder will grow with infrastructure-as-code templates that define your back-end stack.
AWS Exports File Generated
It creates a file called aws-exports.js in the src directory that holds all of the configuration for the services you create with Amplify.
Gitignore Updated
It modifies the .gitignore file, adding some generated files to the ignore list to prevent committing sensitive configuration.
Cloud Project Created
A cloud project is created for you in the AWS Amplify Console that can be accessed by running amplify console.
Step 5: Create the Authentication Service
We need to add an authentication service to our Vue application. In the root directory of your Vue application, enter this command:
amplify add auth
To deploy the service, run the push command:
amplify push
Step 6: Install Amplify Libraries
We need to install the Amplify dependencies in our Vue application. You can install them with this command:
npm install aws-amplify
Step 7: Configure Our Application
We need to add Amplify to our Vue application. Open up the main.js file, and add the following after the last import line:
import Amplify from 'aws-amplify';
import awsconfig from './aws-exports';
Amplify.configure(awsconfig);
The above code successfully configures Amplify. As you add or remove categories and make updates to your back-end configuration using the Amplify CLI, the configuration in aws-exports.js will update automatically.
Step 8: Create a Sign-Up Page
We need a page that will allow new users to register with our application. In the views folder, create a new file called Register.vue.
We need to add this new page to our routes and then display it in the navigation. Open up the index.js file in the router folder. Add this to the routes array:
{
path: '/register',
name: 'Register',
component: () =>
import(/* webpackChunkName: "register" */ '../views/Register.vue'),
},
Now add this to our navigation. Open up the App.vue file, and add an entry for Register in the nav. Your nav should look like this:
Go back to your Register.vue file. This page will have a form for a user to put their email and a password to register as a new user. Here is the code you need to put in the template section:
If you look at our form, the two input fields and the button are right next to each other. Want to add some spacing between the three fields? I could add CSS to this page, but it would only apply to this page. We are going to use this form again on the login page we will be creating next. To get styles that work on both pages, let us put the following CSS in the App.vue file:
input {
margin-right: 10px;
}
Go back to the Register.vue file. We are capturing the values the user enters for their email and password, so we need to add them to the data object:
data() {
return {
email: '',
password: '',
};
},
When a user submits the form it calls the register method. Here is the code for that method:
async register() {
try {
await Auth.signUp({
username: this.email,
password: this.password,
});
alert('User successfully registered. Please login');
} catch (error) {
alert(error.message);
}
},
This method uses Auth from the aws-amplify package we installed. Add this import for it at the beginning of the script section:
import { Auth } from 'aws-amplify';
Now open up your application, and register a new user. If successful, you will get an alert saying the user was registered.
Step 9: Create a Login Page
Once a user has registered an account with our application, they need a page through which they can log in. In the views folder, create a new file called Login.vue.
We need to add this new page to our routes and then display it in the navigation. Open up the index.js file in the router folder. Add this to the routes array:
{
path: '/login',
name: 'Login',
component: () =>
import(/* webpackChunkName: "login" */ '../views/Login.vue'),
},
Now add this to our navigation. Open up the App.vue file, and add an entry for Login in the nav. Your nav should look like this:
Go back to your Login.vue file. You can copy the HTML code in the template section of the Register.vue file and paste it into this new file. Change all references of Register to Login. Your template section should look like this:
In the script section, add the import for Auth and the data object for the email and password. Your script section should look like this:
The last thing we need to implement is the login method. Here is the code:
async login() {
try {
await Auth.signIn(this.email, this.password);
alert('Successfully logged in');
} catch (error) {
alert(error.message);
}
},
Now if you open up your application, you will be able to log in with the user you previously registered.
Step 10: Add a Logout Method
We need to add a button so users can log out of our application. Open up the App.vue file. Add a button to log out in the nav. Your nav should look like this:
In the script section, add a methods object, and include the logout method. It should look like this:
methods: {
async logout() {
try {
await Auth.signOut();
} catch (error) {
alert(error.message);
}
},
},
Congratulations, you have successfully added AWS Amplify authentication to your Vue application.
AWS Amplify Authentication Flow Summary
| Step | Amplify Auth Method | Description |
|---|---|---|
| User Registration | Auth.signUp() | Creates a new user in Amazon Cognito with email and password |
| User Login | Auth.signIn() | Authenticates user credentials and establishes session |
| User Logout | Auth.signOut() | Ends the user session and clears authentication tokens |
| Get Current User | Auth.currentAuthenticatedUser() | Retrieves the currently authenticated user information |
Frequently Asked Questions
What is AWS Amplify and why use it with Vue?
AWS Amplify is an open-source framework that provides tools and services for building cloud-powered applications. It uses Amazon Cognito for authentication, handling user registration, login, and account recovery automatically.
How does the amplify configure command work?
The amplify configure command opens the AWS console to create an IAM user with programmatic access. It then collects the accessKeyId and secretAccessKey to configure the CLI for creating AWS resources on your behalf.
What is the aws-exports.js file?
The aws-exports.js file is automatically generated in the src directory. It holds all configuration for the services you create with Amplify, allowing the Amplify client to get necessary information about your back-end services.
Can I use other authentication providers with Vue?
Yes. Besides AWS Amplify, you can use Firebase for authentication, Auth0, or other identity providers. Each has its own setup process but follows similar patterns of registration, login, and logout methods.
What happens when I run amplify push?
The amplify push command deploys your back-end services to AWS. It creates the CloudFormation stacks needed for authentication (Amazon Cognito user pools), updates the aws-exports.js file, and makes your services ready for use.
Need Help with AWS Amplify and Vue.js?
Our experts can help you build secure authentication systems, design cloud architectures, and deploy scalable Vue.js applications on AWS.