コードエディターを使ってActionを記述する

@auth0/actions NPM パッケージを使用すると、お好みのコードエディターや IDE で、IntelliSense、型チェック、エラーチェックをフルに活用しながら Actions の記述とユニットテストを行えます。

パッケージをインストールする

次のいずれかのパッケージマネージャーを使用してパッケージをインストールします。

NPM
Yarn
Pnpm

パッケージのインストール時に --save-dev を指定すると、開発ツールを補完する開発依存関係であることを示せます。

install-npm.sh

npm install @auth0/actions --save-dev

パッケージのインストール時に --dev を指定すると、開発ツールを補完する開発依存関係であることを示せます。

install-yarn.sh

yarn add @auth0/actions --dev

パッケージのインストール時に --save-dev を指定すると、開発ツールを補完する開発依存関係であることを示せます。

install-pnpm.sh

pnpm add @auth0/actions --save-dev

型定義をインポートする

ご利用の技術に応じて、次のいずれかの方法でTypeScriptの型定義をActionsにインポートします。

JSDocs @import
JSDocs @param
TS types import

既存のJavaScriptコードの構造を変えずにIntelliSenseを利用したい場合は、この方法を使用します。

jsdocs-import.js

/** @import {Event, PostLoginAPI} from "@auth0/actions/post-login/v3" */

/**
* PostLogin フローの実行中に呼び出される Handler です。
*
* @param {Event} event - ユーザーと、そのユーザーが login を行うコンテキストに関する詳細情報。
* @param {PostLoginAPI} api - login の動作を変更するためのメソッドを備えたインターフェイス。
*/
exports.onExecutePostLogin = async (event, api) => {
  // ここにコードを記述します
}

JSDocコメント内でimport文を使用してJavaScriptファイルの型安全性を確保したい場合は、この方法を使用します。

jsdocs-param.js

/**
* PostLogin フローの実行中に呼び出される Handler です。
*
* @param {import('@auth0/actions/post-login/v3').Event} event - ユーザー情報と、そのユーザーが login する際のコンテキストに関する詳細。
* @param {import('@auth0/actions/post-login/v3').PostLoginAPI} api - login の動作を変更するためのメソッドを提供するインターフェイス。
*/
exports.onExecutePostLogin = async (event, api) => {
    // ここにコードを記述します
};

TypeScriptで開発し、完全な型チェックと最新の構文を利用したい場合は、この方法を使用します。

types-import.ts

import type { Event, PostLoginAPI } from '@auth0/actions/post-login/v3';

/**
* PostLogin フローの実行中に呼び出される Handler です。
*
* @param {Event} event - ユーザーと、ログインが行われるコンテキストに関する Details (詳細)。
* @param {PostLoginAPI} api - ログインの動作を変更するメソッドを提供するインターフェース。
*/
exports.onExecutePostLogin = async (event: Event, api: PostLoginAPI) => {
  // ここにコードを記述します
};

import文は、ライブラリ構造を踏まえて、各トリガー名とバージョン番号に基づいて記述する必要があります。次のパターンに従ってください: @auth0/actions/[trigger_name]/[trigger_version]例: @auth0/actions/post-login/v3

ライブラリ構造

@auth0/actions

credentials-exchange

custom-email-provider

custom-phone-provider

custom-token-exchange

event-stream

password-reset-post-challenge

post-change-password

post-login

post-user-registration

pre-user-registration

send-phone-message

プロジェクトを構成する

以下の構成例は、並べて比較できるように、意図的にJavaScriptとTypeScriptの両方で示しています。

JavaScript
TypeScript

package.json で開発依存関係を定義し、Actionの作成時にIntelliSenseの支援を受けられるようにします。

package.json

{
  "name": "actions-npm-example-js",
  "version": "1.0.0",
  "description": "Auth0 Actions npm dependency example using JavaScript",
  "main": "example.js",
  "author": "Auth0",
  "license": "MIT",
  "devDependencies": {
    "@auth0/actions": "^0.33.0"
  }
}

jsconfig.json で開発依存関係を定義し、Actionの作成時にIntelliSenseの支援を受けられるようにします。

