Express アプリケーションに Login を追加する

このQuickstartは現在Beta版です。ぜひフィードバックをお寄せください！

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

Node.js 22 LTS以降
npm 10以降、またはyarn 1.22以降

はじめに

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

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

Express アプリケーション用の新しいディレクトリを作成し、Node.js プロジェクトを初期化します。package.json を更新して ES モジュールを使用し、起動スクリプトを追加します。

{
  "name": "auth0-express-app",
  "version": "1.0.0",
  "type": "module",
  "main": "server.js",
  "scripts": {
    "start": "node server.js",
    "dev": "node --watch server.js"
  }
}

SDK をインストールする

@auth0/auth0-express、express、dotenv をインストールします。

npm install @auth0/auth0-express@beta express dotenv

Auth0 を設定する

Auth0 テナントに新しいアプリケーションを作成し、環境変数を設定します。

クイックセットアップ
CLI
Auth0 Dashboard

アプリケーションを作成したら、以下の値を .env ファイルに追加します。安全なセッションシークレットを生成します。

node -e "console.log(require('crypto').randomBytes(32).toString('hex'))"

出力をコピーして、AUTH0_SESSION_SECRET の値として使用します。

macOS または Linux では、openssl rand -hex 32 も実行できます。Node はすでに前提条件となっているため、この Node コマンドはすべてのプラットフォームで使用できます。

プロジェクトのルートディレクトリで以下のコマンドを実行し、Auth0 アプリケーションを作成します。

Auth0 CLI をまだインストールしていない場合は、次のコマンドを実行します。

brew tap auth0/auth0-cli && brew install auth0

次に、auth0 login で認証します。

Auth0 Dashboard で アプリケーション > アプリケーション に移動します
Create Application を選択します
名前 (例: “My Express App”) を入力し、従来型Webアプリケーション を選択します
Create をクリックします
Application Settings タブで、次の項目を設定します。

フィールド	値
Allowed Callback URLs	`http://localhost:3000/auth/callback`
Allowed Logout URLs	`http://localhost:3000`

変更を保存 をクリックします
Basic Information から Domain、Client ID、Client Secret をコピーします

.env ファイルを作成します。

YOUR_AUTH0_DOMAIN、YOUR_AUTH0_CLIENT_ID、YOUR_AUTH0_CLIENT_SECRET を、Auth0 アプリケーションの設定値に置き換えます。

安全なセッションシークレットを生成し、プレースホルダー値を置き換えます。

node -e "console.log(require('crypto').randomBytes(32).toString('hex'))"

middleware を設定する

ExpressアプリケーションにcreateAuth0()ミドルウェアを追加します。SDKによって、/auth/login、/auth/logout、/auth/callback、/auth/backchannel-logoutの各ルートが自動的に設定されます。

server.js

import 'dotenv/config';
import express from 'express';
import { createAuth0 } from '@auth0/auth0-express';

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

app.use(createAuth0());

app.get('/', async (req, res) => {
  const session = await req.auth0.client.getSession();
  res.send(session ? 'Logged in' : 'Logged out');
});

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

この処理で行われること:

createAuth0() は、環境変数 (AUTH0_DOMAIN、AUTH0_CLIENT_ID など) から資格情報を自動的に読み取ります
/auth/ 配下に4つの認証ルートをマウントします
セッションとトークンにアクセスできるよう、すべてのリクエストに req.auth0.client を追加します

ログイン、ログアウト、保護されたプロファイルルートを追加

SDK の requiresAuth ミドルウェアでルートを保護し、getUser() を使用してユーザープロファイルデータを表示します。

server.js

import 'dotenv/config';
import express from 'express';
import { createAuth0, requiresAuth } from '@auth0/auth0-express';

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

app.use(createAuth0());

// 公開のホームルート
app.get('/', async (req, res) => {
  const session = await req.auth0.client.getSession();
  const isAuthenticated = !!session;

  res.send(`
    <html>
      <head>
        <title>Auth0 Express (Beta) 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; }
          .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 (Beta) 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="/auth/logout">Logout</a>'
            : '<a href="/auth/login">Login</a>'}
        </nav>
      </body>
    </html>
  `);
});

// 保護されたプロファイルのルート — requiresAuth は未認証のユーザーを /auth/login にリダイレクトします
app.get('/profile', requiresAuth(), async (req, res) => {
  const user = await req.auth0.client.getUser();

  res.send(`
    <html>
      <head>
        <title>Profile</title>
        <style>
          body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; padding: 2rem; max-width: 600px; margin: 0 auto; }
          pre { background: #f4f4f4; padding: 1rem; border-radius: 4px; overflow-x: auto; }
          img { border-radius: 50%; }
        </style>
      </head>
      <body>
        <h1>User Profile</h1>
        ${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>
        <h3>Full Profile</h3>
        <pre>${JSON.stringify(user, null, 2)}</pre>
        <a href="/">← Back</a> | <a href="/auth/logout">Logout</a>
      </body>
    </html>
  `);
});

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

要点:

@auth0/auth0-express の requiresAuth() はルートを保護し、未認証のユーザーを /auth/login にリダイレクトします
req.auth0.client.getUser() は認証済みユーザーのプロファイルを返します
ログインリンクは /auth/login、ログアウトは /auth/logout を指し、どちらも自動的にマウントされます

