Auth0でユーザ作成後に反応させてyouknow側でもユーザを自動で作成する

[notwo]

Post User Registration Flow が使えそうなので、Actionから追加してみる

追加方法

1. 左ペインActions→Libraryから、該当する処理のコードを追加する。例えばauth0のDBにユーザ登録直後に自分のDBに反映させたい場合は、Post User Registrationを選ぶ
2. 左ペインActions→Flowsから、該当する処理のフローを作成する。例えばauth0のDBにユーザ登録直後に自分のDBに反映させたい場合は、Libraryで作成した処理をstartとcompleteの間に挟む

[notwo]

DRFにユーザ登録用のエンドポイントを追加しておいて、auth0から呼び出す syncUserRegistrationという名前でActionsを追加し、auth0のDBにユーザが登録された後に自動でDRFにユーザ登録させる

[notwo]

特にDRF側の修正なしでいけた DRF側のログは以下

[11/Dec/2023 08:16:45] "GET /api/users/?sub=auth0|657646cc1b69345b9279ead2 HTTP/1.1" 200 2
[11/Dec/2023 08:16:45] "OPTIONS /api/users/ HTTP/1.1" 200 0
[11/Dec/2023 08:16:45] "POST /api/users/ HTTP/1.1" 201 139

[notwo]

Actions作成方法

1. 左ペインActions→Libraryを開く
2. Customタブを開く
3. Build CustomからAction名、Trigger、Runtime(Node 18固定でいい)を決めてCreate

[notwo]

Actionsの内容

const axios = require("axios");

/**
* Handler that will be called during the execution of a PostUserRegistration flow.
*
* @param {Event} event - Details about the context and user that has registered.
* @param {PostUserRegistrationAPI} api - Methods and utilities to help change the behavior after a signup.
*/
exports.onExecutePostUserRegistration = async (event, api) => {
  await axios.post("https://you-know-j3fh.onrender.com/api/users", { params: 
    {
      username: event.user.nickname,
      email: event.user.email,
      sub: event.user.user_id
    }}
  );
};

[notwo]

上記は実際には行われておらず、Top.vueの以下コードが実行されていただけだった

      const api = userApi();
      const registerUser = async () => {
        const requestParam: UserRequest = {
          sub: user.value.sub,
          username: user.value.nickname,
          email: user.value.email,
          //email_verified: user.value.email_verified,
          //picture: user.value.picture,
        };
        axios.post(api.createUrl(), requestParam)
          .then((response: AxiosResponse) => {
          })
          .catch((e: AxiosError<ErrorResponse>) => {
            // 何かしらエラーが起きてアカウント登録できていないため、アラート表記の上ログアウトさせる
            logout();
            alert('アカウント登録時に異常が発生しました。お手数ですが、しばらく経ってから再度お試しください。');
          });
      };

      const registerOrUpdate = async () => {
        const response = await axios.get<UserResponse>(api.detailUrl(user.value.sub));
        if (response.data.length === 0) {
          registerUser();
        }
      };

      registerOrUpdate();

Actionsを使わなくとも上記で対応できそうなので、一旦その方向でやってみる Actionsは削除しておく

[notwo]

post user registrationのevent.userからアクセスできるメンバ変数のうち、name, nickname, usernameはundefinedになってしまう こちらのDBのusernameにはemailの@から前を動的に切り取る形でActionsに追記して対処する

[notwo]

最終的なActionsのコード

const axios = require("axios");

/**
* Handler that will be called during the execution of a PostUserRegistration flow.
*
* @param {Event} event - Details about the context and user that has registered.
* @param {PostUserRegistrationAPI} api - Methods and utilities to help change the behavior after a signup.
*/
exports.onExecutePostUserRegistration = async (event, api) => {
  await axios.post("https://you-know-j3fh.onrender.com/api/users/",
    {
      username: String(event.user.email).split('@')[0],
      email: event.user.email,
      sub: event.user.user_id
    }
  );
};

[notwo]

現状、Actions経由で自動で自分のDBにユーザ登録させるまでは出来たが、肝心のログインが出来ていない 左ペインApplicationsのCredentialsタブのAuthentication Methods欄がデフォルトのClient Secret (Post)になっているが、これがNoneだと動く このあたりの挙動について参考になりそうなのが

1. Silent authentication and Token Endpoint Authentication Method
2. Auth0のSilent Authentication (サイレント認証)とRefresh Token Rotation (リフレッシュトークンローテーション)を完全に理解した (い)

そもそも、SettingsタブのApplication PropertiesをSingle Page Applicationに変えたら自動でAuthentication MethodsがNoneになった。設定を変えれば解決した