【React】Auth0でコールバックURLを動的に設定する方法

背景

Auth0では、OAuth 2.0 Security Best Current Practice 25に
則るため、コールバックURLの許可設定（Allowed Callback URL）の
パスにワイルドカードを使用出来ません。
そのため、動的にリダイレクトするようなサイト
(https//example.com/users/?user_id=21など)では、そのまま利用出来ません。

Auth0のFAQでは、コールバックURLからさらにリダイレクトさせることで
この問題を回避する手順が紹介されています。

今回は、Reactの環境で設定した内容を記載します。

概要

コールバックURLを固定し、クエリ部分に初回アクセス時のURLを保持させます。
コールバックURLへのアクセス時にクエリを確認し、その内容にリダイレクトさせます。

画面遷移

①未ログイン状態で、https//example.com/users/?user_id=21　にアクセスし、ログイン画面にリダイレクトされる
②ログイン後、RedirectURL(https//example.com/?pathname=users&user_id=21)に遷移する
③さらにリダイレクトされて、初回アクセス時のURL(https//example.com/users/?user_id=21)にリダイレクトされる

設定内容

Auth0のReactサンプルを元に変更箇所を記載します。
サンプルを元にしているため、少し古い書き方かも知れませんが、ご了承ください。

src/index.js

const onRedirectCallback = (appState) => {

+  const location = useLocation();
+  const {pathname} = qs.parse(location.search, ops);
+  let uri;

// 保持されたURL情報を元に、リダイレクトさせる 
+  if (pathname) {
+    uri = pathname + '?'
+    delete searchParams['pathname'];
+    delete searchParams['code'];
+    delete searchParams['state'];
+    for (const key in searchParams) {
+      uri += key + '=' + searchParams[key] + '&';
+    }
+    uri = uri.slice(0, -1)
+  } else {
+    uri = window.location.pathname;
+  }

  history.push(
-    appState && appState.returnTo ? appState.returnTo : window.location.pathname
+    appState && appState.returnTo ? appState.returnTo : uri
  );
};

// クエリをつけてリダイレクトすることで、URL情報を保持させる
+  const redirectUri = window.location.origin + '?pathname=' + window.location.pathname + '&' + window.location.search.slice(1)
const providerConfig = {
  domain: config.domain,
  clientId: config.clientId,
  ...(config.audience ? { audience: config.audience } : null),
-  redirectUri: window.location.origin,
+  redirectUri: redirectUri,
  onRedirectCallback,
};

最後に

実際の環境ではもう少し処理を追記していますが、大まかな流れは以上になります。
当初Auth0のFAQを確認したときは、複雑な処理が必要になると思いましたが、思ったよりあっさりと実装出来ました。