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
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: 'james', 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: 'james', confirmationCode: '123456',});
if (confirmSignUpNextStep.signUpStep === 'DONE') { console.log(`SignUp Complete`);}
Email OTP
// Sign up using an email addressconst { nextStep: signUpNextStep } = await signUp({ username: 'james', options: { userAttributes: { email: 'james@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: 'james', confirmationCode: '123456',});
if (confirmSignUpNextStep.signUpStep === 'DONE') { console.log(`SignUp Complete`);}
Auto Sign In
// Confirm sign up with the OTP received and auto sign inconst { nextStep: confirmSignUpNextStep } = await confirmSignUp({ username: 'james', confirmationCode: '123456',});
if (confirmSignUpNextStep.signUpStep === 'COMPLETE_AUTO_SIGN_IN') { const { nextStep } = await autoSignIn();
if (nextStep.signInStep === 'DONE') { console.log('Successfully signed in.'); }}