Auth0のアップデート

こんにちは、樋口です。
先日9月24日にAuth0についてのアップデートが発表されました。

TL;DR:

• Our free plan now includes:
  • 25,000 MAUs so you can scale.
  • Unlimited1 Okta Connections & Unlimited1 Social Connections so users can easily access your app.
  • A custom domain so you can fully brand your authentication.
  • And more…
• Our paid plans now include:
  • 10 Organizations on B2C Plans and Unlimited on B2B Plans so you can better manage your customers and partners.
  • Increased MFA offerings so you can mitigate the growing threat of AI-based attacks.
  • The ability to get up to 15 Enterprise Connections in B2B Pro via add-ons, so you get more seamless integration across apps.
  • And more…

(引用: Level Up: Auth0 Plans Just Got an Upgrade| Auth0 Blog)

詳細は上記の公式ブログの通りですが、free plan, paid planそれぞれでできることが増えました。
例えば今までB2C EssentialではPro MFAが、B2B EssentialではCustom Signup/Loginがそれぞれ使えるようになりました。またそれぞれのPlanで使えるActionsとFormsの数が増えているようです。

Auth0 FormsがGAに

そのFormsですが、少し前の9月17日の記事ではAuth0 FormsがGA(Generally Available)になると発表されました。
(参考: Auth0 Forms Is Now Generally Available! | Auth0 Blog)
今年の夏頃にはEarly Accessとしてコンソールに現れていることは薄々気付いていましたが、今回無事GAとなったということでテストしてみました。Auth0はRulesとHooksの廃止をすでに発表し現在はActionsの利用を推奨しているように、このような組み込み型のワークフローに注力しているようです。このFormsも触ったことがないままでは取り残されそうですので、GAとなったこの機会に実装してみることにしました。

Formsは以下のように説明されています。

Auth0 Forms is a new feature of the Auth0 identity platform that allows you to use a visual editor to add custom steps and business logic to your authentication flow. You can now create customizable forms to collect user information that you can conditionally trigger when your users go through the login and authentication flow you’ve designed for your app.

(引用: Auth0 Forms Is Now Generally Available! | Auth0 Blog)

ビジュアルエディタを用いて簡単にフォームを作ることができ、サインアップやログインのフローに組み込むことができます。Progressive Profiling や ポリシーへの同意のような、これまでは外部のフォームにリダイレクトして実装するしかなかったものを簡単にAuth0の認証フローの中に組み込めるようになるようです。確かにFormsがActionsの中に入っていることも納得できますね。

と、書きましたが恥ずかしながらProgressive Profilingについてはっきりと説明できなかったので調べてみました。
これまたAuth0がとても詳しく説明してくれていました。
(参考: Progressive Profiling: Vital Info from Happy Customers | Auth0 Blog)
特にBtoCのサービスにおいては、ユーザーのサインアップ時に多くの情報を求めるとそれを埋めるのが面倒だと思ったユーザーが離脱してしまうようです。ユーザーがサービスの利用をするにつれて段階的に必要な情報を集めていくことでこのような問題を回避できます。
このブログが2020年に書かれ、今回のFormsのユースケースとしても推しているということからも、Auth0はこのProgressive Profilingをユーザー体験の観点からも重視していることが感じられました。

Progressive Profilingを実装してみる

それでは早速Formsを組み込んでみようと思います。
公式のドキュメントの中には3つのUse Casesが書かれていたり、コンソールで作成しようとするとtemplateもあったりします。

今回はせっかくProgressive Profilingについて言及したのでそのユースケースを実装してみます。
(参考: Use Cases: Configure a progressive profile form using Forms | Auth0 Docs)
Auth0のバージョンアップが活発なせいか、ドキュメントとダッシュボードが少し異なっているところもあったので参考になれば幸いです。

事前準備

まず事前準備として Machine-to-Machine Applicationを作成し、必要な権限を与えておきます。
作成した Machine-to-Machine Applicationのcredentials(Domain, Client ID, Client Secret)をvault connectionsに保存しておきます。Vaultでは認証情報をvault connectionsとして保管しておくことができます。Formsでは先ほど作成したMachine-to-Machine Applicationの認証情報を用いるため保存する必要があります。
Auth0のダッシュボードからActionsの中にあるFormsを開き、左上のテナント名をクリックすると “Vault” が表示されるのでここから追加することが可能です。もちろんここにはAuth0以外の認証情報を保管することもできます。

