🛡️

【Auth0 活用】① フロントエンドとバックエンドの役割分担

2025/02/26に公開

Authentication

Auth0

IDaaS

tech

 1. はじめにこんにちは、クラウドエース第三開発部の秋庭です。

今回は Auth0 でのバックエンド・フロントエンド、各 SDK の活用方法についてご紹介します。

前回までの記事で、Google Cloud の IDaaS サービスである Identity Platform の機能について紹介してきました。

今回から、同じ IDaaS サービスとして有名な Auth0 の機能についてこれまでの記事と同じようにご紹介し、比較できればと思います。
これまで作成した Identity Platform の記事の内容を交えて記述している箇所があります。その点ご了承ください。
本記事の対象読者
Auth0 のフロントエンドとバックエンド SDK の役割を知りたい方
すでに Identity Platform など他の IDaaS について知っており、比較するために Auth0 について知りたい方
本記事で取り扱わない内容
Auth0 の基本的な紹介やセットアップ方法
各 SDK の詳細な API 仕様（公式ドキュメントを参照ください）
Identity Platform の情報

過去の記事をご確認ください

参考

・Auth0 Docs

・Auth0 Libraries

 2. 用語本記事で扱う用語について記載します。


用語
説明


SPA SDK
SPA のフロントエンドで使用される SDK です。

Management API SDK
バックエンドで使用される SDK です。認証系と管理系に分かれています。

Backend Service and API SDK
バックエンドで JWT を検証するためのライブラリです。

ユニバーサルログイン
Auth0 にホストされるログインページを経由してログインする方法です。

参考

・Auth0 Libraries

・Auth0 Universal Login

 3. SPA SDK（フロントエンド）でできることAuth0 の SPA SDK では、フロントエンドで以下の機能を提供します。

 ユーザー認証・認証状態の管理Auth0 は、様々な認証方法でのログインを提供しています。

以下が Auth0 が対応しているログイン方法です。
パスワード認証
Google / Facebook / Apple などのフェデレーション ID プロバイダと連携した認証
メール・SMS でのパスワードレス認証
SAML / OIDC 認証
SMS / TOTP 多要素認証（MFA）
SPA SDK を使用することで、それらの認証方法を利用してログインすることができます。

デフォルトでは、Auth0 のホストするユニバーサルログイン画面にリダイレクトしてユーザー認証を行います。

React の SPA SDK では、以下のようにログインを実装することができます。
// src/App.js
import React from "react";
import { useAuth0 } from "@auth0/auth0-react";

function App() {
  const { isLoading, isAuthenticated, error, user, loginWithRedirect, logout } =
    useAuth0();

  if (isLoading) {
    return <div>Loading...</div>;
  }
  if (error) {
    return <div>Oops... {error.message}</div>;
  }

  if (isAuthenticated) {
    return (
      <div>
        Hello {user.name}{" "}
        <button
          onClick={() =>
            logout({ logoutParams: { returnTo: window.location.origin } })
          }
        >
          Log out
        </button>
      </div>
    );
  } else {
    return <button onClick={() => loginWithRedirect()}>Log in</button>;
  }
}

export default App;


ユニバーサルログイン画面
参考

・Authenticate
SPA SDK は React, Vue, Angular など、フレームワークごとに用意されており、構成に適した SDK を使用することができます。
React 向けの SPA SDK では、以下のように Auth0Provider が提供されています。

Identity Platform ではこういった Provider などは自作する必要がありました。
import React from "react";
import { createRoot } from "react-dom/client";
import { Auth0Provider } from "@auth0/auth0-react";
import App from "./App";

const root = createRoot(document.getElementById("root"));

root.render(
  <Auth0Provider
    domain="{yourDomain}"
    clientId="{yourClientId}"
    authorizationParams={{
      redirect_uri: window.location.origin,
    }}
  >
    <App />
  </Auth0Provider>
);
!Auth0 ではデフォルトの場合、Auth0 にリダイレクトしてログインが行われます。

そのため、Identity Platform で行っていたように、メールパスワードログインとソーシャルログインで別々に実装を行う必要がありません。
参考

・Auth0 React SDK
SPA SDK では、ユーザー認証後にアクセストークンを取得し、それをクライアント内で管理します。

保存先は、memory か localStorage を選択できます。

デフォルトは memory となっており、インメモリに保存されています。
!Auth0 では、最も安全な方法として、トークンをブラウザのメモリに保存することを推奨しています。

インメモリ方式は、ページ更新やブラウザータブにまたがる永続性を提供しない点に注意が必要です。
参考

