Auth0のActions、Forms、Flow、Vaultの関係性を最低限構成でテストしてみた

2025.08.31

 Auth0のActions、Forms、Flow、Vaultの関係性を最低限構成でテストしてみた はじめに少し前に、Auth0のUniversal LoginにUIも簡単に追加したり、ログインフローをカスタマイズできるForms機能がリリースされました。

全体フローの理解には少し複雑な部分がありまして、今回は最低限の構成で全体のカスタマイズしたログインフローをテストして、理解してみようと思います。
構成図的にはこういう感じです：

 手順最新の Actions/Forms/Flow/Vault を、Save/Publish/Applyなどを忘れずに
 M2M アプリケーションの準備実際にAPIを呼び出す権限はM2Mにあるので、最初はM2Mアプリを作成します：
M2M アプリを作成
使う API の権限をすべて確認
M2M アプリ情報をメモ
API Audience(Identifier) をメモ

メモした情報は、あとで Forms 配下で Vault を作成するときに使います。
 Form、Form-Vault、Form-Flow の作成まずは Form を作る前に Vault を作成します：
ダッシュボードからFormsに移動する
Vault を作成します
先程メモした M2M とAPIの情報をVaultに追加する
情報が正しければ、警告マークなしで Vault が接続済みになるはず。
次に Form を作成します：
Start from scratch から Form を作成
Form編集画面の一番したにあるボタンでFlowを作成
Step と Ending Screen の間に Flow を配置
先程作成した Vault を Flow にアサインする
Edit Flow をクリックして Flow の詳細を編集
USER ID パラメータを追加（添付コードをご参考ください）
BODY にFlowが呼び出される際に変更したい内容を追加する（添付コードをご参考ください）
参考リンク：
https://auth0.com/docs/customize/forms/variables
https://auth0.com/docs/api/management/v2/users/patch-users-by-id
USER ID
{{context.user.user_id}}
Body
{
    "nickname": "Test: Actions -> Forms -> Flow -> Vault -> M2mFullPermissionApp -> UpdateUser"
}
これで Form 周りは一通り完了。
 Action を作成ここでは、さっき作った Form を呼び出して、実際のログインフローに繋げる Action を作る。
ダッシュボードから Actions -> Library に移動
Create Custom Action をクリック
名前を付けて、Login/Post Login を選択（新規サインアップ後は自動ログインされる。また、Form は Post Login でのみ利用可能）。詳細は Restrictions and Limitations を確認
作成した Action のコードを、あなたの Form ID に合わせて修正（添付コードをご参考ください）
続いて Actions -> Triggers の post-login を開く
ほかは外して、Start と Complete の間に今作った Action を配置
/**
* @param {Event} event - Details about the user and the context in which they are logging in.
* @param {PostLoginAPI} api - Interface whose methods can be used to change the behavior of the login.
*/
exports.onExecutePostLogin = async (event, api) => {
  api.prompt.render('your-form-id');
}

/**
* @param {Event} event - Details about the user and the context in which they are logging in.
* @param {PostLoginAPI} api - Interface whose methods can be used to change the behavior of the login.
*/
exports.onContinuePostLogin = async (event, api) => {
  //  Your logic after completing the form
}
 テストサンプルアプリを起動（自分は React SPA サンプルアプリ を使いました）
画面の signup ボタンから登録して、そのままログインまで進む
結果を確認
ちゃんと "nickname": "Test: Actions -> Forms -> Flow -> Vault -> M2mFullPermissionApp -> UpdateUser" になって、全体フローが想定通り動きました。
以上