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

Page updated Mar 26, 2026

サインイン

Amplify は、Amplify Auth などのバックエンドリソースと対話できるクライアントライブラリを提供しています。

フロントエンドアプリケーションで Amplify Auth を使い始める最も手軽な方法は、カスタマイズ可能な UI と完全な認証フローを提供する Authenticator コンポーネントを使用することです。

signIn API の使用

import { signIn } from 'aws-amplify/auth'
await signIn({
username: "hello@mycompany.com",
password: "hunter2",
})

signIn API のレスポンスには nextStep プロパティが含まれており、さらなるアクションが必要かどうかを判断するために使用できます。次のステップが返される可能性があります:

次のステップ説明
CONFIRM_SIGN_IN_WITH_NEW_PASSWORD_REQUIREDユーザーは一時パスワードで作成されており、新しいパスワードを設定する必要があります。confirmSignIn でプロセスを完了してください。
CONFIRM_SIGN_IN_WITH_CUSTOM_CHALLENGEサインインはカスタムチャレンジレスポンスで確認する必要があります。confirmSignIn でプロセスを完了してください。
CONFIRM_SIGN_IN_WITH_TOTP_CODEサインインはユーザーからの TOTP コードで確認する必要があります。confirmSignIn でプロセスを完了してください。
CONFIRM_SIGN_IN_WITH_SMS_CODEサインインはユーザーからの SMS コードで確認する必要があります。confirmSignIn でプロセスを完了してください。
CONFIRM_SIGN_IN_WITH_EMAIL_CODEサインインはユーザーからの EMAIL コードで確認する必要があります。confirmSignIn でプロセスを完了してください。
CONFIRM_SIGN_IN_WITH_PASSWORDサインインはユーザーからのパスワードで確認する必要があります。confirmSignIn でプロセスを完了してください。
CONTINUE_SIGN_IN_WITH_FIRST_FACTOR_SELECTIONユーザーは最初の要素認証のモードを選択する必要があります。confirmSignInchallengeResponse フィールドに希望するモードを渡してプロセスを完了してください。
CONTINUE_SIGN_IN_WITH_MFA_SELECTIONユーザーはサインイン前に MFA 確認のモードを選択する必要があります。confirmSignIn でプロセスを完了してください。
CONTINUE_SIGN_IN_WITH_MFA_SETUP_SELECTIONユーザーはセットアップする MFA 確認のモードを選択する必要があります。confirmSignIn"EMAIL" または "TOTP" を渡してプロセスを完了してください。
CONTINUE_SIGN_IN_WITH_TOTP_SETUPTOTP セットアッププロセスを続行する必要があります。confirmSignIn でプロセスを完了してください。
CONTINUE_SIGN_IN_WITH_EMAIL_SETUPEMAIL セットアッププロセスを続行する必要があります。有効なメールアドレスを confirmSignIn に渡してプロセスを完了してください。
RESET_PASSWORDユーザーは resetPassword を使用してパスワードをリセットする必要があります。
CONFIRM_SIGN_UPユーザーはサインアップフローを完全に完了しておらず、confirmSignUp で確認する必要があります。
DONEサインインプロセスが完了しました。

返される可能性がある MFA ステップの処理の詳細については、多要素認証を参照してください。

実践的な例

