Sign-up
Amplify provides a client library that enables you to interact with backend resources such as Amplify Auth.
To get started, you can use the signUp() API to create a new user in your backend:
import { signUp } from "aws-amplify/auth" const { isSignUpComplete, userId, nextStep } = await signUp({ username: "hello@mycompany.com", password: "hunter2", options: { userAttributes: { email: "hello@mycompany.com", phone_number: "+15555555555" // E.164 number convention }, }});The signUp 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_UP | The sign up needs to be confirmed by collecting a code from the user and calling confirmSignUp. |
DONE | The sign up process has been fully completed. |
COMPLETE_AUTO_SIGN_IN | The sign up process needs to complete by invoking the autoSignIn API. |
Confirm sign-up
By default, each user that signs up remains in the unconfirmed status until they verify with a confirmation code that was sent to their email or phone number. The following are the default verification methods used when either phone or email are used as loginWith options.
| Login option | User account verification channel |
|---|---|
phone | Phone Number |
email | |
email and phone |
You can confirm the sign-up after receiving a confirmation code from the user:
import { confirmSignUp } from 'aws-amplify/auth'; const { isSignUpComplete, nextStep } = await confirmSignUp({ username: "hello@mycompany.com", confirmationCode: "123456"});Practical Example
src/App.tsx
import type { FormEvent } from "react"import { Amplify } from "aws-amplify"import { signUp } from "aws-amplify/auth"import outputs from "../amplify_outputs.json" Amplify.configure(outputs) interface SignUpFormElements extends HTMLFormControlsCollection { email: HTMLInputElement password: HTMLInputElement} interface SignUpForm extends HTMLFormElement { readonly elements: SignUpFormElements} export default function App() { async function handleSubmit(event: FormEvent<SignUpForm>) { event.preventDefault() const form = event.currentTarget // ... validate inputs await signUp({ 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> )}Sign up with passwordless methods
Your application's users can also sign up using passwordless methods. To learn more, visit the concepts page for passwordless.
SMS OTP
// Sign up using a phone numberconst { nextStep: signUpNextStep } = await signUp({username: 'hello',options: {userAttributes: {phone_number: '+15555551234',},},}); if (signUpNextStep.signUpStep === 'DONE') {console.log(`SignUp Complete`);} if (signUpNextStep.signUpStep === 'CONFIRM_SIGN_UP') {console.log(`Code Delivery Medium: ${signUpNextStep.codeDeliveryDetails.deliveryMedium}`,);console.log(`Code Delivery Destination: ${signUpNextStep.codeDeliveryDetails.destination}`,);} // Confirm sign up with the OTP receivedconst { nextStep: confirmSignUpNextStep } = await confirmSignUp({username: 'hello',confirmationCode: '123456',}); if (confirmSignUpNextStep.signUpStep === 'DONE') {console.log(`SignUp Complete`);}Email OTP
// Sign up using an email addressconst { nextStep: signUpNextStep } = await signUp({username: 'hello',options: {userAttributes: {email: 'hello@example.com',},},}); if (signUpNextStep.signUpStep === 'DONE') {console.log(`SignUp Complete`);} if (signUpNextStep.signUpStep === 'CONFIRM_SIGN_UP') {console.log(`Code Delivery Medium: ${signUpNextStep.codeDeliveryDetails.deliveryMedium}`,);console.log(`Code Delivery Destination: ${signUpNextStep.codeDeliveryDetails.destination}`,);} // Confirm sign up with the OTP receivedconst { nextStep: confirmSignUpNextStep } = await confirmSignUp({username: 'hello',confirmationCode: '123456',}); if (confirmSignUpNextStep.signUpStep === 'DONE') {console.log(`SignUp Complete`);}Auto Sign In
// Call `signUp` API with `USER_AUTH` as the authentication flow type for `autoSignIn`const { nextStep: signUpNextStep } = await signUp({username: 'hello',options: {userAttributes: {email: 'hello@example.com',phone_number: '+15555551234',},autoSignIn: {authFlowType: 'USER_AUTH',},},}); if (signUpNextStep.signUpStep === 'CONFIRM_SIGN_UP') {console.log(`Code Delivery Medium: ${signUpNextStep.codeDeliveryDetails.deliveryMedium}`,);console.log(`Code Delivery Destination: ${signUpNextStep.codeDeliveryDetails.destination}`,);} // Call `confirmSignUp` API with the OTP receivedconst { nextStep: confirmSignUpNextStep } = await confirmSignUp({username: 'hello',confirmationCode: '123456',}); if (confirmSignUpNextStep.signUpStep === 'COMPLETE_AUTO_SIGN_IN') {// Call `autoSignIn` API to complete the flowconst { nextStep } = await autoSignIn(); if (nextStep.signInStep === 'DONE') {console.log('Successfully signed in.');}}