Select your cookie preferences

We use essential cookies and similar tools that are necessary to provide our site and services. We use performance cookies to collect anonymous statistics, so we can understand how customers use our site and make improvements. Essential cookies cannot be deactivated, but you can choose “Customize” or “Decline” to decline performance cookies.

If you agree, AWS and approved third parties will also use cookies to provide useful site features, remember your preferences, and display relevant content, including relevant advertising. To accept or decline all non-essential cookies, choose “Accept” or “Decline.” To make more detailed choices, choose “Customize.”

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

Page updated Dec 9, 2024

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 StepDescription
CONFIRM_SIGN_UPThe sign up needs to be confirmed by collecting a code from the user and calling confirmSignUp.
DONEThe sign up process has been fully completed.
COMPLETE_AUTO_SIGN_INThe 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 optionUser account verification channel
phonePhone Number
emailEmail
email and phoneEmail

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

Note: When specifying email or phone as a way for your users to sign-in, these are attributes that are used in place of the username. Visit the concepts page to learn more about usernames.

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 number
const { 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 received
const { nextStep: confirmSignUpNextStep } = await confirmSignUp({
username: 'hello',
confirmationCode: '123456',
});
if (confirmSignUpNextStep.signUpStep === 'DONE') {
console.log(`SignUp Complete`);
}

Email OTP

// Sign up using an email address
const { 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 received
const { 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 received
const { 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.');
}
}