src/App.tsx
import type { FormEvent } from "react"
import { Amplify } from "aws-amplify"
import { signIn } from "aws-amplify/auth"
import outputs from "../amplify_outputs.json"
Amplify.configure(outputs)
interface SignInFormElements extends HTMLFormControlsCollection {
email: HTMLInputElement
password: HTMLInputElement
}
interface SignInForm extends HTMLFormElement {
readonly elements: SignInFormElements
}
export default function App() {
async function handleSubmit(event: FormEvent<SignInForm>) {
event.preventDefault()
const form = event.currentTarget
// ... validate inputs
await signIn({
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 MFA が有効になっている場合、Cognito はユーザーに代わってメッセージを送信します。メールメッセージと SMS メッセージは、ユーザーがそれぞれメールアドレスと電話番号の属性を持っている必要があります。メール MFA または SMS MFA を使用する場合は、これらの属性をユーザープールで必須に設定することをお勧めします。これらの属性が必須の場合、ユーザーはサインアッププロセスを完了する前にこれらの情報を提供する必要があります。

MFA を必須に設定し、複数の認証要素を有効にした場合、Cognito は新しいユーザーに使用する MFA 要素を選択するよう促します。SMS を選択するには電話番号が必要で、メール MFA を選択するにはメールアドレスが必要です。

利用可能なメッセージベースの MFA に必要な属性が定義されていないユーザーがいる場合、Cognito は TOTP のセットアップを促します。

バックエンド認証リソースで MFA を有効にする方法の詳細については、多要素認証のドキュメントを参照してください。

サインインの確認

サインイン後、次のいずれかのタイプの nextStep がサインイン結果として返されます。ユーザーのレスポンスを収集し、confirmSignIn API に渡してサインインフローを完了してください。

次のステップ説明
CONFIRM_SIGN_IN_WITH_TOTP_CODEサインインはユーザーからの TOTP コードで確認する必要があります。confirmSignIn でプロセスを完了してください。
CONFIRM_SIGN_IN_WITH_SMS_CODEサインインはユーザーからの SMS コードで確認する必要があります。confirmSignIn でプロセスを完了してください。
CONFIRM_SIGN_IN_WITH_EMAIL_CODEサインインはユーザーからの EMAIL コードで確認する必要があります。confirmSignIn でプロセスを完了してください。
CONFIRM_SIGN_IN_WITH_PASSWORDサインインはユーザーからのパスワードで確認する必要があります。confirmSignIn でプロセスを完了してください。
CONTINUE_SIGN_IN_WITH_FIRST_FACTOR_SELECTIONユーザーは最初の要素認証のモードを選択する必要があります。confirmSignInchallengeResponse フィールドに希望するモードを渡してプロセスを完了してください。
CONTINUE_SIGN_IN_WITH_MFA_SELECTIONユーザーはサインイン前に MFA 確認のモードを選択する必要があります。confirmSignIn でプロセスを完了してください。
CONTINUE_SIGN_IN_WITH_MFA_SETUP_SELECTIONユーザーはセットアップする MFA 確認のモードを選択する必要があります。confirmSignIn"EMAIL" または "TOTP" を渡してプロセスを完了してください。
CONTINUE_SIGN_IN_WITH_TOTP_SETUPTOTP セットアッププロセスを続行する必要があります。confirmSignIn でプロセスを完了してください。
CONTINUE_SIGN_IN_WITH_EMAIL_SETUPEMAIL セットアッププロセスを続行する必要があります。有効なメールアドレスを confirmSignIn に渡してプロセスを完了してください。
src/main.ts
import { confirmSignIn, 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",
});
}

注意: Amplify 認証フローは、ページセッションのライフスパン全体にわたって関連するセッションデータを保持します。これにより、ログインページからサインイン確認ページへのリダイレクトなど、マルチページアプリケーションでのページ全体のリフレッシュ後でも confirmSignIn API を活用できます。

外部 ID プロバイダーでサインイン

Google などの外部 ID プロバイダーを使用してサインインするには、signInWithRedirect 関数を使用します。

Amplify で外部 ID プロバイダーを設定するガイダンスについては、外部 ID プロバイダーを参照してください。

import { signInWithRedirect } from "aws-amplify/auth"
signInWithRedirect({ provider: "Google" })

注意: signInWithRedirect に引数を渡さない場合、ユーザーは Cognito Hosted UI にリダイレクトされますが、カスタマイズのサポートは限定的です。

また、認証リソースに OIDC または SAML ベースの ID プロバイダーを設定している場合は、signInWithRedirect で「custom」プロバイダーを指定できます:

import { signInWithRedirect } from "aws-amplify/auth"
signInWithRedirect({ provider: {
custom: "MyOidcProvider"
}})

自動サインイン

autoSignIn API は、signUp API によって事前に有効にされていた場合、次のいずれかのケースが完了した後にユーザーを自動的にサインインします:

  • ユーザーが電話またはメールに送信された確認コードでアカウントを確認した場合(デフォルトオプション)。
  • ユーザーが電話またはメールに送信された確認リンクでアカウントを確認した場合。このオプションを有効にするには、Amazon Cognito コンソールにアクセスし、ユーザープールを探して、Messaging タブに移動し、Verification message オプション内の link モードを有効にする必要があります。最後に、Auth 設定の Cognito オプション内で signUpVerificationMethodlink として定義する必要があります。
src/main.ts
import { autoSignIn } from 'aws-amplify/auth';
await autoSignIn();

注意: MFA が有効な場合、ユーザーはサインアップと後続のサインインフローを進めるために OTP を入力する必要がある複数の連続したステップが表示される場合があります。この要件は USER_AUTH フローを使用する場合には存在しません。

パスワードレス方式でサインイン

アプリケーションのユーザーはパスワードレス方式でサインインすることもできます。さまざまなパスワードレス認証フローのセットアップ方法を含む詳細については、パスワードレスのコンセプトページを参照してください。

SMS OTP

SMS OTP を使用したパスワードレス認証フローを開始するには、signIn API を呼び出す際に preferredChallenge として SMS_OTP を渡します。

const { nextStep: signInNextStep } = await signIn({
username: '+15551234567',
options: {
authFlowType: 'USER_AUTH',
preferredChallenge: 'SMS_OTP',
},
});
if (signInNextStep.signInStep === 'CONFIRM_SIGN_IN_WITH_SMS_CODE') {
// prompt user for otp code delivered via SMS
const { nextStep: confirmSignInNextStep } = await confirmSignIn({
challengeResponse: '123456',
});
if (confirmSignInNextStep.signInStep === 'DONE') {
console.log('Sign in successful!');
}
}

Email OTP

メール OTP を使用したパスワードレス認証フローを開始するには、signIn API を呼び出す際に preferredChallenge として EMAIL_OTP を渡します。

const { nextStep: signInNextStep } = await signIn({
username: 'hello@example.com',
options: {
authFlowType: 'USER_AUTH',
preferredChallenge: 'EMAIL_OTP',
},
});
if (signInNextStep.signInStep === 'CONFIRM_SIGN_IN_WITH_EMAIL_CODE') {
// prompt user for otp code delivered via email
const { nextStep: confirmSignInNextStep } = await confirmSignIn({
challengeResponse: '123456',
});
if (confirmSignInNextStep.signInStep === 'DONE') {
console.log('Sign in successful!');
}
}

WebAuthn パスキー

WebAuthn 認証情報を使用したパスワードレス認証フローを開始するには、WEB_AUTHNpreferredChallenge として渡します。

const { nextStep: signInNextStep } = await signIn({
username: 'hello@example.com',
options: {
authFlowType: 'USER_AUTH',
preferredChallenge: 'WEB_AUTHN',
},
});
if (signInNextStep.signInStep === 'DONE') {
console.log('Sign in successful!');
}

パスワード

従来のパスワードベースの認証フローを開始するには、preferredChallenge として PASSWORD または PASSWORD_SRP を渡します。

const { nextStep: signInNextStep } = await signIn({
username: 'hello@example.com',
password: 'example-password',
options: {
authFlowType: 'USER_AUTH',
preferredChallenge: 'PASSWORD_SRP', // or 'PASSWORD'
},
});
if (confirmSignInNextStep.signInStep === 'DONE') {
console.log('Sign in successful!');
}

第一要素の選択

preferredChallenge パラメーターを省略して、特定のユーザーに利用可能な第一要素を検出します。これは、ユーザーがサインイン方法を選択できるようにするのに役立ちます。

その後、confirmSignIn API を使用してチャレンジを選択し、関連する認証フローを開始できます。

const { nextStep: signInNextStep } = await signIn({
username: '+15551234567',
options: {
authFlowType: 'USER_AUTH',
},
});
if (
signInNextStep.signInStep === 'CONTINUE_SIGN_IN_WITH_FIRST_FACTOR_SELECTION'
) {
// present user with list of available challenges
console.log(`Available Challenges: ${signInNextStep.availableChallenges}`);
// respond with user selection using `confirmSignIn` API
const { nextStep: nextConfirmSignInStep } = await confirmSignIn({
challengeResponse: 'SMS_OTP', // or 'EMAIL_OTP', 'WEB_AUTHN', 'PASSWORD', 'PASSWORD_SRP'
});
}