Formsを作る

今回は “Start from scratch” でゼロから作ってみます。まずFormを作ると以下のように “Start” と “Ending screen” の間に “Step” がある画面が開きます。

Formsはこの3種類と “Router”, “Flow” の計5種類のnodeから構成されます。詳細はこちらのドキュメント(Introduction to Forms | Auth0 Docs)が参考になりますが、“Step” node でユーザーがデータを入力するフォームを構成することができます。

今回は会社名と役職を収集したいので、以下のように設定しました。

• Textフィールドを追加し、IDをcompany_name
• Textフィールドを追加し、IDをjob_title
  Labelは日本語の文言に、それ以外はRich textのブロックを追加して説明文を追加しました。

続いて “Flow” nodeを “Step” nodeの後ろに追加します。先ほどの画面下部のFlowをクリックし、右側のメニューからCreate a new flowをクリックします。今回はユーザーから追加で情報を取得することが目的なのでNameをUpdate user_metadataとでもしておきます。Flow nodeが完成したら下図のようにStepとEnding Screenの間に挟んでPublishを押して保存します。

Flowsの設定

次にこのユーザー情報の追加のアクションをフローに組み込みます。画面上部のFlowタブをクリックします。そうすると先ほど作成したUpdate user_metadataというフローが現れるはずです。

ここでStartの下部にある+ボタンをクリックしUpdate userのアクションを追加します。以下の情報を入力します。

• Vault connectionには先ほど作成したMachine to Machine ApplicationのVault connectionを選択
• User IDに{{context.user.user_id}}
• Bodyに以下

  {
    "user_metadata": {
      "job_title": "{{fields.job_title}}",
      "company_name": "{{fields.company_name}}"
    }
  }

を追加します。ここで先ほどのフォームで取得したjob_titleとcompany_nameをuser_metadataと紐付けているようです。Auth0のuser_metadataは非常に便利ですがこのようにもちろんFormとも連携することができ、活用の幅がますます広がりそうです。

ここまでできると、作ったFormをPost LoginのActionでレンダリングするためのコードを取得します。再度Formsの画面に戻り、先ほどまで触っていたEditの右のRenderのタブをクリックします。そうすると以下のようなコードがでてきますのでコピーしておきます。

Actionsに組み込む

Auth0のダッシュボードに戻り、ActionsのLibraryからCreate Action→Build from scratchと進みます。

• Name: Render Progressive Profile Form
• Trigger: Login / Post Login
• Runtime: Node 18(推奨バージョン)
  とします。

ライブラリのコードエディタの内容を下記の内容に書き換えます。ただしFORM_IDは先ほどコピーしたものにしておきましょう。また、このサンプルはログインカウントが2以上で、user_metadataにcompany_nameとjob_titleがない場合に表示されるということになっています。

/**
* @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) => {
  const FORM_ID = 'REPLACE_WITH_YOUR_FORM_ID';

  if (
    event.stats.logins_count > 2 &&
    !event.user.user_metadata.company_name &&
    !event.user.user_metadata.job_title
  ) {
    api.prompt.render(FORM_ID);
  }
}

exports.onContinuePostLogin = async (event, api) => { }

デプロイしてLoginフローに組み込むと完成です！

テストしてみる

実際にログインしてみることにします。私のテストアカウントはすでに2回以上ログインしていますが、user_metadateに上記のようなデータは入っていません。

テストログインを行うと以下のようなフォームが表示されました。データを入力すると問題なくログインできます。

次にユーザーデータを見てみます。Auth0のダッシュボードからUser Management→Usersで当該ユーザを開くと入力した情報がuser_metadataに追加されていました！

今回は非常に単純なケースでテストしてみましたが、Router nodeなどを用いるとさらに複雑なフローも作成できます。このようにAuth0のみで情報を収集できる画面を簡単に作成できます。認証基盤のこのような痒いところに手が届くサービスは非常にありがたいので活用方法を模索していこうと思います。