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

Page updated Dec 3, 2025

Amplify Auth のセットアップ

Amplify Auth は Amazon Cognito により提供されています。Cognito は、ユーザー登録、認証、アカウント復旧、その他の操作を処理する堅牢なユーザーディレクトリサービスです。概念を確認してさらに学ぶ

認証リソースの定義を開始するには、認証リソースファイルを開くか作成します:

amplify/auth/resource.ts
import { defineAuth } from "@aws-amplify/backend"
/**
* Define and configure your auth resource
* @see https://docs.amplify.aws/gen2/build-a-backend/auth
*/
export const auth = defineAuth({
loginWith: {
email: true,
},
})

デフォルトでは、認証リソースは email をデフォルトのログインメカニズムとしてスキャフォルドされます。認証リソースを設定して以下でのサインインを許可することもできます:

  • 電話番号
  • 外部プロバイダー(Google、Facebook、Amazon、または Sign in with Apple)

注記: 最低限、ユーザーがアプリにサインインする方法を設定するために loginWith 値を渡す必要があります。値を指定しない場合は、メールとパスワードでのサインインがデフォルトで設定されます。

パスワードレス認証を有効化

パスワードレス認証方法を有効にして、より安全でユーザーフレンドリーなエクスペリエンスを提供できます:

amplify/auth/resource.ts
import { defineAuth } from '@aws-amplify/backend';
export const auth = defineAuth({
loginWith: {
email: {
otpLogin: true // Enable email-based one-time passwords
}
}
});

パスワードレス認証オプションについてさらに学ぶ

認証リソースをデプロイ

認証リソースを選択して定義した後、以下のコマンドを実行して、個人用クラウドサンドボックスにリソースを作成します。

app/src/main/res ディレクトリにまだ "raw" フォルダが存在しない場合は、必ず追加してください。

Terminal
npx ampx sandbox --outputs-out-dir <path_to_app/src/main/res/raw>

デプロイが成功した後、このコマンドは出力ファイル(amplify_outputs.json)も生成します。これにより、フロントエンドアプリがバックエンドリソースに接続できるようになります。バックエンド認証リソースで設定する値は、生成された出力ファイルに設定され、フロントエンドの Authenticator 接続コンポーネント が自動的に設定されます。

アプリケーションコードを認証リソースに接続

サインインフローを作成して正しく実装することは、複雑で時間がかかることがあります。Amplify の Authenticator UI コンポーネントはこれを簡素化し、アプリ全体の認証フローを迅速に構築できるようにします。コンポーネントは amplify/auth/resource.ts の設定とシームレスに連携して、バックエンドリソースに自動的に接続します。

Amplify には React、Vue、Angular、React Native、Swift、Android、Flutter 向けの事前構築 UI コンポーネントがあります。このガイドでは、Web アプリケーション向けのコンポーネントに焦点を当てています。

compileSdk バージョンが 34 以上であることを確認してください。

Authenticator コンポーネントは Jetpack Compose を使用して構築されています。アプリの build.gradle ファイルの android セクションに以下を追加することで Jetpack Compose を有効にします:

app/build.gradle.kts
compileOptions {
// Support for modern Java features
isCoreLibraryDesugaringEnabled = true
}
buildFeatures {
compose = true
}
composeOptions {
kotlinCompilerExtensionVersion = "1.2.0"
}
dependencies {
coreLibraryDesugaring("com.android.tools:desugar_jdk_libs:ANDROID_DESUGAR_VERSION")
}

以下の依存関係をアプリの build.gradle.kts ファイルに追加して、プロンプトが表示されたら「Sync Now」をクリックします:

app/build.gradle.kts
dependencies {
implementation("com.amplifyframework.ui:authenticator:ANDROID_AUTHENTICATOR_VERSION")
}

Amplify.configure 関数を呼び出す前に、コンソールから amplify_outputs.json ファイルをダウンロードするか、以下のコマンドで生成してください:

Terminal
npx ampx generate outputs --app-id <app-id> --branch main --out-dir app/src/main/res/raw

次に、生成またはダウンロードしたファイルが Android プロジェクトの適切なリソースディレクトリ(例えば app/src/main/res/raw)にあることを確認します。そうしないと、アプリケーションがコンパイルできなくなります。

MyAmplifyApp.kt
import android.app.Application
import android.util.Log
import com.amplifyframework.AmplifyException
import com.amplifyframework.auth.cognito.AWSCognitoAuthPlugin
import com.amplifyframework.core.Amplify
import com.amplifyframework.core.configuration.AmplifyOutputs
class MyAmplifyApp: Application() {
override fun onCreate() {
super.onCreate()
try {
Amplify.addPlugin(AWSCognitoAuthPlugin())
Amplify.configure(AmplifyOutputs(R.raw.amplify_outputs), applicationContext)
Log.i("MyAmplifyApp", "Initialized Amplify")
} catch (error: AmplifyException) {
Log.e("MyAmplifyApp", "Could not initialize Amplify", error)
}
}
}

最後に、MainActivity.kt ファイルを更新して Amplify UI コンポーネントを使用します:

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.Button
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import com.amplifyframework.core.Amplify
import com.amplifyframework.ui.authenticator.ui.Authenticator
import <your-package-name>.ui.theme.MyAmplifyAppTheme
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
MyAmplifyAppTheme {
// A surface container using the 'background' color from the theme
Surface(
modifier = Modifier.fillMaxSize(),
color = MaterialTheme.colorScheme.background
) {
Authenticator { state ->
Column {
Text(
text = "Hello ${state.user.username}!",
)
Button(onClick = {
Amplify.Auth.signOut { }
}) {
Text(text = "Sign Out")
}
}
}
}
}
}
}
}

Authenticator コンポーネントをアプリに追加したら、サインアップ、サインイン、サインアウト機能をテストできます。また Authenticator 接続コンポーネントをカスタマイズ して、必要に応じて色とスタイルを調整することもできます。

次のステップ

Amplify アプリでメールとパスワードを使用した認証のセットアップが完了しました。さらに機能を追加したい場合は、以下について学ぶことをお勧めします: