Amplify Authをセットアップする

amplify import auth

? What type of auth resource do you want to import?
   Cognito User Pool and Identity Pool
   Cognito User Pool only

amplify push

amplify console

import { Amplify, Auth } from 'aws-amplify';
import awsconfig from './aws-exports';
Amplify.configure(awsconfig);

import { Amplify, Auth } from 'aws-amplify';

Amplify.configure({
  Auth: {
    // REQUIRED - フェデレーション認証専用 - Amazon Cognito Identity Pool ID
    identityPoolId: 'XX-XXXX-X:XXXXXXXX-XXXX-1234-abcd-1234567890ab',

    // REQUIRED - Amazon Cognito Region
    region: 'XX-XXXX-X',

    // OPTIONAL - Amazon Cognito フェデレーション Identity Pool Region
    // Amazon Cognito Regionと異なる場合のみ必須です
    identityPoolRegion: 'XX-XXXX-X',

    // OPTIONAL - Amazon Cognito User Pool ID
    userPoolId: 'XX-XXXX-X_abcd1234',

    // OPTIONAL - Amazon Cognito Web Client ID (26文字の英数字文字列)
    userPoolWebClientId: 'a1b2c3d4e5f6g7h8i9j0k1l2m3',

    // OPTIONAL - AWSリソースにアクセスする前にユーザー認証を適用するかどうか
    mandatorySignIn: false,

    // OPTIONAL - Auth.signUpでautoSignInが有効になっている場合に使用されます
    // 'code'はAuth.confirmSignUpに使用され、'link'はメールリンク検証に使用されます
    signUpVerificationMethod: 'code', // 'code' | 'link'

    // OPTIONAL - Cookie ストレージの設定
    // 注：secure フラグがtrueに設定されている場合、Cookie送信にはセキュアプロトコルが必要です
    cookieStorage: {
      // REQUIRED - Cookieドメイン (cookieStorageが提供されている場合のみ必須)
      domain: '.yourdomain.com',
      // OPTIONAL - Cookie パス
      path: '/',
      // OPTIONAL - Cookie有効期限（日数）
      expires: 365,
      // OPTIONAL - 参照: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie/SameSite
      sameSite: 'strict' | 'lax',
      // OPTIONAL - Cookie secure フラグ
      // true または false。Cookie送信がセキュアプロトコル（https）を必要とするかどうかを示します。
      secure: true
    },

    // OPTIONAL - カスタマイズされたストレージオブジェクト
    storage: MyStorage,

    // OPTIONAL - 認証フロータイプを手動で設定します。デフォルトは 'USER_SRP_AUTH'
    authenticationFlowType: 'USER_PASSWORD_AUTH',

    // OPTIONAL - Cognito Lambda Triggersに渡すことができるキー値ペアを手動で設定します
    clientMetadata: { myCustomKey: 'myCustomValue' },

    // OPTIONAL - Hosted UI設定
    oauth: {
      domain: 'your_cognito_domain',
      scope: [
        'phone',
        'email',
        'profile',
        'openid',
        'aws.cognito.signin.user.admin'
      ],
      redirectSignIn: 'http://localhost:3000/',
      redirectSignOut: 'http://localhost:3000/',
      responseType: 'code' // または 'token'。responseTypeが codeの場合のみREFRESHトークンが生成されることに注意してください
    }
  }
});

// 現在の設定オブジェクトを取得できます
const currentConfig = Auth.configure();

npm install aws-amplify@^5 @aws-amplify/ui-vue@^3

<script setup>
  import { Authenticator } from '@aws-amplify/ui-vue';
  import '@aws-amplify/ui-vue/styles.css';

  import { Amplify } from 'aws-amplify';
  import awsconfig from './aws-exports';

  Amplify.configure(awsconfig);
</script>

<template>
  <authenticator>
    <template v-slot="{ user, signOut }">
      <h1>Hello {{ user.username }}!</h1>
      <button @click="signOut">Sign Out</button>
    </template>
  </authenticator>
</template>

npm install aws-amplify@^5 @aws-amplify/ui-angular@^4

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AmplifyAuthenticatorModule } from '@aws-amplify/ui-angular';

import { AppComponent } from './app.component';
import awsconfig from '../aws-exports';

Amplify.configure(awsconfig);

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, AmplifyAuthenticatorModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

@import '~@aws-amplify/ui-angular/theme.css';

<amplify-authenticator>
  <ng-template
    amplifySlot="authenticated"
    let-user="user"
    let-signOut="signOut"
  >
    <h1>Welcome {{ user.username }}!</h1>
    <button (click)="signOut()">Sign Out</button>
  </ng-template>
</amplify-authenticator>