Did you follow the quick start instructions to set up the Authenticator first?
Initial State
By default, unauthenticated users are redirected to the Sign In flow. You can explicitly redirect to Sign Up or Forgot Password:
Login Mechanisms
The Authenticator automatically infers loginMechanisms from the current Amplify configuration,
but can be explicitly defined as seen below.
Without the zero configuration, the Authenticator by default creates new users in the Amazon Cognito UserPool based on a unique username.
You can provide an alternative to username such as email or phone_number.
Note: A
username,phone_numbervalue is required for Cognito User Pools. Theusernamefield will only work with Gen 1 Auth. For more information about usingusernamesee the docs.
Note: Login with Username is not currently supported using Amplify Gen2 backends
<template>
<authenticator :login-mechanisms="['username']">
<template v-slot="{ user, signOut }">
<h1>Hello {{ user.username }}!</h1>
<button @click="signOut">Sign Out</button>
</template>
</authenticator>
</template>
<template>
<authenticator :login-mechanisms="['email']">
<template v-slot="{ user, signOut }">
<h1>Hello {{ user.username }}!</h1>
<button @click="signOut">Sign Out</button>
</template>
</authenticator>
</template>
<template>
<authenticator :login-mechanisms="['phone_number']">
<template v-slot="{ user, signOut }">
<h1>Hello {{ user.username }}!</h1>
<button @click="signOut">Sign Out</button>
</template>
</authenticator>
</template>
Sign Up Attributes
The Authenticator automatically infers signUpAttributes from amplify pull,
but can be explicitly defined as seen below.
The Authenticator automatically renders most Cognito User Pools attributes,
with the exception of address, gender, locale, picture, updated_at, and zoneinfo. Because these are often app-specific, they can be customized via Sign Up fields.
By default, the Authenticator will still require any attributes required for
verification, such as email, even if signUpAttributes is empty:
<template>
<authenticator :sign-up-attributes="[]"/>
</template>
<template>
<authenticator :sign-up-attributes="[
'address',
'birthdate',
'email',
'family_name',
'gender',
'given_name',
'locale',
'middle_name',
'name',
'nickname',
'phone_number',
'picture',
'preferred_username',
'profile',
'updated_at',
'website',
'zoneinfo', ]"
/>
</template>
Social Providers
The Authenticator automatically infers socialProviders from amplify pull,
but can be explicitly defined as seen below.
For your configured social providers, you can also provide amazon, facebook, or google:
<template>
<authenticator :social-providers="['amazon', 'apple', 'facebook', 'google']">
<template v-slot="{ user, signOut }">
<h1>Hello {{ user.username }}!</h1>
<button @click="signOut">Sign Out</button>
</template>
</authenticator>
</template>
Step by step video on setting up social providers.
Variation
The Authenticator has multiple variations to meet the needs of your application.
By default, the Authenticator will render as a centered card within the container:
<template>
<authenticator>
<template v-slot="{ user, signOut }">
<h1>Hello {{ user.username }}!</h1>
<button @click="signOut">Sign Out</button>
</template>
</authenticator>
</template>
The modal variation overlays the entire screen with the Authenticator:
<template>
<authenticator variation="modal">
<template v-slot="{ user, signOut }">
<h1>Hello {{ user.username }}!</h1>
<button @click="signOut">Sign Out</button>
</template>
</authenticator>
</template>
Hide Sign Up
The Authenticator has an option to hide the sign up page including the Create Account tab.
<template>
<authenticator :hide-sign-up="true">
<template v-slot="{ user, signOut }">
<h1>Hello {{ user.username }}!</h1>
<button @click="signOut">Sign Out</button>
</template>
</authenticator>
</template>