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

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

Email OTP

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