・Token Storage

 ユーザー情報の取得・管理認証後、ユーザーのプロフィール情報を取得することができます。
import { useAuth0 } from "@auth0/auth0-react";

const UserProfile = () => {
  const { user, isAuthenticated, isLoading } = useAuth0();

  if (isLoading) return <div>Loading...</div>;
  if (!isAuthenticated) return <div>未ログイン</div>;

  return (
    <div>
      <h2>{user.name}</h2>
      <p>{user.email}</p>
    </div>
  );
};
一部のユーザー情報はクライアントサイドからでも変更可能ですが、パスワードの設定はクライアントサイドからはできないようです。

ユニバーサルログイン画面から、パスワードの再設定を行うことは可能です。







ユニバーサルログイン画面


パスワード再設定画面


参考

・Get Management API Access Tokens for Single-Page Applications

 その他Auth0 は、Identity Platform と同様にパスワードポリシーが設定できます。

Identity Platform では、クライアントサイドの SDK からパスワードがポリシーに適合しているか判断が可能でした。

Auth0 では、ユニバーサルログイン画面でのサインアップ時にパスワードポリシーに照合することが可能です。






サインアップ時のパスワードポリシーとの照合



 4. Management API SDK（バックエンド）でできることManagement API SDK は、Authentication API と Management API を実行するクライアントに分かれている構成になっています。

Go の Management API SDK では、それぞれサブパッケージとして提供されています。

ここでは Go での SDK を例に挙げますが、どの言語の SDK でも、2 つの API を扱う構成は同じです。

 認証系サブパッケージで出来ることAuthentication サブパッケージは、Authentication API を実行するための SDK です。
主に以下の処理をバックエンドで行うことが出来ます。
ログイン
ログアウト
サインアップ
MFA OAuth の処理
パスワードレスログインやパスワード変更のメール送信
デフォルトでのログインはクライアントサイドのユニバーサルログインで行われるため、Authentication API を使用してログインを実装する必要はありません。

カスタマイズされた認証操作が必要な場合に、バックエンドで SDK を使用して Authentication API を実行します。
参考

・authentication package - github.com/auth0/go-auth0/authentication - Go Packages

・Authentication API Explorer

・Auth0 Universal Login

 管理系サブパッケージで出来ることManagement サブパッケージは、Management API を実行するための SDK となっています。

Management API では、Auth0 のダッシュボードから行えるような操作を API を通して行うことができます。
主に以下のような項目の操作が Management API SDK を使用して行えます。
ブランディング
ユニバーサルログイン画面のカスタマイズ
メールや SMS テンプレートのカスタマイズ

コネクション
連携する外部 ID プロバイダの設定等

テナント
テナント設定

組織（Organization）
コネクションの設定
ユーザーの追加や削除

ユーザー
ユーザー関連の CRUD 操作
リフレッシュトークンの削除

ログ
ログの取得
Stream でのログの取得

ロール
ロールの CRUD 操作
ロールに紐づくユーザーの取得

参考

・Management API

・management package - github.com/auth0/go-auth0/management - Go Packages

・Introduction | Auth0 Management API v2

 5. Backend Service and API SDK（バックエンド）でできることBackend Service and API SDK は、バックエンドでアクセストークンを検証し、リクエストの認証を行う SDK です。

例として、Go では以下のように、go-jwt-middleware を使用してアクセストークンを検証することができます。
package main

import (
	"context"
	"encoding/json"
	"log"
	"net/http"

	"github.com/auth0/go-jwt-middleware/v2"
	"github.com/auth0/go-jwt-middleware/v2/validator"
	jwtmiddleware "github.com/auth0/go-jwt-middleware/v2"
)

var handler = http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
	claims, ok := r.Context().Value(jwtmiddleware.ContextKey{}).(*validator.ValidatedClaims)
	if !ok {
		http.Error(w, "failed to get validated claims", http.StatusInternalServerError)
		return
	}

	payload, err := json.Marshal(claims)
	if err != nil {
		http.Error(w, err.Error(), http.StatusInternalServerError)
		return
	}

	w.Header().Set("Content-Type", "application/json")
	w.Write(payload)
})

func main() {
	keyFunc := func(ctx context.Context) (interface{}, error) {
		// Our token must be signed using this data.
		return []byte("secret"), nil
	}

	// Set up the validator.
	jwtValidator, err := validator.New(
		keyFunc,
		validator.HS256,
		"https://<issuer-url>/",
		[]string{"<audience>"},
	)
	if err != nil {
		log.Fatalf("failed to set up the validator: %v", err)
	}

	// Set up the middleware.
	middleware := jwtmiddleware.New(jwtValidator.ValidateToken)

	http.ListenAndServe("0.0.0.0:3000", middleware.CheckJWT(handler))
}
!本番環境では、RS256 を利用し、Auth0 の JWKS エンドポイントから公開鍵を取得して検証する方法を採用することが推奨されます。
参考
go-jwt-middleware
JSON Web Key Sets

 6. SDK の比較

