Cognitoで複数のコールバック先を指定して別々のページに遷移できるようにしてみた

注意

仕事の関係でCognitoのに複数のコールバック先を指定できないか試したときの覚書です。

背景

とあるWebサービスでCognitoを使ってソーシャルログインで自動的にアカウントを作成できる画面を作っていました。 で、仕様変更でアカウント登録画面が複数になり、アカウント登録の画面それぞれにうまいことコールバックさせる必要が出てきた。

やったこと

Cognito側に複数のコールバック先を先に指定し、それぞれの登録画面用のソーシャルログインの処理を以下のように切り出した。

    Auth.configure({
      Auth: constAuth,
      oauth: {
        ...constOauth,
        redirectSignIn: process.env.REACT_APP_CALLLBACK_URL,
      },
    });

const socialLogin = async (provider: CognitoHostedUIIdentityProvider) => {
    await Auth.federatedSignIn({
      provider,
    });
  };

const anotherSocialLogin = async (provider: CognitoHostedUIIdentityProvider) => {
    Auth.configure({
      Auth: constAuth,
      oauth: {
        ...constOauth,
        redirectSignIn: process.env.REACT_APP_ANOTHER_CALL_BACK_URL,
      },
    });
    await Auth.federatedSignIn({
      provider,
    });
  };

上記のコードでは、それぞれソーシャルログインでコールバック先を切り替えている。

で、あとはコールバック先でソーシャルログイン時に作成されたアカウント情報とかを受け取って、それぞれの画面に遷移させればOK。 その辺はreact-touterのhistoryとか使って前のURLをよしなに比較すればOKな感じです。

参考

ref: Pass "redirectUri" as a parameter to Auth.federatedSignIn #4326