Need to configure your backend?See Build a Backend →
サインアップ
Amplifyは、Amplify Authなどのバックエンドリソースと対話できるクライアントライブラリを提供します。
まず、signUp() APIを使用してバックエンドに新しいユーザーを作成できます：
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 }, }});signUp APIレスポンスには nextStep プロパティが含まれており、これを使用して追加のアクションが必要かどうかを判定できます。以下のネクストステップが返される可能性があります：
| ネクストステップ | 説明 |
|---|---|
CONFIRM_SIGN_UP | サインアップをユーザーからコードを収集して confirmSignUp を呼び出すことで確認する必要があります。 |
DONE | サインアッププロセスが完全に完了しました。 |
COMPLETE_AUTO_SIGN_IN | サインアッププロセスを autoSignIn APIを呼び出して完了する必要があります。 |
サインアップの確認
デフォルトでは、サインアップしたすべてのユーザーは、メールアドレスまたは電話番号に送信された確認コードで確認するまで、未確認のステータスのままです。以下は、loginWith オプションとして phone または email が使用される場合に使用されるデフォルトの検証方法です。
| ログインオプション | ユーザーアカウント検証チャネル |
|---|---|
phone | 電話番号 |
email | メール |
email と phone | メール |
ユーザーから確認コードを受け取った後、サインアップを確認できます：
import { confirmSignUp } from 'aws-amplify/auth';
const { isSignUpComplete, nextStep } = await confirmSignUp({ username: "hello@mycompany.com", confirmationCode: "123456"});実践的な例
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> )}パスワードレス方式でのサインアップ
アプリケーションのユーザーはパスワードレス方式を使用してサインアップすることもできます。詳細については、パスワードレスのコンセプトページをご覧ください。
SMS OTP
// 電話番号を使用してサインアップします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}`, );}
// 受け取ったOTPでサインアップを確認しますconst { nextStep: confirmSignUpNextStep } = await confirmSignUp({ username: 'hello', confirmationCode: '123456',});
if (confirmSignUpNextStep.signUpStep === 'DONE') { console.log(`SignUp Complete`);}メールOTP
// メールアドレスを使用してサインアップします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}`, );}
// 受け取ったOTPでサインアップを確認しますconst { nextStep: confirmSignUpNextStep } = await confirmSignUp({ username: 'hello', confirmationCode: '123456',});
if (confirmSignUpNextStep.signUpStep === 'DONE') { console.log(`SignUp Complete`);}自動サインイン
// 認証フロータイプとして `USER_AUTH` を指定して `signUp` APIを呼び出します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}`, );}
// 受け取ったOTPで `confirmSignUp` APIを呼び出しますconst { nextStep: confirmSignUpNextStep } = await confirmSignUp({ username: 'hello', confirmationCode: '123456',});
if (confirmSignUpNextStep.signUpStep === 'COMPLETE_AUTO_SIGN_IN') { // フローを完了するために `autoSignIn` APIを呼び出します const { nextStep } = await autoSignIn();
if (nextStep.signInStep === 'DONE') { console.log('Successfully signed in.'); }}