Sign-in
Amplify provides a client library that enables you to interact with backend resources such as Amplify Auth.
Using the signIn API
import { signIn } from 'aws-amplify/auth'
await signIn({ username: "hello@mycompany.com", password: "hunter2",})
The signIn
API response will include a nextStep
property, which can be used to determine if further action is required. It may return the following next steps:
Next Step | Description |
---|---|
CONFIRM_SIGN_IN_WITH_NEW_PASSWORD_REQUIRED | The user was created with a temporary password and must set a new one. Complete the process with confirmSignIn . |
CONFIRM_SIGN_IN_WITH_CUSTOM_CHALLENGE | The sign-in must be confirmed with a custom challenge response. Complete the process with confirmSignIn . |
CONFIRM_SIGN_IN_WITH_TOTP_CODE | The sign-in must be confirmed with a TOTP code from the user. Complete the process with confirmSignIn . |
CONFIRM_SIGN_IN_WITH_SMS_CODE | The sign-in must be confirmed with a SMS code from the user. Complete the process with confirmSignIn . |
CONFIRM_SIGN_IN_WITH_EMAIL_CODE | The sign-in must be confirmed with a EMAIL code from the user. Complete the process with confirmSignIn . |
CONTINUE_SIGN_IN_WITH_MFA_SELECTION | The user must select their mode of MFA verification before signing in. Complete the process with confirmSignIn . |
CONTINUE_SIGN_IN_WITH_MFA_SETUP_SELECTION | The user must select their mode of MFA verification to setup. Complete the process by passing either "EMAIL" or "TOTP" to confirmSignIn . |
CONTINUE_SIGN_IN_WITH_TOTP_SETUP | The TOTP setup process must be continued. Complete the process with confirmSignIn . |
CONTINUE_SIGN_IN_WITH_EMAIL_SETUP | The EMAIL setup process must be continued. Complete the process by passing a valid email address to confirmSignIn . |
RESET_PASSWORD | The user must reset their password via resetPassword . |
CONFIRM_SIGN_UP | The user hasn't completed the sign-up flow fully and must be confirmed via confirmSignUp . |
DONE | The sign in process has been completed. |
For more information on handling the MFA steps that may be returned, see multi-factor authentication.
Practical Example
import type { FormEvent } from "react"import { Amplify } from "aws-amplify"import { signIn } from "aws-amplify/auth"import outputs from "../amplify_outputs.json"
Amplify.configure(outputs)
interface SignInFormElements extends HTMLFormControlsCollection { email: HTMLInputElement password: HTMLInputElement}
interface SignInForm extends HTMLFormElement { readonly elements: SignInFormElements}
export default function App() { async function handleSubmit(event: FormEvent<SignInForm>) { event.preventDefault() const form = event.currentTarget // ... validate inputs await signIn({ username: form.elements.email.value, password: form.elements.password.value, }) }
return ( <form onSubmit={handleSubmit}> <label htmlFor="email">Email:</label> <input type="text" id="email" name="email" /> <label htmlFor="password">Password:</label> <input type="password" id="password" name="password" /> <input type="submit" /> </form> )}
With multi-factor auth enabled
When you have Email or SMS MFA enabled, Cognito will send messages to your users on your behalf. Email and SMS messages require that your users have email address and phone number attributes respectively. It is recommended to set these attributes as required in your user pool if you wish to use either Email MFA or SMS MFA. When these attributes are required, a user must provide these details before they can complete the sign up process.
If you have set MFA to be required and you have activated more than one authentication factor, Cognito will prompt new users to select an MFA factor they want to use. Users must have a phone number to select SMS and an email address to select email MFA.
If a user doesn't have the necessary attributes defined for any available message based MFA, Cognito will prompt them to set up TOTP.
Visit the multi-factor authentication documentation to learn more about enabling MFA on your backend auth resource.
Confirm sign-in
Following sign in, you will receive a nextStep
in the sign-in result of one of the following types. Collect the user response and then pass to the confirmSignIn
API to complete the sign in flow.
Next Step | Description |
---|---|
CONFIRM_SIGN_IN_WITH_TOTP_CODE | The sign-in must be confirmed with a TOTP code from the user. Complete the process with confirmSignIn . |
CONFIRM_SIGN_IN_WITH_SMS_CODE | The sign-in must be confirmed with a SMS code from the user. Complete the process with confirmSignIn . |
CONFIRM_SIGN_IN_WITH_EMAIL_CODE | The sign-in must be confirmed with a EMAIL code from the user. Complete the process with confirmSignIn . |
CONTINUE_SIGN_IN_WITH_MFA_SELECTION | The user must select their mode of MFA verification before signing in. Complete the process with confirmSignIn . |
CONTINUE_SIGN_IN_WITH_MFA_SETUP_SELECTION | The user must select their mode of MFA verification to setup. Complete the process by passing either "EMAIL" or "TOTP" to confirmSignIn . |
CONTINUE_SIGN_IN_WITH_TOTP_SETUP | The TOTP setup process must be continued. Complete the process with confirmSignIn . |
CONTINUE_SIGN_IN_WITH_EMAIL_SETUP | The EMAIL setup process must be continued. Complete the process by passing a valid email address to confirmSignIn . |
import { confirmSignIn, signIn } from "aws-amplify/auth";
const { nextStep } = await signIn({ username: "hello@mycompany.com", password: "hunter2",});
if ( nextStep.signInStep === "CONFIRM_SIGN_IN_WITH_SMS_CODE" || nextStep.signInStep === "CONFIRM_SIGN_IN_WITH_EMAIL_CODE" || nextStep.signInStep === "CONFIRM_SIGN_IN_WITH_TOTP_CODE") { // collect OTP from user await confirmSignIn({ challengeResponse: "123456", });}
if (nextStep.signInStep === "CONTINUE_SIGN_IN_WITH_MFA_SELECTION") { // present nextStep.allowedMFATypes to user // collect user selection await confirmSignIn({ challengeResponse: "EMAIL", // 'EMAIL', 'SMS', or 'TOTP' });}
if (nextStep.signInStep === "CONTINUE_SIGN_IN_WITH_MFA_SETUP_SELECTION") { // present nextStep.allowedMFATypes to user // collect user selection await confirmSignIn({ challengeResponse: "EMAIL", // 'EMAIL' or 'TOTP' });}
if (nextStep.signInStep === "CONTINUE_SIGN_IN_WITH_EMAIL_SETUP") { // collect email address from user await confirmSignIn({ challengeResponse: "hello@mycompany.com", });}
if (nextStep.signInStep === "CONTINUE_SIGN_IN_WITH_TOTP_SETUP") { // present nextStep.totpSetupDetails.getSetupUri() to user // collect OTP from user await confirmSignIn({ challengeResponse: "123456", });}
Sign in with an external identity provider
To sign in using an external identity provider such as Google, use the signInWithRedirect
function.
import { signInWithRedirect } from "aws-amplify/auth"
signInWithRedirect({ provider: "Google" })
Alternatively if you have configured OIDC or SAML-based identity providers in your auth resource, you can specify a "custom" provider in signInWithRedirect
:
import { signInWithRedirect } from "aws-amplify/auth"
signInWithRedirect({ provider: { custom: "MyOidcProvider"}})
Auto sign-in
The autoSignIn
API will automatically sign-in a user when it was previously enabled by the signUp
API and after any of the following cases has completed:
- User confirmed their account with a verification code sent to their phone or email (default option).
- User confirmed their account with a verification link sent to their phone or email. In order to enable this option you need to go to the Amazon Cognito console, look for your userpool, then go to the
Messaging
tab and enablelink
mode inside theVerification message
option. Finally you need to define thesignUpVerificationMethod
tolink
inside theCognito
option of yourAuth
config.
import { autoSignIn } from 'aws-amplify/auth';
await autoSignIn();