Auth0とNext.jsの統合ガイド | 認証フローの設定方法

2026年6月26日

もっとスキルを活かしたいエンジニアへ

スポンサードリンク

働き方から選べる

無料で使えて良質な案件の情報収集ができるサービス

エンジニアの世界では、「いつでも動ける状態を作っておけ」とよく言われます。
技術やポートフォリオがあっても、自分に合う案件情報を日常的に見れていないと、いざ動こうと思った時に比較や判断が難しくなってしまいます。
普段から案件情報が集まる環境を作っておくと、良い案件が出た時にすぐ動きやすくなりますよ。
筆者自身も、メガベンチャー勤務時代に年収1,500万円を超えた経験があります。振り返ると、技術だけでなく「どんな案件や働き方があるか」を日頃から見ていたことが、キャリアの選択肢を広げるきっかけになりました。
このブログを読んでくれた方に感謝を込めて、実際に使っている情報収集サービスを紹介します。

フルリモート・週3日・高単価、どんな条件も妥協したくないなら

フリーランスボードに無料会員登録する

利用者10万人以上。業界最大規模45万件の案件。AIマッチ機能や無料の相場情報が人気。

年収800万円以上のキャリアアップ・ハイクラス正社員を視野に入れているなら

Beyond Careerに無料相談する

内定獲得率90%以上。紹介先企業とは役員クラスのコネクションがある安心と信頼できるエージェント。

Contents

1 Auth0とNext.jsの統合概要
2 Auth0 Next.js SDKの導入手順
- 2.1 SDKインストールと設定ファイル構成
3 認証フローのカスタマイズ方法
- 3.1 ログイン/サインアップ画面のUI調整
- 3.2 カスタムクレームの利用例
4 ユーザーセッション管理のベストプラクティス
- 4.1 トークンの有効期限管理
- 4.2 ブラウザストレージの安全確保
5 セキュリティ設定（CORS/CSRF対策）
- 5.1 Auth0管理画面でのオリジン設定
- 5.2 Next.jsアプリケーションの保護方法
6 Next.jsアプリケーションとの連携サンプルコード

スポンサードリンク

Auth0とNext.jsの統合概要

Webアプリケーションにおけるセキュアな認証フローは、ユーザー情報保護とサービス信頼性を支える根幹です。Auth0は、OAuth 2.0とOpenID Connectを基盤とした認証インフラを提供し、Next.jsアプリケーションとの連携で開発効率とセキュリティの両立が可能です。公式SDKを活用することで、独自実装に比べて開発期間短縮や標準的なセキュリティ対策の自動適用といった利点があります。

Auth0 Next.js SDKの導入手順

Next.jsアプリケーションにAuth0を統合するには、公式SDKの導入が不可欠です。以下に必要な前提条件と設定手順をステップ形式で解説します。

SDKインストールと設定ファイル構成

Next.jsプロジェクト内にAuth0 SDKを導入し、環境変数を定義します。

SDKのインストール
bash npm install @auth0/nextjs-auth0
auth0.config.tsの作成（例）
ts import { Auth0Config } from '@auth0/nextjs-auth0'


const config: Auth0Config = {

     domain: process.env.AUTH0_DOMAIN || '',

     clientId: process.env.AUTH0_CLIENT_ID || '',

     clientSecret: process.env.AUTH0_CLIENT_SECRET || '',

     redirectUri: process.env.AUTH0_REDIRECT_URI || 'http://localhost:3000/api/auth/callback',

   }

export default config

