Amplify で、既存の Cognito のインポートは可能?🤔コードを交えて解説します👍

Amplify で、既存の Cognito のインポートは可能?🤔コードを交えて解説します👍

こんにちは!

AWS Amplify は、インフラ構築から構築した各リソース接続の SDK 機能まで提供してくれるまさにオールインワンなサービスです。わたし達もインハウスのプロダクト開発から、お客様のサービス開発まで幅広いシーンで利用しています。

バージョンアップが非常に盛んなので、今後期待大の注目フレームワークだと思います。

本記事では、 Amplify で既存の Cognito へ接続が行えるかをまとめていきます。

想定する読者

  • Amplify で Auth を扱っているヒト
  • Amplify とは別で構築した Cognito の扱いに困っているヒト
  • Amplify で AppSync へ接続を行っているヒト

はじめに

Amplify はアップデートが激しい

本記事の内容も、来週になったらもしかしたら変わってしまっている可能性があります。そのため、アップデート情報は常にチェックしておいてください。

(アップデート情報等の確認はこちら:Amplify Community

Amplify と既存 Cognito の連携について

Amplify の Auth へのインポートについて

残念ながら、既存 Cognito リソースのインポートについては、現在サポートしていない様子です。今後アップデートのスケジュールなども状況次第だそうです。(AWS の方と話しました)

つまり、既存 Cognito を Amplify CLI で管理することはできません。

コード上の設定で既存リソースを使用することは可能

Amplify.configure にて、Amplify の接続先に既存の Cognito を設定することが可能です。 

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

Amplify.configure({
    Auth: {

        // REQUIRED only for Federated Authentication - 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 Federated Identity Pool Region 
        // Required only if it's different from 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-char alphanumeric string)
        userPoolWebClientId: 'a1b2c3d4e5f6g7h8i9j0k1l2m3',

        // OPTIONAL - Enforce user authentication prior to accessing AWS resources or not
        mandatorySignIn: false,

        // OPTIONAL - Configuration for cookie storage
        // Note: if the secure flag is set to true, then the cookie transmission requires a secure protocol
        cookieStorage: {
        // REQUIRED - Cookie domain (only required if cookieStorage is provided)
            domain: '.yourdomain.com',
        // OPTIONAL - Cookie path
            path: '/',
        // OPTIONAL - Cookie expiration in days
            expires: 365,
        // OPTIONAL - See: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie/SameSite
            sameSite: "strict" | "lax",
        // OPTIONAL - Cookie secure flag
        // Either true or false, indicating if the cookie transmission requires a secure protocol (https).
            secure: true
        },

        // OPTIONAL - customized storage object
        storage: MyStorage,

        // OPTIONAL - Manually set the authentication flow type. Default is 'USER_SRP_AUTH'
        authenticationFlowType: 'USER_PASSWORD_AUTH',

        // OPTIONAL - Manually set key value pairs that can be passed to Cognito Lambda Triggers
        clientMetadata: { myCustomKey: 'myCustomValue' },

         // OPTIONAL - Hosted UI configuration
        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' // or 'token', note that REFRESH token will only be generated when the responseType is code
        }
    }
});

// You can get the current config object
const currentConfig = Auth.configure();

NuxtJSなどの場合には、下記のように設定してあげるのが良いだろうと思います。

nuxt.config.js

module.exports = {
  mode: 'spa', // AmplifyはSSR非対応

  env: {
    auth:{
      identityPoolId: 'XX-XXXX-X:XXXXXXXX-XXXX-1234-abcd-1234567890ab',
      region: 'XX-XXXX-X',
      userPoolId: 'XX-XXXX-X_abcd1234',
      userPoolWebClientId: 'a1b2c3d4e5f6g7h8i9j0k1l2m3',
    }
  },

  plugins: [
    ...
    {src: '@/plugins/amplify.js', mode: 'client'},
    ...
  ],
};

/plugins/amplify.js

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

Amplify.configure({
    Auth: {
      identityPoolId: process.env.identityPoolId,
      region: process.env.region,
      userPoolId: process.env.userPoolId,
      userPoolWebClientId: process.env.userPoolWebClientId,
      ...
    }
});

Amplify.configure(awsconfig)

まとめ

今後のアップデートで、既存 Cognito のインポート機能を対応してくれたら嬉しいですよね。そうなれば、既存プロジェクトへの導入がしやすく、ますます利用のシェアは増えると思います。

Amplifyでサーバーレス開発は、ラーゲイトへご相談ください。