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 flow const { nextStep } = await autoSignIn();
if (nextStep.signInStep === 'DONE') { console.log('Successfully signed in.'); }}