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