Auth0でRBAC(Role-Based Access Control)実装時にconsent_requiredエラーが発生してしまう問題の解決 #Auth0JP

Auth0のRBAC実装時に遭遇するエラー

Auth0ではRBAC(Role-Based Access Control)の機能を持っており、ユーザーのアクセストークンに対してPermissionを付与することができます。RBACの詳細については以下の記事を参考にしてください。

Auth0のRBAC(Role-Based Access Control)を使ってAPIのアクセス制御をやってみた

Webアプリへの実装には auth0-spa-js を使っていただく形が良いとされています。

本記事では、RBAC実装時に遭遇した consent_required エラーの解決方法を解説します。

アクセストークン取得時に発生する

アクセストークンを取得する際には以下のようなコードを書きます。

const options = {
  audience: "http://example.com/"
};
const accessToken = await auth0.getTokenSilently(options);
console.log("accessToken", accessToken);

アクセストークンを取得する際のオプションとして、Auth0テナントに登録しているリソースサーバーのIdentityを audience としてセットします。

こうするとアクセストークンが取得できるはず…と思いきや実際に動かしてみると以下のようなエラーが表示されます。

ログイン時にも必要

解決方法は ** audience のオプションをログイン実行時にも指定する** ことです。

例えば以下のコードはAuth0からダウンロードできるサンプルアプリケーション（Vanilla JS）のログイン処理です（public/js/app.js）。

const login = async (targetUrl) => {
  try {
    console.log("Logging in", targetUrl);

    const options = {
      redirect_uri: window.location.origin,
      audience: 'https://example.com'
    };

    if (targetUrl) {
      options.appState = { targetUrl };
    }

    await auth0.loginWithRedirect(options);
  } catch (err) {
    console.log("Log in failed", err);
  }
};

このようにすることで、サンプルアプリケーションへのログインを実行すると、無事に取得できるようになります。

こうしなければいけない理由としては、その名の通り同意が求められていない状態でアクセストークンを取得しようとしていたからです。サンプルアプリケーションでは認可がログイン時にしか行われないため、ログイン時にオプションを加えることで同意を求めることが必要です。このようにすることで、ログイン時に同意されたあとにアクセストークンを取得する流れになります。

まとめ

以上、ちょっとしたTipsでした。知らないとプチハマりするところですので、記憶に留めてもらえると幸いです。