Skip to main content
auth0.js は、Auth0 向けのクライアントサイドのJavaScriptライブラリです。ホスト型ログインと埋め込みログインの両方のユースケースに対応しています。この記事では、現行バージョンである v10 を扱います。 auth0.js の完全な API ドキュメントを参照してください。

v9 から v10 への移行

Auth0.js v10 には、CVE-2026-42280 に対するセキュリティ修正と、1 つの互換性のない変更が含まれています。 v9 の API リファレンスが必要な場合は、npm の auth0-js パッケージで使用している v9 のバージョンを選択するか、GitHub 上の v9 のソースコードと変更履歴を参照してください。
Web アプリケーションの埋め込みログインでは、テナントに カスタムドメインを設定していない限り、クロスオリジン認証が使用されます。クロスオリジン認証では、異なるオリジン間で安全な認証トランザクションを可能にするため、サードパーティ Cookie が使用されます。

すぐに使えるサンプル

Auth0.js ライブラリのexample ディレクトリは、そのまますぐに使えるアプリで、Auth0.js をすばやく簡単に試せます。実行するには、次の手順に従ってください。
  1. node をまだインストールしていない場合は、今すぐインストールしてください
  2. このプロジェクトのルートで npm install を実行して、依存関係をダウンロードします
  3. 最後に、このプロジェクトのルートで npm start を実行し、node サーバー上で動作しているアプリ (通常は http://localhost:3000/example) を開きます。

設定と初期化

以下のセクションでは、インストール方法Auth0.js の初期化サインアップログインログアウト などについて説明します。

埋め込みログイン用に Auth0 アプリケーションを設定する

埋め込みログインを実装する場合、ライブラリは非表示の iframe 内でクロスオリジン呼び出しを使用して認証を実行します。これを安全に行えるようにするため、Auth0 はアプリケーションをホストしているドメインを把握しておく必要があります。 そのドメインを Allowed Web Origins フィールドに追加します。このフィールドは、Auth0 Dashboard の Application Settings にあります。

インストール方法

プロジェクトで Auth0.js を使用するには、いくつかの方法があります。ニーズに応じて、以下のいずれかを選択してください。 npm または yarn でインストールします:
auth0-js モジュールをインストールしたら、依存関係も含めてまとめてバンドルするか、次のようにインポートします:
または、CDN 経由でスクリプトを読み込みます。

初期化

以下のように、Auth0 アプリケーションの新しいインスタンスを初期化します。

利用可能なパラメータ

webAuth をインスタンス化する際、options オブジェクトには必須で渡すパラメータが 2 つあり、そのほかに任意のパラメータもあります。 クロックスキューの問題により、The token was issued in the future というエラーが発生することがあります。これを防ぐために、leeway パラメータを使用して ID トークンの有効期限に数秒の猶予を持たせることができます。
スコープ
Auth0.js v10 のデフォルトの scope 値は openid profile email です。
Auth0.js をローカルで実行する場合Auth0.js の初期化時に少なくとも上記のスコープを指定せず、Web サイトを http://localhost または http://127.0.0.1 で実行している場合、getSSOData() メソッドを呼び出すと、ブラウザーのコンソールに次のエラーが表示されます。Consent required. When using getSSOData, the user has to be authenticated with the following scope: openid profile emailこの問題は、アプリケーションを本番環境で実行している場合、または openid profile email スコープを指定している場合には発生しません。詳しくは、ユーザーの同意とサードパーティアプリケーション のドキュメントを参照してください。

ログイン

アプリケーションに必要な認証の種類に応じて、ログイン方法を選択できます。

webAuth.authorize()

authorize() メソッドは、以下の例にあるように、 またはソーシャル接続を通じてユーザーをログインさせるために使用できます。このメソッドは Authentication API の /authorize エンドポイントを呼び出し、options オブジェクトを通じてさまざまなパラメータを受け取れます。 ホスト型ログイン では、/authorize() メソッドを呼び出す必要があります。 webAuth.authorize({//追加のオプションはここに指定できます}); ソーシャル login では、connection パラメータを指定する必要があります。 webAuth.authorize({connection: 'twitter'});

webAuth.popup.authorize()

ポップアップ認証では、popup.authorize メソッドを使用できます。ポップアップ認証は、ホスト型ログインページ内では使用できません。通常、ポップアップ認証はシングルページアプリケーションで使用されます。これは、ページ全体のリダイレクトを行わずに、現在のstateが失われるのを防ぐためです。 ポップアップを使用したデフォルトの認可 (Universal Login) :
また、authorize を使用して popup でソーシャルログインする場合は、次のとおりです。

ポップアップ認証の結果を処理する

ポップアップ認証を使用する場合は、遷移先のページが webAuth.popup.callback メソッドを使って認可結果をコールバックに返せるよう、redirectUri を指定する必要があります。シンプルな実装例は次のとおりです。
理想的なハンドラーには、この最小限の機能だけを持たせるのが望ましいです (つまり、レスポンスを処理するためだけにアプリケーション全体を再読み込みしないようにします) 。 redirectUri を、Auth0 Dashboard のアプリケーション設定ページにあるアプリケーションの Allowed Callback URLs 一覧に追加する必要があります。

webAuth.login()

Web アプリケーションの埋め込みログインでは、テナントにカスタムドメインを設定していない限り、クロスオリジン認証を使用します。クロスオリジン認証では、異なるオリジン間で安全な認証トランザクションを実行できるように、サードパーティ Cookie を使用します。
login メソッドは、/co/authenticate を使用して、データベース接続に対するクロスオリジン認証の埋め込みログインに使用できます。

webAuth.crossOriginVerification()

crossOriginVerification() メソッドは、ブラウザーでサードパーティ Cookie を無効にしているユーザーにクロスオリジン認証を提供する際に役立ちます。使用方法の詳細については、Cross-Origin Authentication をご覧ください。

buildAuthorizeUrl(options)

buildAuthorizeUrl メソッドは、新しいトランザクションを開始するための /authorize URL を構築する際に使用できます。ブラウザベースの (パッシブな) 認証を実装する場合は、このメソッドを使用してください。 state パラメータは、Auth0 からそのまま返される不透明な値です。これは CSRF 攻撃の防止に役立ち、webAuth.authorize() を呼び出さずに自分で URL にリダイレクトする場合は指定する必要があります。詳しくは、State Parameter を参照してください。

組み込み認証でのシングルサインオン

組み込みログインは、アプリケーションが次のアーキテクチャを共有している場合、 (SSO) をサポートします。
  1. SSO を行うアプリケーションは、ファーストパーティアプリケーションである必要があります。サードパーティアプリケーションとの間で組み込みセッションを共有することはサポートされていません。
  2. アプリケーションと Auth0 テナントは、カスタムドメイン を通じてトップレベルドメインを共有している必要があります。従来の Auth0 ドメインは foo.auth0.com 形式ですが、カスタムドメインを使用すると、アプリケーションと Auth0 テナントで同じトップレベルドメインを共有できるため、CSRF 攻撃の防止にも役立ちます。
アーキテクチャがこれらの条件を満たしている場合は、Auth0.js を使用した組み込み SSO が適しています。Universal Login は、複数のドメインにまたがる SSO や、サードパーティアプリケーションとの SSO を、セッションレイヤーを通じて自動的に処理します。また、この 2 つは同じアプリ内で共存させることもできます。たとえば、メインのサインインには Universal Login を使用し、認証要素の組み込み登録やステップアップフローには Auth0.js を使用するといった使い方が可能です。トレードオフを比較するには、ホスト型ログインと埋め込みログイン をご覧ください。

パスワードレスログイン

認証では、ユーザーはメールまたはテキストメッセージでワンタイムパスワードを受け取ってログインできます。このプロセスでは、まずパスワードレス認証を開始してコードを生成し、ユーザーに送信する (またはリンクにコードを含める) 必要があります。その後、検証方法に応じてユーザーの資格情報を受け取ります。たとえば、ユーザーにメールアドレスまたは電話番号と、送信したコードの入力を求めるログイン画面で行えます。また、ユーザーにコードを送る代わりに、パスワードレスリンクとして実装することもできます。この場合、ユーザーはメールまたはテキスト内のリンクをクリックするだけで、そのリンクがあなたのエンドポイントに送られ、同じ検証方法でこのデータが自動的に検証されます (ユーザーが手動でコードを入力する必要はありません) 。 パスワードレス認証を使用するには、redirectUri を指定して Auth0.js を初期化し、responseType: 'token' を設定します。

パスワードレス認証を開始する

Auth0.js でパスワードレス認証を始める最初のステップは、passwordlessStart メソッドです。このメソッドには、options オブジェクトを通じて渡せる複数のパラメータがあります。 パスワードレスのトランザクションを開始するには、任意の phoneNumber パラメータと email パラメータのうち、必ずどちらか一方のみを送信する必要がある点に注意してください。

パスワードレス認証を完了する

コードを送信する場合は、続いてユーザーにそのコードの入力を求める必要があります。コードの処理とユーザーの認証には passwordlessLogin メソッドを使用します。このメソッドには、options オブジェクトで渡せるパラメータがいくつかあります。 passwordlessStart と同様に、パスワードレス認証のトランザクションを検証するには、省略可能な phoneNumberemail のうち、必ずどちらか一方だけを送信する必要があります。 passwordlessLogin を使用するには、WebAuth の初期化時に redirectUriresponseType を指定します。

authResult を取得してユーザー情報を取得する

認証後、ユーザーがアプリケーションにリダイレクトで戻された際に、parseHash メソッドを使って URL のハッシュフラグメントを解析し、Auth0 の認証レスポンスから結果を取得できます。状況に応じて、これをコールバックページで処理してからメインのアプリケーションにリダイレクトすることも、ページ内で処理することもできます。 parseHash メソッドは、次のパラメータを含む options オブジェクトを受け取ります。 parseHash が返す authResult オブジェクトの内容は、使用された認証パラメータによって異なります。次のものが含まれる場合があります。
上記のとおり、client.userInfo メソッドは、返された accessToken を渡して呼び出せます。これにより /userinfo エンドポイントにリクエストが送信され、ユーザー情報を含む user オブジェクトが返されます。形式は以下の例のようになります。
この情報を使って、アプリケーションの要件に応じた別の処理を行うこともできます。たとえば、以下で説明するように、 を使用して、ユーザーのプロファイル情報一式を取得できます。

nonce の使用

デフォルトでは (responseTypeid_token が含まれている場合) 、webAuth.authorize を呼び出すと Auth0.js がランダムな nonce を生成し、それをローカルストレージに保存したうえで、webAuth.parseHash で取り出します。通常はデフォルトの動作でほとんどのケースに対応できますが、ユースケースによっては、開発者が nonce を制御する必要があります。 開発者が生成した nonce を使用する場合は、webAuth.authorizewebAuth.parseHash の両方にオプションとして指定する必要があります。
webAuth.authorize の代わりに webAuth.checkSession を呼び出す場合は、カスタム noncecheckSession のオプションとして指定するだけで済みます。
webAuth.checkSession メソッドは、返された nonce クレームが、オプションで指定したものと一致することを自動的に検証します。

エラーコードと説明

Auth0.js が埋め込みログインで使用される場合、/co/authenticate エンドポイントが使われ、次のエラーが発生することがあります。
エラーの説明は、人が読んで理解できることを意図したものです。説明はコードで解析しないでください。また、内容は随時変更される可能性があります。
さらに、error または error_description プロパティのない、汎用的な 403 エラーが返されることもあります。レスポンスボディには、次のような内容だけが含まれます。 Origin https://test.app is not allowed.

ログアウト

ユーザーをログアウトするには、logout() メソッドを使用します。このメソッドは options オブジェクトを受け取り、次のパラメータを含めることができます。 clientID パラメータが含まれている場合、指定する returnTo URL は、Auth0 Dashboard のアプリケーションの Allowed Logout URLs に登録されている必要があります。一方、clientID パラメータが含まれていない場合は、returnTo URL は Auth0 Dashboard のアカウントレベルの Allowed Logout URLs に登録されている必要があります。

サインアップ

ユーザーをサインアップするには、signup メソッドを使用します。このメソッドは options オブジェクトを受け取り、次のパラメータを含めることができます。 サインアップはデータベース接続に対して行う必要があります。以下に、signup メソッドの例と Form 用のサンプルコードを示します。

checkSession を使用して新しいトークンを取得する

checkSession メソッドを使用すると、ご利用のドメインの Auth0 に対してすでに認証済みのユーザーについて、Auth0 から新しいトークンを取得できます。このメソッドには、通常 authorize に送信する有効な OAuth 2.0 パラメータを任意に指定できます。これらを省略した場合は、Auth0 の初期化時に指定したものが使用されます。 checkSession の呼び出しは、webAuth の初期化時に として指定された API の新しいトークンを取得するために使用できます。
authResult の形式については、AuthResult の抽出とユーザー情報の取得を参照してください。 また、audiencescope を指定すると、webAuth の初期化時に使用したものとは別の API 向けに token を取得することもできます:
checkSession() は、設定済みの ルール をすべてトリガーする点に注意してください。使用する前に、Auth0 Dashboard でルールの内容を確認しておくことをおすすめします。 実際の /authorize へのリダイレクトは iframe 内で行われるため、アプリケーションが再読み込みされたり、アプリケーションの外へリダイレクトされたりすることはありません。 ただし、ブラウザーでサードパーティ Cookie が必ず有効になっている必要があります。そうでない場合、checkSession() は現在のユーザーのセッションにアクセスできません (つまり、ユーザーに何も表示せずに新しいトークンを取得できません) 。また、ユーザーが Safari で ITP を有効にしている 場合も同様です。 認可リクエストの送信元となる URL を、Auth0 Dashboard のアプリケーションの 設定 にある、Auth0アプリケーションの Allowed Web Origins リストに追加することを忘れないでください。
接続がソーシャル接続で、Auth0 の開発用キーを使用している場合、checkSession の呼び出しは常に login_required を返します。

checkSession() を使用したポーリング

複数のアプリケーションにまたがる環境でシングルログアウトが必要な場合 (あるアプリケーションでログアウトしたユーザーを、ほかのアプリケーションでもログアウトさせる必要がある場合) 、アプリケーションを設定して、checkSession() を使って定期的に Auth0 にポーリングし、セッションが存在するかどうかを確認できます。セッションが存在しない場合は、その後、ユーザーをアプリケーションからログアウトさせることができます。同じポーリング方法は、シングルサインオン (SSO) のシナリオでサイレント認証を実装するためにも使用できます。 checkSession() の確認間隔は、今後この呼び出しにレート制限が適用されても問題が起きないよう、少なくとも 15 分空けてください。

パスワードリセットのリクエスト

パスワードリセット機能を実装するには、changePassword メソッドを使用し、connection パラメータと email パラメータを含む options オブジェクトを渡します。
ユーザーは、パスワード再設定用のリンクが記載されたメールを受け取ります。

ユーザー管理

Management API では、異なるプロバイダーに属する別々のユーザーアカウントをリンクまたはリンク解除し、ユーザーのメタデータを更新できます。詳しくは、ユーザーアカウントのリンク を参照してください。 開始するには、まず Management API の呼び出しに使用できる を取得する必要があります。これは、Auth0.js の初期化時に https://{yourDomain}/api/v2/ の audience を指定することで取得できます。この場合、アクセストークン は認証フローの一部として返されます。 カスタムドメイン を使用している場合、Management API の呼び出しには、カスタムドメインではなく Auth0 ドメインを使用して webAuth の新しいコピーをインスタンス化する必要があります。Management API は Auth0 ドメインでのみ動作するためです。 また、checkSession() を使用してこれを行うこともできます: 必要なスコープを明示的に指定する必要があります。要求できるスコープは次のとおりです。
  • read:current_user
  • update:current_user_identities
  • create:current_user_metadata
  • update:current_user_metadata
  • delete:current_user_metadata
  • create:current_user_device_credentials
  • delete:current_user_device_credentials
アクセストークンを取得したら、アカウントのAuth0ドメインとアクセストークンを渡して、新しいauth0.Managementインスタンスを作成できます。

ユーザープロファイルを取得する

ユーザープロファイルデータを取得するには、userId とコールバックをパラメータに指定して getUser() メソッドを使用します。このメソッドはユーザープロファイルを返します。ここで必要な userID は、client.userInfo メソッドで取得したものと同じです。 auth0Manage.getUser(userId, cb);

ユーザープロファイルを更新する

ユーザーのメタデータを更新するには、まず userMetadata オブジェクトを作成し、次に patchUserMetadata メソッドを呼び出して、ユーザーID と作成した userMetadata オブジェクトを渡す必要があります。このオブジェクト内の値は、同じ キー を持つ既存の値を上書きし、ユーザーのメタデータにまだ存在しないものは新たに追加されます。詳しくは、メタデータ を参照してください。 auth0Manage.patchUserMetadata(userId, userMetadata, cb); ユーザーアカウントをリンクすると、ユーザーはどのアカウントからでも認証でき、どのアカウントを使ってもログイン時に同じプロファイルを利用できるようになります。Auth0 はデフォルトですべてのアカウントを別々のプロファイルとして扱うため、ユーザーのアカウントをリンクしたい場合はこの方法を使用します。 linkUser メソッドは 2 つのパラメータを受け取ります。1 つはプライマリの userId、もう 1 つはセカンダリ ユーザーの ID トークン (このアイデンティティでログインした後に取得されるトークン) です。ここでいう user ID は、プライマリ ユーザーアカウントの一意の識別子です。このメソッドを使用する際は、ID をプロバイダーのプレフィックス付きで渡す必要があります。たとえば、auth0|1234567890facebook|1234567890 のように指定します。詳細は ユーザーアカウントのリンク を参照してください。 auth0Manage.linkUser(userId, secondaryUserToken, cb); アカウントをリンクすると、2 つ目のアカウントはユーザーデータベース内に独立したエントリとしては存在しなくなり、プライマリ アカウントの一部としてのみアクセスできるようになります。 アカウントをリンクしても、セカンダリ アカウントのメタデータはプライマリ アカウントのメタデータとマージされません。また、後でリンク解除された場合も、再び分離されたセカンダリ アカウントにプライマリ アカウントのメタデータが保持されることはありません。