アプリケーションを実行する

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

npm run dev

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

チェックポイントこれで、完全に機能する Auth0 のログインフローが完成しました。以下を行うと:

Login をクリック — Auth0 の Universal Login ページにリダイレクトされます
認証を完了 — /auth/callback にあるアプリにリダイレクトされます
/profile にアクセス — ユーザー情報が表示されます
Logout をクリック — セッションがクリアされ、Auth0 からログアウトします

高度な使用方法

アクセストークンを使用して保護された API を呼び出す

SDK を audience で設定して API 用のアクセストークンをリクエストし、getAccessToken() で取得します。API の audience を .env に追加します。

.env

AUTH0_AUDIENCE=https://your-api.example.com

保護されたルート内で token を取得します。

server.js

app.get('/api-data', requiresAuth(), async (req, res) => {
  const { accessToken } = await req.auth0.client.getAccessToken();

  const response = await fetch('https://your-api.example.com/data', {
    headers: { Authorization: `Bearer ${accessToken}` },
  });

  res.json(await response.json());
});

SDK はアクセストークンの有効期限が切れると、自動的に token を refresh します。

returnTo パラメータを使用して、login 後にユーザーを指定したページへリダイレクトします。

server.js

app.get('/dashboard', async (req, res) => {
  const session = await req.auth0.client.getSession();
  if (!session) {
    return res.redirect('/auth/login?returnTo=/dashboard');
  }
  res.send('Welcome to your dashboard!');
});

カスタム authorization middleware

セッションを基盤に、独自の authorization ロジックを構築します。

server.js

async function requireAdmin(req, res, next) {
  const user = await req.auth0.client.getUser();
  if (!user) return res.redirect('/auth/login');
  if (!user['https://myapp.com/roles']?.includes('admin')) {
    return res.status(403).send('Forbidden');
  }
  next();
}

app.get('/admin', requireAdmin, (req, res) => {
  res.send('Admin panel');
});

https://myapp.com/roles claim はデフォルトでは含まれていません。Action を使用して ID トークンに追加し、namespaced claim 名を使用してください。

トラブルシューティング

'req.auth0 is undefined'

原因: ルートハンドラーより前に createAuth0() ミドルウェアが登録されていません。修正: req.auth0 にアクセスするルートより前に app.use(createAuth0()) を記述してください。

// ✅ Correct
app.use(createAuth0());
app.get('/profile', requiresAuth(), handler);

// ❌ Wrong
app.get('/profile', requiresAuth(), handler);
app.use(createAuth0());

コールバック URL の不一致エラー

原因: Auth0 アプリケーションの設定で指定したコールバック URL が http://localhost:3000/auth/callback と一致していません。修正:

Auth0 Dashboard → アプリケーション > アプリケーション → 対象のアプリ → アプリケーション設定 に移動します
許可されるコールバック URL に http://localhost:3000/auth/callback を追加します
許可されるログアウト URL に http://localhost:3000 を追加します
変更を保存 をクリックします

注: @auth0/auth0-express SDK では /auth/callback を使用します (express-openid-connect で使用する /callback ではありません) 。

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

原因: dotenv/config がインポートされていないか、.env ファイルに必要な値が設定されていません。修正:

エントリーファイルの先頭に import 'dotenv/config' (または require('dotenv').config()) を記述してください
.env に必要な 5 つの変数 (AUTH0_DOMAIN、AUTH0_CLIENT_ID、AUTH0_CLIENT_SECRET、APP_BASE_URL、AUTH0_SESSION_SECRET) がすべて含まれていることを確認します
不足している値をデバッグします:

console.log({
  domain: !!process.env.AUTH0_DOMAIN,
  clientId: !!process.env.AUTH0_CLIENT_ID,
  clientSecret: !!process.env.AUTH0_CLIENT_SECRET,
  appBaseUrl: !!process.env.APP_BASE_URL,
  sessionSecret: !!process.env.AUTH0_SESSION_SECRET,
});

ログイン後の 'Invalid state' エラー

原因: セッション Cookie が正しく設定されていないか、コールバック URL に直接アクセスしています。修正:

APP_BASE_URL がブラウザーでアクセスしている URL (例: http://localhost:3000) と一致していることを確認します
ブラウザーの Cookie を削除して、再試行します
本番環境では HTTPS を使用していることを確認します

次のステップ

Express API を保護する — @auth0/auth0-express-api を使用して、API でアクセストークンを検証する
Authorization を追加する — ロールベースのアクセス制御を実装する
Universal Login をカスタマイズする — ログイン体験をブランドに合わせる
Social Connections を追加する — Google、GitHub などのソーシャルログインを有効にする
MFA を実装する — 多要素認証を追加する

リソース

auth0/auth0-express GitHub — ソースコードとサンプル
Auth0 Community — コミュニティでサポートを受ける

Quickstarts

Auth0 の概要

Auth0 を設定する

アプリケーション

Express アプリケーションに Login を追加する

はじめに

高度な使用方法

トラブルシューティング

次のステップ

リソース

​はじめに

​高度な使用方法

​トラブルシューティング

​次のステップ

​リソース

はじめに

高度な使用方法

トラブルシューティング

次のステップ

リソース