Express アプリケーションにログインを追加する

このガイドでは、express-openid-connect SDK を使用して Auth0 を統合し、認証を追加して、Express.js Web アプリケーションにユーザープロファイル情報を表示する方法を説明します。

@auth0/auth0-express SDK を使用するこの Quickstart の新しい Beta バージョンが利用可能です。まもなくこのガイドに代わる予定です。Beta Quickstart を試す →

AI を使って Auth0 を統合する

Claude Code、Cursor、GitHub Copilot などの AI コーディングアシスタントを使用している場合は、agent skills を使って数分で Auth0 認証を自動的に追加できます。

インストール:

npx skills add auth0/agent-skills --skill auth0

次に、AI アシスタントに以下のように依頼します:

Add Auth0 authentication to my Express app

AI アシスタントが自動的に Auth0 アプリケーションを作成し、資格情報を取得して、express-openid-connect をインストールし、ミドルウェアを設定し、ルートをセットアップします。agent skills の完全なドキュメント →

前提条件: 開始する前に、以下がインストールされていることを確認してください。

• Node.js 18 LTS 以降
• npm 10+ または yarn 1.22+
• jq - Auth0 CLI の設定に必要 (任意)

Express のバージョン互換性: この Quickstart は Express 4.17.0 以降で動作します。

​

はじめに

このガイドでは、express-openid-connect SDK を使用して Express.js の Web アプリケーションに Auth0 を統合し、認証を追加して、ユーザープロファイル情報を表示する方法を紹介します。

---

​

1. 新しいプロジェクトを作成する

Expressアプリケーション用の新しいディレクトリを作成し、Node.jsのプロジェクトを初期化します。

mkdir auth0-express && cd auth0-express

npm init -y

プロジェクトの構成を作成します:

touch index.js .env

---

​

2. Auth0 Express SDKをインストールする

環境変数を管理するため、Express と dotenv と一緒に express-openid-connect をインストールします。

npm install express express-openid-connect dotenv

開発時には、ファイル変更時にサーバーを自動的に再起動できるよう、nodemon をインストールします：

npm install --save-dev nodemon

package.json を更新して、start スクリプトを追加します。

📁 package.json

{
  "name": "auth0-express",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "start": "node index.js",
    "dev": "nodemon index.js"
  },
  "dependencies": {
    "dotenv": "^16.3.1",
    "express": "^4.18.2",
    "express-openid-connect": "^2.17.1"
  },
  "devDependencies": {
    "nodemon": "^3.0.2"
  }
}

---

​

3. Auth0 App を設定する

次に、Auth0 テナントに新しいアプリケーションを作成し、環境変数をプロジェクトに追加します。

CLI コマンドを実行して Auth0 アプリを自動的に設定することも、Auth0 Dashboard から手動で設定することもできます。

CLI

次のシェルコマンドをプロジェクトのルートディレクトリで実行すると、Auth0 アプリケーションが作成され、.env ファイルが生成されます。

Mac

# Auth0 CLI をインストールします（まだインストールしていない場合）
brew tap auth0/auth0-cli && brew install auth0

# Auth0 アプリを設定し、.env ファイルを生成します
auth0 qs setup --app --type regular --framework express --port 3000 --name "My Express App"

このコマンドは次の操作を行います。

1. 認証済みかどうかを確認します (必要に応じてログインを求められます)
2. http://localhost:3000 用に設定された Auth0 従来型Webアプリケーションを作成します
3. ISSUER_BASE_URL、CLIENT_ID、SECRET、BASE_URL を含む .env ファイルを生成します

Dashboard

1. Auth0 Dashboard に移動します
2. アプリケーション → Create Application に移動します
3. アプリケーション名を入力します (例: “My Express App”)
4. 従来型Webアプリケーション を選択し、Create をクリックします
5. 設定 タブで、次のように設定します

Setting	Value
Allowed Callback URLs	http://localhost:3000
Allowed Logout URLs	http://localhost:3000

6. 下にスクロールして 変更を保存 をクリックします
7. Basic Information セクションから Domain と Client ID の値をコピーします

以下の内容で .env ファイルを作成します。

📁 .env

ISSUER_BASE_URL=https://YOUR_AUTH0_DOMAIN
CLIENT_ID=YOUR_CLIENT_ID
SECRET=use-a-long-random-string-at-least-32-characters
BASE_URL=http://localhost:3000

YOUR_AUTH0_DOMAIN は Auth0 テナントのドメイン (例: dev-abc123.us.auth0.com) に、YOUR_CLIENT_ID は Auth0 Dashboard 上のアプリケーションの Client ID に置き換えてください。

セッション暗号化用の安全なシークレットを生成します。

openssl rand -hex 32

出力をコピーし、.env ファイルの SECRET の値として使用します。

---

​

4. ミドルウェアを設定する

