Add authentication
The next feature you will be adding is authentication.
Authentication with Amplify
Amplify uses Amazon Cognito as its authentication provider. Amazon Cognito is a robust user directory service that handles user registration, authentication, account recovery & other operations. In this tutorial, you'll learn how to add authentication to your application using Amazon Cognito and username/password login.
Create authentication service
To add authentication to your app, run this command:
amplify add auth
Select the defaults for the following prompts:
? Do you want to use the default authentication and security configuration? Default configuration
Warning: you will not be able to edit these selections.? How do you want users to be able to sign in? Username? Do you want to configure advanced settings? No, I am done.
To deploy the service, run the push
command:
amplify push
✔ Are you sure you want to continue? (Y/n) · yes
Now, the authentication service has been deployed and you can start using it. To view the deployed services in your project at any time, go to Amplify Console by running the following command:
amplify console
Create login UI
Now that you have your authentication service deployed to AWS, it's time to add authentication to your app. Creating a login flow can be quite difficult and time consuming to get right. Luckily, Amplify UI has an Authenticator
component that provides an entire authentication flow for you, using the configuration you specified in amplifyconfiguration.json.
Install Amplify UI
The @aws-amplify/ui-vue
package includes Vue specific UI components you'll use to build your app. Install it with the following command:
npm install @aws-amplify/ui-vue
Add the Amplify UI Authenticator component
Open src/App.vue and make the following changes.
Within the App.vue, add the authenticator
component:
<script setup> import { Authenticator } from '@aws-amplify/ui-vue'; import '@aws-amplify/ui-vue/styles.css'; // ... other code below</script><template> <authenticator> <template v-slot="{ user, signOut }"> <h1>Hello {{ user.username }}!</h1> <button @click="signOut">Sign Out</button> <!-- Other content from before--> </template> </authenticator></template>
Using Amplify UI connected components makes it easier to manage styling across your entire app.
In this example, you used the Amplify UI library and the withAuthenticator
Higher-Order Component to quickly get up and running with a real-world authentication flow. You can also customize this component to add or remove fields, update styling, or other configurations. You can even override function calls if needed. To learn more, visit the Amplify UI documentation website.
In addition to withAuthenticator
, you can build custom authentication flows with the Amplify Library for JS. Amplify's Auth package has several methods including signUp
, signIn
, forgotPassword
, and signOut
that allow you full control over all aspects of the user authentication flow.