機能
SPA SDK
Management API SDK
Auth0 Backend Service and API SDK


ユーザー認証
✅️ ※1
✅️
-

ユーザー管理(自分のアカウント)
✅️ (作成 ※1・取得)
❌️ (更新・削除)
✅️
-

ユーザー管理(全ユーザー)
❌️
✅️
-

トークン検証
-
-
✅️

ロール・メタデータの付与 ※2
❌️
✅️
-

Private Key JWT でのログイン ※3
❌️ (JWT を利用してログイン)
❌️ (JWT の作成)
-

メールのカスタマイズ ※4
❌️
✅️
-

!Identity Platform では、API の実行とトークンの検証をバックエンドで使用する SDK が一手に担っていました。

Auth0 では、API の実行が Management API SDK に、トークンの検証が Auth0 Backend Service and API SDK と役割が分かれているので、役割から外れている項目は「-」で表しています。
※1: ユニバーサルログイン画面から可能

※2: トークンに含むことの出来るデータを指します

※3: Identity Platform のカスタムトークンでのログインにあたる機能
!※4: メールや SMS のテンプレートは、カスタムプロバイダを使用していることが前提となる点に注意してください。

メールであれば、Amazon SES などの採用が必要となります。
参考

・Customize Emails
React の Quickstart を行うとログイン -> アクセストークンを使用した API 呼び出しの動作を簡単に確認できます。

Auth0 にログインした状態で Quickstart にアクセスすると、設定値が書き込まれたサンプルがダウンロードできます。
参考

・Auth0 React SDK Quickstarts: Login

 7. まとめAuth0 で利用できる、フロントエンド（SPA SDK）・バックエンド（ManagementSDK, Backend Service and API SDK）の役割を整理しました。

Auth0 の SPA SDK では、React や Vue など、フレームワークごとに SDK が用意されており、とても開発がしやすいと思いました。

Identity Platform はそういったフロントエンドフレームワークごとの SDK の提供はなく、また、mBaaS としてクライアントサイドに機能が集約されていたので、比較することで設計思想の違いも見えてきて興味深いです。

また、設定可能な項目が多くあり、ドキュメントも日本語のものが無いので調査に時間がかかることが多いです。

今回の記事を通して、Auth0 のバックエンドとフロントエンドの SDK の役割が整理され、IDaaS 導入の際の検討の一助になれば幸いです。

ここまで読んでいただき、ありがとうございました。

 IDaaS 関連記事Identity Platform 関連記事

https://zenn.dev/cloud_ace/articles/6d8d1502d3c90f

https://zenn.dev/cloud_ace/articles/9b47b0dab6d3ab

https://zenn.dev/cloud_ace/articles/c65abf3ca87336

https://zenn.dev/cloud_ace/articles/253178c575ded7

https://zenn.dev/cloud_ace/articles/16d08bfe8daef4

用語	説明
SPA SDK	SPA のフロントエンドで使用される SDK です。
Management API SDK	バックエンドで使用される SDK です。認証系と管理系に分かれています。
Backend Service and API SDK	バックエンドで JWT を検証するためのライブラリです。
ユニバーサルログイン	Auth0 にホストされるログインページを経由してログインする方法です。

機能	SPA SDK	Management API SDK	Auth0 Backend Service and API SDK
ユーザー認証	✅️ ※1	✅️	-
ユーザー管理(自分のアカウント)	✅️ (作成 ※1・取得) ❌️ (更新・削除)	✅️	-
ユーザー管理(全ユーザー)	❌️	✅️	-
トークン検証	-	-	✅️
ロール・メタデータの付与 ※2	❌️	✅️	-
Private Key JWT でのログイン ※3	❌️ (JWT を利用してログイン)	❌️ (JWT の作成)	-
メールのカスタマイズ ※4	❌️	✅️	-

1. はじめに

2. 用語

3. SPA SDK（フロントエンド）でできること

ユーザー認証・認証状態の管理

ユーザー情報の取得・管理

その他

4. Management API SDK（バックエンド）でできること

認証系サブパッケージで出来ること

管理系サブパッケージで出来ること

5. Backend Service and API SDK（バックエンド）でできること

6. SDK の比較

7. まとめ

IDaaS 関連記事

Discussion