Auth0 のミドルウェアを Express アプリケーションに追加します。auth() ミドルウェアはセッション管理を行い、/login、/logout、/callback のルートを自動的に作成します。

📁 index.js

require('dotenv').config();
const express = require('express');
const { auth } = require('express-openid-connect');

const app = express();
const port = process.env.PORT || 3000;

// Auth0 の設定
const config = {
  authRequired: false,      // 公開ルートを許可する
  auth0Logout: true,        // Auth0 の logout エンドポイントを使用する
  secret: process.env.SECRET,
  baseURL: process.env.BASE_URL,
  clientID: process.env.CLIENT_ID,
  issuerBaseURL: process.env.ISSUER_BASE_URL,
};

// 認証ミドルウェアを適用する
app.use(auth(config));

// ホームルート - 公開
app.get('/', (req, res) => {
  res.send(req.oidc.isAuthenticated() ? 'Logged in' : 'Logged out');
});

app.listen(port, () => {
  console.log(`Server running at http://localhost:${port}`);
});

この設定でできること:

• authRequired: false により、認証済み・未認証を問わず、どちらのユーザーもデフォルトでルートにアクセスできます
• auth0Logout: true により、ユーザーはアプリだけでなく Auth0 からもログアウトされます
• ミドルウェアにより、/login、/logout、/callback のルートが自動的に提供されます
• ユーザーセッションは暗号化された Cookie に保存されます

---

​

5. ログイン、ログアウト、プロファイルのルートを作成する

次に、ログイン/ログアウト用のリンクと、認証が必要なプロファイルページを表示するルートを追加します。

📁 index.js

require('dotenv').config();
const express = require('express');
const { auth, requiresAuth } = require('express-openid-connect');

const app = express();
const port = process.env.PORT || 3000;

// Auth0の設定
const config = {
  authRequired: false,
  auth0Logout: true,
  secret: process.env.SECRET,
  baseURL: process.env.BASE_URL,
  clientID: process.env.CLIENT_ID,
  issuerBaseURL: process.env.ISSUER_BASE_URL,
};

// 認証ミドルウェアを適用する
app.use(auth(config));

// ホームルート - ログイン/ログアウトの状態を表示する
app.get('/', (req, res) => {
  const isAuthenticated = req.oidc.isAuthenticated();

  res.send(`
    <html>
      <head>
        <title>Auth0 Express Quickstart</title>
        <style>
          body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; padding: 2rem; max-width: 600px; margin: 0 auto; }
          a { color: #0066cc; text-decoration: none; margin-right: 1rem; }
          a:hover { text-decoration: underline; }
          .status { padding: 1rem; border-radius: 4px; margin: 1rem 0; }
          .logged-in { background: #d4edda; color: #155724; }
          .logged-out { background: #f8d7da; color: #721c24; }
        </style>
      </head>
      <body>
        <h1>Auth0 Express Quickstart</h1>
        <div class="status ${isAuthenticated ? 'logged-in' : 'logged-out'}">
          ${isAuthenticated ? '✓ You are logged in' : '✗ You are logged out'}
        </div>
        <nav>
          ${isAuthenticated
            ? '<a href="/profile">Profile</a> | <a href="/logout">Logout</a>'
            : '<a href="/login">Login</a>'}
        </nav>
      </body>
    </html>
  `);
});

// 保護されたプロファイルルート - 認証が必要
app.get('/profile', requiresAuth(), (req, res) => {
  const user = req.oidc.user;

  res.send(`
    <html>
      <head>
        <title>Profile - Auth0 Express</title>
        <style>
          body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; padding: 2rem; max-width: 600px; margin: 0 auto; }
          a { color: #0066cc; text-decoration: none; }
          img { border-radius: 50%; }
          pre { background: #f4f4f4; padding: 1rem; border-radius: 4px; overflow-x: auto; }
          .card { border: 1px solid #ddd; border-radius: 8px; padding: 1.5rem; margin: 1rem 0; }
        </style>
      </head>
      <body>
        <h1>User Profile</h1>
        <div class="card">
          ${user.picture ? `<img src="${user.picture}" alt="Profile" width="80" />` : ''}
          <h2>${user.name || user.nickname || 'User'}</h2>
          <p><strong>Email:</strong> ${user.email || 'N/A'}</p>
        </div>
        <h3>Full User Object</h3>
        <pre>${JSON.stringify(user, null, 2)}</pre>
        <nav>
          <a href="/">← Back to Home</a> | <a href="/logout">Logout</a>
        </nav>
      </body>
    </html>
  `);
});

app.listen(port, () => {
  console.log(`Server running at http://localhost:${port}`);
});

要点:

