Sign-up

Amplify provides a client library that enables you to interact with backend resources such as Amplify Auth.

The quickest way to get started with Amplify Auth in your frontend application is with the Authenticator component, which provides a customizable UI and complete authentication flows.

To get started, you can use the signUp() API to create a new user in your backend:

1import { signUp } from "aws-amplify/auth"
2
3const { isSignUpComplete, userId, nextStep } = await signUp({
4  username: "hello@mycompany.com",
5  password: "hunter2",
6  options: {
7    userAttributes: {
8      email: "hello@mycompany.com",
9      phone_number: "+15555555555" // E.164 number convention
10    },
11  }
12});

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:

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.

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
`email` and `phone`	Email

You can confirm the sign-up after receiving a confirmation code from the user:

1import { confirmSignUp } from 'aws-amplify/auth';
2
3const { isSignUpComplete, nextStep } = await confirmSignUp({
4  username: "hello@mycompany.com",
5  confirmationCode: "123456"
6});

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

1import type { FormEvent } from "react"
2import { Amplify } from "aws-amplify"
4import outputs from "../amplify_outputs.json"
5
6Amplify.configure(outputs)
7
8interface SignUpFormElements extends HTMLFormControlsCollection {
9  email: HTMLInputElement
10  password: HTMLInputElement
11}
12
13interface SignUpForm extends HTMLFormElement {
14  readonly elements: SignUpFormElements
15}
16
17export default function App() {
18  async function handleSubmit(event: FormEvent<SignUpForm>) {
19    event.preventDefault()
20    const form = event.currentTarget
21    // ... validate inputs
22    await signUp({
23      username: form.elements.email.value,
24      password: form.elements.password.value,
25    })
26  }
27
28  return (
29    <form onSubmit={handleSubmit}>
30      <label htmlFor="email">Email:</label>
31      <input type="text" id="email" name="email" />
32      <label htmlFor="password">Password:</label>
33      <input type="password" id="password" name="password" />
34      <input type="submit" />
35    </form>
36  )
37}

Using the Authenticator

Sign-in

Sign-up

Confirm sign-up

Practical Example