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:

• 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.
• CONTINUE_SIGN_IN_WITH_TOTP_SETUP - The TOTP setup process must be continued. 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.
• CONTINUE_SIGN_IN_WITH_MFA_SELECTION - The user must select their mode of MFA verification before signing in. Complete the process with 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 TOTP and MFA steps that may be returned, see multi-factor authentication.

Confirm sign-in

Practical Example

import type { FormEvent } from "react"
import { Amplify } from "aws-amplify"
Copy highlighted code example
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 multi-factor authentication (MFA) is required with SMS in your backend auth resource, you will need to pass the phone number during sign-up API call. If you are using the email or username as the primary sign-in mechanism, you will need to pass the phone_number attribute as a user attribute. This will change depending on if you enable SMS, TOTP, or both. Visit the multi-factor authentication documentation to learn more about enabling MFA on your backend auth resource.

You will then confirm sign-up, sign in, and receive a nextStep in the sign-in result of type CONFIRM_SIGN_IN_WITH_SMS_MFA_CODE. A confirmation code will also be texted to the phone number provided above. Pass the code you received to the confirmSignIn API:

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"
}})