• requiresAuth() ミドルウェアは /profile ルートを保護し、未認証のユーザーはログイン画面にリダイレクトされます
• req.oidc.user には、認証済みユーザーのプロファイル情報が含まれます
• req.oidc.isAuthenticated() は、ログイン状態を示す真偽値を返します
• Login ルートと logout ルート (/login, /logout) は、auth() ミドルウェアによって自動的に作成されます

---

​

6. アプリを実行する

開発サーバーを起動します：

npm run dev

ブラウザーで http://localhost:3000 を開きます。

チェックポイント

これで、完全に機能する Auth0 のログインページが使えるようになっているはずです。次のように動作します。

1. “Login” をクリックする - Auth0 の Universal Login ページにリダイレクトされます
2. 認証を完了する - アプリにリダイレクトされます
3. “/profile” にアクセスする - ユーザー情報が表示されます
4. “Logout” をクリックする - アプリと Auth0 の両方からログアウトされます

---

​

高度な使い方

requiresAuth() を使用して特定のルートを保護する

認証が必要な各ルートを保護するには、requiresAuth() ミドルウェアを使用します。

const { auth, requiresAuth } = require('express-openid-connect');

app.use(auth({ authRequired: false }));

// 公開ルート
app.get('/', (req, res) => {
  res.send('Welcome! This is public.');
});

// 保護されたルート
app.get('/dashboard', requiresAuth(), (req, res) => {
  res.send(`Hello ${req.oidc.user.name}, welcome to your dashboard!`);
});

app.get('/settings', requiresAuth(), (req, res) => {
  res.send('Settings page - only for authenticated users');
});

Express Router を使って、特定のパス配下にあるすべてのルートを保護することもできます：

const protectedRouter = express.Router();

// このルーター内のすべてのルートで認証が必要
protectedRouter.use(requiresAuth());

protectedRouter.get('/dashboard', (req, res) => {
  res.send('Protected dashboard');
});

protectedRouter.get('/settings', (req, res) => {
  res.send('Protected settings');
});

app.use('/app', protectedRouter);
// ルート: /app/dashboard、/app/settings はすべて保護済み

アクセストークンによる保護された API の呼び出し

外部APIの呼び出しにアクセストークンが必要な場合は、SDKを設定してアクセストークンを要求するようにします。

📁 index.js (更新後の設定)

const config = {
  authRequired: false,
  auth0Logout: true,
  secret: process.env.SECRET,
  baseURL: process.env.BASE_URL,
  clientID: process.env.CLIENT_ID,
  issuerBaseURL: process.env.ISSUER_BASE_URL,
  clientSecret: process.env.CLIENT_SECRET,  // コードフローに必要
  authorizationParams: {
    response_type: 'code',
    audience: process.env.API_AUDIENCE,     // API 識別子
    scope: 'openid profile email read:data',
  },
};

以下を.envファイルに追加してください:

CLIENT_SECRET=your_client_secret_from_dashboard
API_AUDIENCE=https://your-api.example.com

次に、アクセストークンを使って API を呼び出します：

app.get('/api-data', requiresAuth(), async (req, res) => {
  try {
    let { token_type, access_token, isExpired, refresh } = req.oidc.accessToken;

    // トークンの有効期限が切れている場合は更新する
    if (isExpired()) {
      const refreshed = await refresh();
      access_token = refreshed.access_token;
    }

    // 保護されたAPIを呼び出す
    const response = await fetch('https://your-api.example.com/data', {
      headers: {
        Authorization: `${token_type} ${access_token}`,
      },
    });

    const data = await response.json();
    res.json(data);
  } catch (error) {
    console.error('API call failed:', error);
    res.status(500).json({ error: 'Failed to fetch data' });
  }
});

リフレッシュトークンを取得するには、スコープに offline_access を追加します。

scope: 'openid profile email offline_access read:data',

クレームベース認可を使用する

ユーザーのクレーム (ロール、権限など) に基づいてルートを保護する：

const { auth, requiresAuth, claimEquals, claimIncludes, claimCheck } = require('express-openid-connect');

app.use(auth({ authRequired: false }));

// role = 'admin' のユーザーのみ
app.get('/admin', claimEquals('role', 'admin'), (req, res) => {
  res.send('Admin dashboard');
});

// roles 配列に 'editor' が含まれるユーザー
app.get('/editor', claimIncludes('roles', 'editor'), (req, res) => {
  res.send('Editor dashboard');
});

// 条件付きカスタムクレームチェック
app.get('/premium', claimCheck((req, claims) => {
  return claims.subscription === 'premium' || claims.role === 'admin';
}), (req, res) => {
  res.send('Premium content');
});

role のようなクレームは、Auth0 ルールまたは Actions を使用してトークンに追加する必要があります。カスタムクレームの追加方法について詳しくはこちら。

カスタムセッションストア (Redis)

本番環境や複数のサーバーインスタンスで運用する場合は、独自のセッションストアを使用してください。

npm install redis connect-redis

