マルチステップサインイン
ユーザーがサインアップを完了した後、サインインに進むことができます。Amplify Auth のサインインフローはマルチステップのプロセスになる場合があります。必要なステップは、認証リソースを定義する際に提供した設定によって決まります。詳細については、多要素認証のページをご覧ください。
設定によっては、ユーザーのサインインを完了するためにさまざまな API を呼び出す必要がある場合があります。サインインフローの次のステップを特定するには、サインイン結果の nextStep パラメータを確認してください。
import { confirmSignIn, confirmSignUp, resetPassword, signIn,} from 'aws-amplify/auth';
const { nextStep } = await signIn({ username: 'hello@mycompany.com', password: 'hunter2',});
if ( nextStep.signInStep === 'CONFIRM_SIGN_IN_WITH_SMS_CODE' || nextStep.signInStep === 'CONFIRM_SIGN_IN_WITH_EMAIL_CODE' || nextStep.signInStep === 'CONFIRM_SIGN_IN_WITH_TOTP_CODE') { // collect OTP from user await confirmSignIn({ challengeResponse: '123456', });}
if (nextStep.signInStep === 'CONTINUE_SIGN_IN_WITH_MFA_SELECTION') { // present nextStep.allowedMFATypes to user // collect user selection await confirmSignIn({ challengeResponse: 'EMAIL', // 'EMAIL', 'SMS', or 'TOTP' });}
if (nextStep.signInStep === 'CONTINUE_SIGN_IN_WITH_MFA_SETUP_SELECTION') { // present nextStep.allowedMFATypes to user // collect user selection await confirmSignIn({ challengeResponse: 'EMAIL', // 'EMAIL' or 'TOTP' });}
if (nextStep.signInStep === 'CONTINUE_SIGN_IN_WITH_EMAIL_SETUP') { // collect email address from user await confirmSignIn({ challengeResponse: 'hello@mycompany.com', });}
if (nextStep.signInStep === 'CONTINUE_SIGN_IN_WITH_TOTP_SETUP') { // present nextStep.totpSetupDetails.getSetupUri() to user // collect OTP from user await confirmSignIn({ challengeResponse: '123456', });}
if (nextStep.signInStep === 'CONFIRM_SIGN_IN_WITH_PASSWORD') { // collect password from user await confirmSignIn({ challengeResponse: 'hunter2', });}
if (nextStep.signInStep === 'CONTINUE_SIGN_IN_WITH_FIRST_FACTOR_SELECTION') { // present nextStep.availableChallenges to user // collect user selection await confirmSignIn({ challengeResponse: 'SMS_OTP', // or 'EMAIL_OTP', 'WEB_AUTHN', 'PASSWORD', 'PASSWORD_SRP' });}
if (nextStep.signInStep === 'CONFIRM_SIGN_IN_WITH_CUSTOM_CHALLENGE') { // collect custom challenge answer from user await confirmSignIn({ challengeResponse: 'custom-challenge-answer', });}
if (nextStep.signInStep === 'CONFIRM_SIGN_IN_WITH_NEW_PASSWORD_REQUIRED') { // collect new password from user await confirmSignIn({ challengeResponse: 'new-password', });}
if (nextStep.signInStep === 'RESET_PASSWORD') { // initiate reset password flow await resetPassword({ username: 'username', });}
if (nextStep.signInStep === 'CONFIRM_SIGN_UP') { // user was not confirmed during sign up process // if user has confirmation code, invoke `confirmSignUp` api // otherwise, invoke `resendSignUpCode` to resend the code await confirmSignUp({ username: 'username', confirmationCode: '123456', });}
if (nextStep.signInStep === 'DONE') { // signin complete}SMS MFA でサインインを確認する
次のステップが CONFIRM_SIGN_IN_WITH_SMS_CODE の場合、Amplify Auth はユーザーに SMS でランダムなコードを送信し、そのコードを確認するのを待っています。このステップを処理するには、アプリの UI でユーザーにコードの入力を促す必要があります。ユーザーがコードを入力したら、その値を confirmSignIn API に渡してください。
import { type SignInOutput, confirmSignIn } from '@aws-amplify/auth';
async function handleSignInResult(result: SignInOutput) { switch (result.nextStep.signInStep) { case 'CONFIRM_SIGN_IN_WITH_SMS_CODE': { const { codeDeliveryDetails } = result.nextStep; // OTP has been delivered to user via SMS // Inspect codeDeliveryDetails for additional delivery information console.log( `A confirmation code has been sent to ${codeDeliveryDetails?.destination}`, ); console.log( `Please check your ${codeDeliveryDetails?.deliveryMedium} for the code.`, ); break; } }}
async function confirmMfaCode(mfaCode: string) { const result = await confirmSignIn({ challengeResponse: mfaCode });
return handleSignInResult(result);}TOTP MFA でサインインを確認する
次のステップが CONFIRM_SIGN_IN_WITH_TOTP_CODE の場合、セットアップ時に関連付けられた認証アプリから TOTP コードを入力するようユーザーに促してください。コードは 30 秒ごとに変わる 6 桁の数字です。ユーザーは 30 秒のウィンドウが切れる前にコードを入力する必要があります。
ユーザーがコードを入力したら、実装は Amplify Auth の confirmSignIn API にその値を渡す必要があります。
import { type SignInOutput, confirmSignIn } from '@aws-amplify/auth';
async function handleSignInResult(result: SignInOutput) { switch (result.nextStep.signInStep) { case 'CONFIRM_SIGN_IN_WITH_TOTP_CODE': { // Prompt user to open their authenticator app to retrieve the code console.log( `Enter a one-time code from your registered authenticator app`, ); break; } }}// Then, pass the TOTP code to `confirmSignIn`async function confirmTotpCode(totpCode: string) { const result = await confirmSignIn({ challengeResponse: totpCode });
return handleSignInResult(result);}メール MFA でサインインを確認する
次のステップが CONFIRM_SIGN_IN_WITH_EMAIL_CODE の場合、Amplify Auth はユーザーのメールアドレスにランダムなコードを送信し、そのコードを確認するのを待っています。このステップを処理するには、アプリの UI でユーザーにコードの入力を促す必要があります。ユーザーがコードを入力したら、その値を confirmSignIn API に渡してください。
import { type SignInOutput, confirmSignIn } from '@aws-amplify/auth';
async function handleSignInResult(result: SignInOutput) { switch (result.nextStep.signInStep) { case 'CONFIRM_SIGN_IN_WITH_EMAIL_CODE': { const { codeDeliveryDetails } = result.nextStep; // OTP has been delivered to user via Email // Inspect codeDeliveryDetails for additional delivery information console.log( `A confirmation code has been sent to ${codeDeliveryDetails?.destination}`, ); console.log( `Please check your ${codeDeliveryDetails?.deliveryMedium} for the code.`, ); break; } }}
async function confirmMfaCode(mfaCode: string) { const result = await confirmSignIn({ challengeResponse: mfaCode });
return handleSignInResult(result);}MFA の選択でサインインを続行する
次のステップが CONTINUE_SIGN_IN_WITH_MFA_SELECTION の場合、ユーザーは使用する MFA メソッドを選択する必要があります。Amplify Auth は現在、SMS、TOTP、EMAIL を MFA メソッドとしてサポートしています。ユーザーが MFA メソッドを選択したら、実装は confirmSignIn API を使用して選択した MFA メソッドを Amplify Auth に渡す必要があります。
Amplify Auth で現在サポートされている MFA タイプは以下の通りです:
SMSTOTPEMAIL
Amplify がユーザーの選択を受け取ると、選択した MFA タイプに対応するフォローアップの nextStep を処理することが期待されます:
SMSが選択された場合、次のステップはCONFIRM_SIGN_IN_WITH_SMS_CODEになります。TOTPが選択された場合、次のステップはCONFIRM_SIGN_IN_WITH_TOTP_CODEになります。EMAILが選択された場合、次のステップはCONFIRM_SIGN_IN_WITH_EMAIL_CODEになります。
import { type SignInOutput, confirmSignIn } from '@aws-amplify/auth';
async function handleSignInResult(result: SignInOutput) { switch (result.nextStep.signInStep) { case 'CONTINUE_SIGN_IN_WITH_MFA_SELECTION': { const { allowedMFATypes } = result.nextStep; // Present available MFA options to user // Prompt for selection console.log(`There are multiple MFA options available for sign in.`); console.log(`Select an MFA type from the allowedMfaTypes list.`); break; } }}
type MfaType = 'SMS' | 'TOTP' | 'EMAIL';
async function handleMfaSelection(mfaType: MfaType) { const result = await confirmSignIn({ challengeResponse: mfaType });
return handleSignInResult(result);}メールセットアップでサインインを続行する
次のステップが CONTINUE_SIGN_IN_WITH_EMAIL_SETUP の場合、ユーザーはサインインプロセスを完了するためにメールアドレスを提供する必要があります。この値をユーザーから収集したら、confirmSignIn API を呼び出して続行してください。
import { type SignInOutput, confirmSignIn } from '@aws-amplify/auth';
async function handleSignInResult(result: SignInOutput) { switch (result.nextStep.signInStep) { case 'CONTINUE_SIGN_IN_WITH_EMAIL_SETUP': { // Prompt the user to enter an email address they would like to use for MFA break; } }}
// Then, pass the email address to `confirmSignIn`async function confirmEmail(email: string) { const result = await confirmSignIn({ challengeResponse: email });
return handleSignInResult(result);}TOTP セットアップでサインインを続行する
CONTINUE_SIGN_IN_WITH_TOTP_SETUP ステップは、ユーザーがサインインする前に TOTP をセットアップする必要があることを示します。このステップは TOTPSetupDetails 型の関連値を返し、Microsoft Authenticator や Google Authenticator などの認証アプリを設定するために使用する必要があります。TOTPSetupDetails は getSetupURI というヘルパーメソッドを提供しており、ユーザーがインストールした認証アプリを開くためにボタンなどで使用できる URI を生成できます。より高度なユースケースでは、TOTPSetupDetails に含まれる sharedSecret を使って QR コードを生成したり、認証アプリに手動で入力したりすることもできます。
認証アプリがセットアップされると、ユーザーは TOTP コードを生成してライブラリに提供し、サインインプロセスを完了できます。
import { type SignInOutput, confirmSignIn } from '@aws-amplify/auth';
async function handleSignInResult(result: SignInOutput) { switch (result.nextStep.signInStep) { case 'CONTINUE_SIGN_IN_WITH_TOTP_SETUP': { const { totpSetupDetails } = result.nextStep; const appName = 'my_app_name'; const setupUri = totpSetupDetails.getSetupUri(appName); // Open setupUri with an authenticator app // Prompt user to enter OTP code to complete setup break; } }}
// Then, pass the collected OTP code to `confirmSignIn`async function confirmTotpCode(totpCode: string) { const result = await confirmSignIn({ challengeResponse: totpCode });
return handleSignInResult(result);}MFA セットアップ選択でサインインを続行する
次のステップが CONTINUE_SIGN_IN_WITH_MFA_SETUP_SELECTION の場合、ユーザーはセットアップしたい利用可能な MFA メソッドを選択する必要があります。ユーザーがセットアップする MFA メソッドを選択したら、実装は confirmSignIn API に選択した MFA メソッドを渡す必要があります。
Amplify Auth でセットアップのために現在サポートされている MFA タイプは以下の通りです:
TOTPEMAIL
Amplify がユーザーの選択を受け取ると、選択した MFA タイプのセットアップに対応するフォローアップの nextStep を処理することが期待されます:
EMAILが選択された場合、次のステップはCONTINUE_SIGN_IN_WITH_EMAIL_SETUPになります。TOTPが選択された場合、次のステップはCONTINUE_SIGN_IN_WITH_TOTP_SETUPになります。
import { type SignInOutput, confirmSignIn } from '@aws-amplify/auth';
async function handleSignInResult(result: SignInOutput) { switch (result.nextStep.signInStep) { case 'CONTINUE_SIGN_IN_WITH_MFA_SETUP_SELECTION': { const { allowedMFATypes } = result.nextStep; // Present available MFA options to user // Prompt for selection console.log(`There are multiple MFA options available for setup.`); console.log(`Select an MFA type from the allowedMFATypes list.`); break; } }}
type MfaType = 'SMS' | 'TOTP' | 'EMAIL';
async function handleMfaSelection(mfaType: MfaType) { const result = await confirmSignIn({ challengeResponse: mfaType });
return handleSignInResult(result);}パスワードでサインインを確認する
次のステップが CONFIRM_SIGN_IN_WITH_PASSWORD の場合、ユーザーは第一要素認証メソッドとしてパスワードを提供する必要があります。このステップを処理するには、実装でユーザーにパスワードの入力を促す必要があります。ユーザーがパスワードを入力したら、その値を confirmSignIn API に渡してください。
import { type SignInOutput, confirmSignIn } from '@aws-amplify/auth';
async function handleSignInResult(result: SignInOutput) { switch (result.nextStep.signInStep) { case 'CONFIRM_SIGN_IN_WITH_PASSWORD': { // Prompt user to enter their password console.log(`Please enter your password.`); break; } }}
async function confirmWithPassword(password: string) { const result = await confirmSignIn({ challengeResponse: password });
return handleSignInResult(result);}第一要素の選択でサインインを続行する
次のステップが CONTINUE_SIGN_IN_WITH_FIRST_FACTOR_SELECTION の場合、ユーザーは認証のための第一要素メソッドを選択する必要があります。ユーザーがオプションを選択したら、実装は選択したメソッドを confirmSignIn API に渡す必要があります。
Amplify Auth で現在サポートされている第一要素タイプは以下の通りです:
SMS_OTPEMAIL_OTPWEB_AUTHNPASSWORDPASSWORD_SRP
設定やユーザーが以前にセットアップした要素によっては、すべてのオプションが利用可能ではない場合があります。利用可能なオプションのみが availableChallenges に表示されます。
confirmSignIn API を通じて Amplify がユーザーの選択を受け取ると、選択した第一要素タイプに対応するフォローアップの nextStep を処理することが期待されます:
SMS_OTPが選択された場合、次のステップはCONFIRM_SIGN_IN_WITH_SMS_CODEになります。EMAIL_OTPが選択された場合、次のステップはCONFIRM_SIGN_IN_WITH_EMAIL_CODEになります。PASSWORDまたはPASSWORD_SRPが選択された場合、次のステップはCONFIRM_SIGN_IN_WITH_PASSWORDになります。WEB_AUTHNが選択された場合、Amplify Auth はユーザーのデバイスで認証セレモニーを開始します。成功した場合、次のステップはDONEになります。
import { type SignInOutput, confirmSignIn } from '@aws-amplify/auth';
async function handleSignInResult(result: SignInOutput) { switch (result.nextStep.signInStep) { case 'CONTINUE_SIGN_IN_WITH_FIRST_FACTOR_SELECTION': { const { availableChallenges } = result.nextStep; // Present available first factor options to user // Prompt for selection console.log( `There are multiple first factor options available for sign in.`, ); console.log( `Select a first factor type from the availableChallenges list.`, ); break; } }}
async function handleFirstFactorSelection(firstFactorType: string) { const result = await confirmSignIn({ challengeResponse: firstFactorType });
return handleSignInResult(result);}カスタムチャレンジでサインインを確認する
次のステップが CONFIRM_SIGN_IN_WITH_CUSTOM_CHALLENGE の場合、Amplify Auth はカスタム認証チャレンジの完了を待っています。チャレンジは、カスタムサインインフローの一部として設定した AWS Lambda トリガーに基づいています。
例えば、カスタムチャレンジ Lambda がフロントエンドにプロンプトを渡し、ユーザーにシークレットコードの入力を要求する場合があります。
import { type SignInOutput, confirmSignIn } from '@aws-amplify/auth';
async function handleSignInResult(result: SignInOutput) { switch (result.nextStep.signInStep) { case 'CONFIRM_SIGN_IN_WITH_CUSTOM_CHALLENGE': { const params = result.nextStep.additionalInfo; const hint = params.hint!; // Prompt user to enter custom challenge response console.log(hint); // `Enter the secret code` break; } }}このステップを完了するには、ユーザーにカスタムチャレンジの答えを入力するよう促し、その答えを confirmSignIn API に渡す必要があります。
async function confirmCustomChallenge(answer: string) { const result = await confirmSignIn({ challengeResponse: answer });
return handleSignInResult(result);}新しいパスワードでサインインを確認する
次のステップが CONFIRM_SIGN_IN_WITH_NEW_PASSWORD_REQUIRED の場合、Amplify Auth はサインインを進める前にユーザーが新しいパスワードを選択する必要があります。
ユーザーに新しいパスワードを求め、confirmSignIn API に渡してください。
詳細については、サインインおよびパスワード管理のドキュメントをご覧ください。
import { type SignInOutput, confirmSignIn } from '@aws-amplify/auth';
async function handleSignInResult(result: SignInOutput) { switch (result.nextStep.signInStep) { case 'CONFIRM_SIGN_IN_WITH_NEW_PASSWORD_REQUIRED': { // Prompt user to enter a new password console.log(`Please enter a new password.`); break; } }}
async function confirmNewPassword(newPassword: string) { const result = await confirmSignIn({ challengeResponse: newPassword });
return handleSignInResult(result);}パスワードのリセット
次のステップが RESET_PASSWORD の場合、Amplify Auth は続行する前にユーザーがパスワードをリセットする必要があります。
resetPassword API を使用してユーザーをパスワードリセットのフローに案内し、完了したら signIn を呼び出してサインインフローを再開してください。
詳細については、パスワードのリセットのドキュメントをご覧ください。
import { type ResetPasswordOutput, type SignInOutput, resetPassword,} from '@aws-amplify/auth';
async function handleSignInResult(result: SignInOutput) { switch (result.nextStep.signInStep) { case 'RESET_PASSWORD': { const resetPasswordResult = await resetPassword({ username }); // initiate reset password flow await handleResetPasswordResult(resetPasswordResult); break; } }}
async function handleResetPasswordResult( resetPasswordResult: ResetPasswordOutput,) { switch (resetPasswordResult.nextStep.resetPasswordStep) { case 'CONFIRM_RESET_PASSWORD_WITH_CODE': { const { codeDeliveryDetails } = resetPasswordResult.nextStep; console.log( `A confirmation code has been sent to ${codeDeliveryDetails.destination}.`, ); console.log( `Please check your ${codeDeliveryDetails.destination} for the code.`, ); break; } case 'DONE': { console.log(`Successfully reset password.`); break; } }}サインアップの確認
次のステップが CONFIRM_SIGN_UP の場合、Amplify Auth は続行する前にユーザーがメールまたは電話番号を確認する必要があります。
resendSignUpCode API を使用して登録済みのメールまたは電話番号に新しいサインアップコードを送信し、その後 confirmSignUp を呼び出してサインアップを完了してください。
詳細については、サインアップのドキュメントをご覧ください。
import { type SignInOutput, confirmSignUp, resendSignUpCode,} from '@aws-amplify/auth';
async function handleSignInResult(result: SignInOutput) { switch (result.nextStep.signInStep) { case 'CONFIRM_SIGN_UP': { // Resend sign up code to the registered user const { destination, deliveryMedium } = await resendSignUpCode({ username, }); console.log(`A confirmation code has been sent to ${destination}.`); console.log(`Please check your ${deliveryMedium} for the code.`); break; } }}
async function handleConfirmSignUp(username: string, confirmationCode: string) { await confirmSignUp({ username, confirmationCode, });}サインアップが確認されたら、signIn を再度呼び出してサインインフローを再開してください。
完了
次のステップが DONE の場合、サインインフローは完了し、ユーザーは正常に認証されています。
便宜上、SignInResult には isSignedIn プロパティも提供されており、次のステップが DONE の場合は true になります。
import { type SignInOutput } from '@aws-amplify/auth';
async function handleSignInResult(result: SignInOutput) { switch (result.nextStep.signInStep) { case 'DONE': { // `result.isSignedIn` is `true` console.log(`Sign in is complete.`); break; } }}