Amplify has re-imagined the way frontend developers build fullstack applications. Develop and deploy without the hassle.

Page updated Jun 19, 2024

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

src/App.tsx
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 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" })

Note: if you do not pass an argument to signInWithRedirect it will redirect your users to the Cognito Hosted UI, which has limited support for customization.

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