const { auth } = require('express-openid-connect');
const { createClient } = require('redis');
const RedisStore = require('connect-redis').default;

// Redisクライアントを作成
const redisClient = createClient({
  url: process.env.REDIS_URL || 'redis://localhost:6379',
});
redisClient.connect().catch(console.error);

const config = {
  authRequired: false,
  auth0Logout: true,
  secret: process.env.SECRET,
  baseURL: process.env.BASE_URL,
  clientID: process.env.CLIENT_ID,
  issuerBaseURL: process.env.ISSUER_BASE_URL,
  session: {
    store: new RedisStore({ client: redisClient }),
  },
};

app.use(auth(config));

カスタムセッションストアを使用するケース:

• 複数のサーバーインスタンスを運用している場合 (負荷分散)
• セッションデータがCookieのサイズ制限 (約4KB) を超える場合
• サーバーの再起動後もセッションを保持する必要がある場合
• バックチャネルログアウトを使用する場合

エラー処理

認証エラーに対する適切なエラーハンドリングを追加します:

const { auth } = require('express-openid-connect');

app.use(auth({
  authRequired: false,
  auth0Logout: true,
  secret: process.env.SECRET,
  baseURL: process.env.BASE_URL,
  clientID: process.env.CLIENT_ID,
  issuerBaseURL: process.env.ISSUER_BASE_URL,
  errorOnRequiredAuth: true,  // APIルートへのリダイレクトの代わりに401を返す
}));

// Custom error handler
app.use((err, req, res, next) => {
  // Handle authentication errors
  if (err.statusCode === 401) {
    // For API requests, return JSON
    if (req.accepts('json')) {
      return res.status(401).json({
        error: 'Authentication required',
        login_url: '/login',
      });
    }
    // For browser requests, redirect to login
    return res.redirect('/login');
  }

  // Log the error (don't expose details to client)
  console.error('Application error:', err.message);

  res.status(err.statusCode || 500).json({
    error: 'An unexpected error occurred',
  });
});

---

​

トラブルシューティング

よくある問題と解決策

​

ログイン後に「Invalid state」エラーが発生する

問題: 認証リクエストとコールバックの間で state が一致していません。

解決策:

1. 本番環境では HTTPS を使用していることを確認します
2. Cookie が正しく設定されていることを確認します (ブラウザーでブロックされていないこと)
3. Auth0 Dashboard でコールバック URL が完全に一致していることを確認します

​

「req.oidc is undefined」

問題: req.oidc にアクセスする前に auth() ミドルウェアが適用されていません。

解決策: req.oidc にアクセスするルートより前で app.use(auth(config)) が呼び出されていることを確認します。

// ✅ 正しい順序
app.use(auth(config));
app.get('/profile', requiresAuth(), (req, res) => { ... });

// ❌ 間違った順序
app.get('/profile', requiresAuth(), (req, res) => { ... });
app.use(auth(config));

​

セッションが大きすぎる / Cookie エラー

問題: ユーザーのセッションデータが Cookie のサイズ制限を超えています。

解決策: Redis のようなカスタムセッションストアを使用します。

session: {
  store: new RedisStore({ client: redisClient }),
}

​

Callback URL の不一致

問題: Auth0 から「Callback URL mismatch」エラーが返されます。

解決策:

1. Auth0 Dashboard → アプリケーション → あなたのアプリ → 設定 に移動します
2. http://localhost:3000 (または本番環境の URL) を Allowed Callback URLs に追加します
3. URL は 完全に 一致している必要があります (末尾のスラッシュを含む)

​

環境変数が読み込まれない

問題: 設定値が undefined になっています。

解決策:

1. require('dotenv').config() がエントリーファイルの先頭にあることを確認します
2. .env ファイルがルートディレクトリにあることを確認します
3. 変数名にタイプミスがないか確認します

// デバッグ: 設定値を出力します（本番環境では削除してください！）
console.log('Config check:', {
  hasSecret: !!process.env.SECRET,
  hasClientID: !!process.env.CLIENT_ID,
  issuerBaseURL: process.env.ISSUER_BASE_URL,
});

---

​

次のステップ

認証が機能するようになったので、次の内容もぜひご確認ください。

• 認可を追加する - ロールベースのアクセス制御を実装する
• 保護された API を呼び出す - アクセストークンを使用してバックエンド API を呼び出す
• Universal Login をカスタマイズする - ログイン画面をブランドに合わせる
• ソーシャル接続を追加する - Google、GitHub、その他のソーシャルログインを有効にする
• MFA を実装する - 多要素認証を追加する

---

​

リソース

• express-openid-connect GitHub - ソースコードとサンプル
• API Documentation - API の完全なリファレンス
• Auth0 Express Sample App - 完全なサンプルアプリケーション
• Auth0 Community - Community からサポートを受ける