jsconfig.json

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "commonjs",
    "checkJs": false,
    "baseUrl": ".",
    "paths": {
      "actions:*": ["src/*"]
    }
  },
  "include": ["src/**/*.js"]
}

package.json で開発依存関係を定義し、Actionの作成時にIntelliSenseの支援を受けられるようにします。

package.json

{
  "name": "actions-npm-example-ts",
  "version": "1.0.0",
  "description": "Auth0 Actions npm dependency example using TypeScript",
  "main": "example.ts",
  "author": "Auth0",
  "license": "MIT",
  "devDependencies": {
    "@auth0/actions": "^0.33.0",
    "@types/node": "22.14.0",
    "typescript": "^5.9.2"
  }
}

tsconfig.json で開発依存関係を定義し、Actionの作成時にIntelliSenseの支援を受けられるようにします。

tsconfig.json

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "NodeNext",
    "moduleResolution": "nodenext",
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "outDir": "dist",
    "declaration": true,
    "sourceMap": true,
    "allowJs": true,
    "checkJs": false,
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "isolatedModules": true,
    "noEmit": true,
    "paths": {
      "actions:*": ["./src/*"]
    }
  },
  "exclude": [
    "node_modules",
    "dist"
  ],
  "include": [
    "**/*.ts"
  ],
  "ts-node": {
    "transpileOnly": true
  }
}

Actionのコードを書く

次のAction例は、Post-Loginフロー中に実行されます。ユーザーにロールが割り当てられているかを確認し、割り当てがなければ api.access.deny() を呼び出します。ロールがある場合は、続けてIDトークンにカスタムクレームを設定します。import文は、外部の型がコードで利用できることを宣言するものです。これにより、エディターが event オブジェクトと api オブジェクトの構造を認識できるようになります。

JavaScript
TypeScript

example.js

/** @import {Event, PostLoginAPI} from "@auth0/actions/post-login/v3" */

const CUSTOM_CLAIM_NAMESPACE = 'https://example.com';

/**
* PostLogin フローの実行中に呼び出される Handler です。
*
* @param {Event} event - ユーザーと、そのユーザーが login する際のコンテキストに関する Details（詳細）。
* @param {PostLoginAPI} api - login の動作を変更するためのメソッドを提供するインターフェイス。
*/
exports.onExecutePostLogin = async (event, api) => {
  const roles = event.authorization?.roles;

  if (roles === undefined || roles.length === 0) {
    api.access.deny('Restricted');
    return;
  }

  api.idToken.setCustomClaim(`${CUSTOM_CLAIM_NAMESPACE}/roles`, roles);
}

example.ts

import type { Event, PostLoginAPI } from '@auth0/actions/post-login/v3';

const CUSTOM_CLAIM_NAMESPACE = 'https://example.com';

/**
* PostLogin フローの実行中に呼び出されるハンドラーです。
*
* @param {Event} event - ユーザーと、ログインが行われるコンテキストに関する詳細情報。
* @param {PostLoginAPI} api - ログインの動作を変更するために使用できるメソッドを持つインターフェース。
*/
exports.onExecutePostLogin = async (event: Event, api: PostLoginAPI) => {
  const roles = event.authorization?.roles;

  if (roles === undefined || roles.length === 0) {
    api.access.deny('Restricted');
    return;
  }

  api.idToken.setCustomClaim(`${CUSTOM_CLAIM_NAMESPACE}/roles`, roles);
};

TypeScriptを使用する場合は、Auth0に導入する前にコードをJavaScriptにコンパイルする必要があります。Auth0 Actionsのランタイムが実行できるのはJavaScriptのみです。導入する前に、TypeScriptコンパイラー (tsc) で .ts ファイルを .js ファイルにトランスパイルしてください。また、DashboardでIntelliSenseを有効にするために、JSDocコメントも含める必要があります。

チェックポイントこれで、ご自身のコードエディターで作成し型チェックまで済ませた、Auth0に導入する準備が整ったActionが完成しました。

ブランドのカスタマイズ

コードをカスタマイズする

サードパーティによるカスタマイズ

コードエディターを使ってActionを記述する

パッケージをインストールする

型定義をインポートする

プロジェクトを構成する

Actionのコードを書く