next.config.jsの設定
js module.exports = { // Auth0 SDKが必要な場合にのみ導入 experimental: { appDir: true, }, }
環境変数の定義（.env.local）
AUTH0_DOMAIN=your-auth0-domain.auth0.com AUTH0_CLIENT_ID=your-client-id AUTH0_CLIENT_SECRET=your-client-secret AUTH0_REDIRECT_URI=http://localhost:3000/api/auth/callback

注意点： AUTH0_CLIENT_SECRETは絶対にGitリポジトリに公開しないこと。.env.localファイルを.gitignoreに登録し、CI/CD環境ではSecrets Managerなどを活用してください。

認証フローのカスタマイズ方法

Auth0 SDKはデフォルトでログイン・サインアップ画面を提供しますが、UIやロジックをカスタム可能です。

ログイン/サインアップ画面のUI調整

Auth0のデフォルト画面に加え、独自デザインを適用する方法があります。

auth0.config.tsでテーマ指定（誤り修正済）
ts const config: Auth0Config = { // ... theme: 'https://your-cdn-url/custom-theme.css', }

注意事項： Auth0のカスタムCSSは**CDN経由での注入ではなく、UI設定画面またはManagement APIでの指定が推奨されます。公式ドキュメントを参照してください。

カスタムコンポーネントの実装例（ログインフォーム）
ログイン時に使用するUIをcomponents/auth/Login.tsxで定義し、Auth0Providerと連携します。

ポイント： UI変更はuseAuth()フックを通じたセッション管理に影響しないため、柔軟なカスタマイズが可能です。ただし、コンポーネント構造として_app.tsxやlayout.tsxに統合する必要がある場合があります。

カスタムクレームの利用例

ユーザー情報に追加フィールド（クレーム）を含めることで、アプリケーション側でのロジック拡張が可能になります。以下はauth0.config.tsにカスタムクレームを指定する例です。

const config: Auth0Config = {
  // ...
  claims: {
    email_verified: 'email_verified',
    role: 'https://your-app.com/role',
  },
}

const config: Auth0Config = {

// ...

claims: {

email_verified: 'email_verified',

role: 'https://your-app.com/role',

}

ユーザーセッション管理のベストプラクティス

トークン有効期限やブラウザストレージの安全性は、セキュリティ設計における重要な要素です。

トークンの有効期限管理

Auth0ではデフォルトでアクセストークンの有効期限が1時間、IDトークンは5分となります。アプリケーション側で自動更新を行うには、以下の処理を実装します。

アクセストークンリフレッシュロジック（例）
ts import { useAuth } from '@auth0/nextjs-auth0'


const AuthChecker = () => {

    const { user, isLoading, error } = useAuth()


		
		
			
			

			
			if (isLoading) return &lt;div&gt;認証中...&lt;/div&gt;
if (error) return &lt;div&gt;認証エラー: {error.message}&lt;/div&gt;

// IDトークンの有効期限を確認
const expiresAt = user?.exp * 1000
const isExpired = Date.now() &gt; expiresAt

if (isExpired) {
  return &lt;div&gt;セッションが切れました。再度ログインしてください。&lt;/div&gt;
}

return &lt;div&gt;認証済み&lt;/div&gt;

			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
				
						if (isLoading) return &lt;div&gt;認証中...&lt;/div&gt;
if (error) return &lt;div&gt;認証エラー: {error.message}&lt;/div&gt;
 
// IDトークンの有効期限を確認
const expiresAt = user?.exp * 1000
const isExpired = Date.now() &gt; expiresAt
 
if (isExpired) {
  return &lt;div&gt;セッションが切れました。再度ログインしてください。&lt;/div&gt;
}
 
return &lt;div&gt;認証済み&lt;/div&gt;

}

構成の注意： このコンポーネントはLayoutやAppコンポーネント内で定義し、アプリケーション全体に適用する必要があります。

ブラウザストレージの安全確保

トークンをlocalStorageまたはsessionStorageに保存する際、セキュリティリスクが発生しやすいため注意が必要です。

ストレージタイプ	説明	推奨用途
`localStorage`	ページ再読み込み時に保持される	非常によく使われるが、XSSに弱い
`sessionStorage`	タブ終了時まで保存される	セキュリティを重視する場合

注意： トークンは可能な限り短期間で有効期限を設定し、セッションストレージの使用が推奨されます。

セキュリティ設定（CORS/CSRF対策）

Auth0 SDKにはCORSやCSRF対策が組み込まれていますが、アプリケーション側での補足も重要です。

Auth0管理画面でのオリジン設定

Auth0ダッシュボード → 「Applications」→「Settings」にアクセス
「Allowed Callback URLs」にhttp://localhost:3000/api/auth/callbackを追加
「Allowed Web Origins」にhttp://localhost:3000を登録

注意： 本番環境では、ドメイン名（例：https://yourdomain.com）を指定してください。また、CORSの設定はNext.js側でも必要です。

Next.jsアプリケーションの保護方法

Next.jsでAuth0と連携する際には、以下のような補足対策を実施します。

APIルートでの認証チェック（例）
ts // pages/api/auth/[...auth0].ts import { handleAuth } from '@auth0/nextjs-auth0'

export default handleAuth()

保護されたページコンポーネントの実装例
tsx import { getSession } from '@auth0/nextjs-auth0' import { useRouter } from 'next/router'


const ProtectedPage = () => {

    const router = useRouter()


		
		
			
			

			
			// セッション情報を取得
const session = await getSession()
if (!session) {
  router.push('/login')
  return null
}

return &lt;div&gt;認証済みユーザー専用ページ&lt;/div&gt;

			
				
					
				
					1
2
3
4
5
6
7
8
9
				
						// セッション情報を取得
const session = await getSession()
if (!session) {
  router.push('/login')
  return null
}
 
return &lt;div&gt;認証済みユーザー専用ページ&lt;/div&gt;

}

CORS対策： Next.jsアプリケーション内で、APIルートにcorsミドルウェアを追加し、リクエスト元のオリジンを制限します。

// pages/api/auth/[...auth0].ts
import { handleAuth } from '@auth0/nextjs-auth0'
import cors from 'cors'

const corsOptions = {
  origin: ['http://localhost:3000', 'https://yourdomain.com'],
}

export default async function handler(req, res) {
  await cors(corsOptions)(req, res)
  return handleAuth(req, res)
}

// pages/api/auth/[...auth0].ts

import { handleAuth } from '@auth0/nextjs-auth0'

import cors from 'cors'

const corsOptions = {

origin: ['http://localhost:3000', 'https://yourdomain.com'],

}

export default async function handler(req, res) {

await cors(corsOptions)(req, res)

return handleAuth(req, res)

}

Next.jsアプリケーションとの連携サンプルコード

以下に、Auth0 SDKを活用したNext.jsアプリケーションの実装例を示します。

APIルートの認証処理例

Auth0が提供するhandleAuth()関数をAPIルートで使用し、認証フローを制御します。

// pages/api/auth/[...auth0].ts
import { handleAuth } from '@auth0/nextjs-auth0'

export default handleAuth()

// pages/api/auth/[...auth0].ts

import { handleAuth } from '@auth0/nextjs-auth0'

export default handleAuth()

保護されたページコンポーネント実装

以下のようにuseEffectでセッション情報を取得し、認証状態をチェックします。

import { useEffect, useState } from 'react'
import { useAuth } from '@auth0/nextjs-auth0'

const ProtectedComponent = () =&gt; {
  const [user, setUser] = useState(null)
  const { user: authUser, isLoading, error } = useAuth()

  useEffect(() =&gt; {
    if (isLoading) return
    if (error) {
      console.error('認証エラー:', error)
      return
    }
    setUser(authUser)
  }, [authUser, isLoading, error])

  if (!user) {
    return &lt;div&gt;認証されていません。ログインしてください。&lt;/div&gt;
  }

  return (
    &lt;div&gt;
      &lt;h1&gt;ユーザー情報&lt;/h1&gt;
      &lt;p&gt;{user.name}&lt;/p&gt;
      &lt;p&gt;{user.email}&lt;/p&gt;
    &lt;/div&gt;
  )
}

import { useEffect, useState } from 'react'

import { useAuth } from '@auth0/nextjs-auth0'

const ProtectedComponent = () => {

const [user, setUser] = useState(null)

const { user: authUser, isLoading, error } = useAuth()

useEffect(() => {

if (isLoading) return

if (error) {

console.error('認証エラー:', error)

return

}

setUser(authUser)

}, [authUser, isLoading, error])

if (!user) {

return <div>認証されていません。ログインしてください。</div>

}

return (

<div>

<h1>ユーザー情報</h1>

<p>{user.email}</p>

</div>

)

}

SDKバージョンの注意点

Auth0 SDKのバージョン依存性に関する注意喚起が不足しています。@auth0/nextjs-auth0のv2.xはNext.js v13以降との互換性があるものの、特定バージョンのSDK（例：v2.5）ではNext.js v14で問題が出る可能性があります。公式ドキュメントまたはnpmページを参照し、アプリケーションのNext.jsバージョンと一致するSDKバージョンを使用してください。

スポンサードリンク

もっとスキルを活かしたいエンジニアへ

スポンサードリンク

働き方から選べる

無料で使えて良質な案件の情報収集ができるサービス

フルリモート・週3日・高単価、どんな条件も妥協したくないなら

フリーランスボードに無料会員登録する

利用者10万人以上。業界最大規模45万件の案件。AIマッチ機能や無料の相場情報が人気。

年収800万円以上のキャリアアップ・ハイクラス正社員を視野に入れているなら

Beyond Careerに無料相談する

内定獲得率90%以上。紹介先企業とは役員クラスのコネクションがある安心と信頼できるエージェント。

-Auth0

comment コメントをキャンセル

: Auth0

Auth0でMFAを導入する意義と設定のベストプラクティス

現代のセキュリティ環境において、Auth0によるMFA導入が企業のアカウント安全性を劇的に向上させます。本記事では、管理者画面での有効化手順や認証方式選定のポイントを解説します。

: Auth0

Auth0 多要素認証（MFA）導入ガイド：設定手順とベストプラクティス

本ガイドでは、Auth0 の多要素認証（MFA）を管理画面で即座に有効化し、主要プロバイダー設定やリスクベースの Adaptive MFA、カスタムファクター実装までをステップバイステップで解説します。