The Authenticator component adds complete authentication flows
to your application with minimal boilerplate.
Quick start
Step 1. Configure backend
The Authenticator works seamlessly with the Amplify CLI to automatically work with your backend.
First, update @aws-amplify/cli with npm or yarn
if you're using a version before 6.4.0:
npm install -g @aws-amplify/cli@latestyarn global add @aws-amplify/cli@latestNow that you have the Amplify CLI installed, you can set up your Amplify project by running amplify init in your project's root directory. Then run amplify add auth and follow the prompts to add authentication to your backend configuration.
If you have an existing backend, run amplify pull to sync your aws-exports.js with your cloud backend.
You should now have an aws-exports.js file in your src/ directory with your latest backend configuration.
Step 2. Install dependencies
npm install @aws-amplify/ui-vue aws-amplifyyarn add @aws-amplify/ui-vue aws-amplifyStep 3. Update Vite config and index.html
When working with Vite in a Vue project, you must make a few modifications. Please follow the steps below.
1. Add the following script tag to the index.html file right before the </body> tag. This will only run on the client side and will polyfill Node globals.
<script>
window.global = window;
window.process = {
env: { DEBUG: undefined },
}
var exports = {};
</script>
</body>
2. Update the vite.config.ts (or vite.config.js) and add a resolve alias inside the defineConfig({}) as seen below.
export default defineConfig({
plugins: [vue()],
resolve: {
alias: [
{
find: './runtimeConfig',
replacement: './runtimeConfig.browser', // ensures browser compatible version of AWS JS SDK is used
},
]
}
})
3. (Optional) If you run into TypeScript errors importing aws-exports.js, you may need to update the tsconfig.json file with the following config and add a type declaration file:
"compilerOptions": {
"allowJs": true,
}
aws-exports.d.ts file:
declare const awsmobile: Record<string, any>
export default awsmobile;
1. Add the following script tag to the index.html file right before the </body> tag. This will only run on the client side and will polyfill Node globals.
<script>
window.global = window;
window.process = {
env: { DEBUG: undefined },
}
var exports = {};
</script>
</body>
2. Update the vite.config.ts (or vite.config.js) and add a resolve alias inside the defineConfig({}) as seen below.
export default defineConfig({
plugins: [vue()],
resolve: {
alias: [
{
find: './runtimeConfig',
replacement: './runtimeConfig.browser', // ensures browser compatible version of AWS JS SDK is used
},
]
}
})
Step 4. Add the Authenticator
The quickest way to get started is by wrapping your application with the Authenticator component.
Once an end-user has created an account & signed in, the underlying component is rendered with access to the user.
For Vue 3, import the Authenticator and the styles.css into your single file component. You can then use the <authenticator> inside your template.
<script setup>
import { Authenticator } from "@aws-amplify/ui-vue";
import "@aws-amplify/ui-vue/styles.css";
import { Amplify } from 'aws-amplify';
import awsconfig from './aws-exports';
Amplify.configure(awsconfig);
</script>
<template>
<authenticator>
<template v-slot="{ user, signOut }">
<h1>Hello {{ user.username }}!</h1>
<button @click="signOut">Sign Out</button>
</template>
</authenticator>
</template>
If you're looking for the Vue 2 documentation please click here.
Please see troubleshooting if you have trouble building or running your application with Authenticator.