Zenn
🔒

CognitoでIAM Identity Center(旧SSO)のアカウントを利用する(Amplify)

2023/08/29に公開
AWS
React
Amplify
#
sso
tech

AmplifyのAuthメソッドをオーバーライドします。

amplify override auth

作成されたoverride.tsを下記のように変更します。

override.ts
import { AmplifyAuthCognitoStackTemplate } from "@aws-amplify/cli-extensibility-helper";

export function override(resources: AmplifyAuthCognitoStackTemplate) {
  resources.addCfnResource(
    {
      type: "AWS::Cognito::UserPoolIdentityProvider",
      properties: {
        ProviderName: "AWSSSO",
        ProviderType: "SAML",
        UserPoolId: resources.userPool.ref,
        AttributeMapping: {
          email:
            "http://schemas.xmlsoap.org/ws/2005/05/identity/claims/emailaddress",
        },
        ProviderDetails: {
          MetadataURL:
            "IAM Identity CenterのメタデータURL",
        },
      },
    },
    "SAML"
  );

  resources.addCfnResource(
    {
      type: "AWS::Cognito::UserPoolDomain",
      properties: {
        Domain: "ユーザープールに設定したいドメイン名(末尾に.auth.<リージョン名>.amazoncognito.comが付与されます。)",
        UserPoolId: resources.userPool.ref,
      },
    },
    "UserPoolDomain"
  );

  resources.userPoolClientWeb.callbackUrLs = [
    "Amplifyのドメイン(サインインページのパス)",
  ];
  resources.userPoolClientWeb.logoutUrLs = [
    "Amplifyのドメイン(サインアウトページのパス)",
  ];
  resources.userPoolClientWeb.supportedIdentityProviders = ["AWSSSO"];
  resources.userPoolClientWeb.allowedOAuthFlows = ["code"];
  resources.userPoolClientWeb.allowedOAuthFlowsUserPoolClient = true;
  resources.userPoolClientWeb.allowedOAuthScopes = [
    "openid",
    "email",
    "phone",
    "aws.cognito.signin.user.admin",
    "profile",
  ];
}

変更したら、一度プッシュ

amplify push



オーバーライドに成功したらフロントエンドの aws-exports.js を読み込みするコードに oauth の設定を追記します。

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

Amplify.configure({
  ...awsconfig,
  oauth: {
    domain:
      "ユーザープールのドメイン（******.auth.<リージョン名>.amazoncognito.com）",
    scope: [
      "phone",
      "email",
      "openid",
      "profile",
      "aws.cognito.signin.user.admin",
    ],
    redirectSignIn: "Amplifyのドメイン(サインインページのパス)",
    redirectSignOut: "Amplifyのドメイン(サインアウトページのパス)",
    responseType: "code",
  },
});
_app.js
import "@/styles/globals.css";
import React, { useEffect, useState } from "react";
import { Amplify, Auth } from "aws-amplify";
import awsconfig from "../aws-exports";

Amplify.configure({
  ...awsconfig,
  oauth: {
    domain:
      "ユーザープールのドメイン（******.auth.<リージョン名>.amazoncognito.com）",
    scope: [
      "phone",
      "email",
      "openid",
      "profile",
      "aws.cognito.signin.user.admin",
    ],
    redirectSignIn: "Amplifyのドメイン(サインインページのパス)",
    redirectSignOut: "Amplifyのドメイン(サインアウトページのパス)",
    responseType: "code",
  },
});

export default function App({ Component, pageProps }) {
  const [authenticated, setAuthenticated] = useState(false);

  useEffect(() => {
    checkUser();
  }, []);

  const checkUser = async () => {
    try {
      await Auth.currentSession();
      console.log("user is authenticated");
      setAuthenticated(true);
    } catch (error) {
      console.log("user is not authenticated");
      setAuthenticated(false);
      Auth.federatedSignIn(); // AWS SSOのログインページにリダイレクトする
    }
  };

  return (
    <div>{authenticated && <Component {...pageProps} />}</div>
  );
}

これで画面を確認してみてください。

npm run dev

Discussion