Auth0とLINE Login連携ガイド：設定手順と実装例

2026年7月11日

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

スポンサードリンク

働き方から選べる

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

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

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

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

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

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

Beyond Careerに無料相談する

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

Contents

1 前提条件とアカウント作成手順
2 LINE と Auth0 の連携設定
- 2.1 LINE チャネル作成と OIDC 設定
- 2.2 Auth0 側に LINE Connection を作成
  - 2.2.1 追加で推奨するセキュリティ設定
  - 2.2.2 カスタムクレームの設定例（Actions）
3 フロントエンド実装例（React / Vue / Next.js）
4 トークン検証とカスタムクレーム
- 4.1 IDトークンの主要クレームとサンプル
- 4.2 カスタムクレームを追加するベストプラクティス（Auth0 Actions）
5 デバッグ・運用ガイド
6 注意点・リスク管理
7 まとめ
- 7.1 参考リンク（2024‑07 時点）

スポンサードリンク

前提条件とアカウント作成手順

このセクションでは、認証連携に必要な Auth0 アカウント と LINE Developers アカウント の取得方法、およびローカル開発環境の最低要件をまとめます。事前にすべて揃えておくことで、後続の設定で「Callback URL が合わない」などの基本的なエラーを防げます。

Auth0 アカウント取得

Auth0 の公式サイト（https://auth0.com）へアクセスし、右上の Sign Up をクリック。メールアドレスとパスワードで新規登録します。
登録後に表示される テナント作成画面 で任意のテナント名（例: myapp-demo）を入力し、Create Tenant を実行します。テナントは認証エンドポイント URL のベースとして利用されます。

📌 公式情報：Auth0 は無料プランで月間 7,000 アクティブユーザーまで利用可能です（2024 年現在）。最新のプラン内容は Auth0 Pricing ページを参照してください。

LINE Developers アカウント取得

LINE Developers コンソール（https://developers.line.biz/ja/）にアクセスし、LINE アカウントでサインインします。個人・法人どちらでも利用できます。
左メニューの プロバイダー作成 → チャネル作成（LINE Login） を選択し、以下の必須項目を入力します。

項目	設定例
アプリ名	MyApp Demo
説明文	デモ用 LINE ログイン
プライバシーポリシー URL	https://myapp.example.com/privacy
利用規約 URL（任意）	https://myapp.example.com/terms

作成完了後に Channel ID と Channel Secret が表示されるので、メモしておきます。

📌 公式情報：LINE Login のレートリミットは公開されていませんが、一般的な API は秒間数千件程度とされています。大量トラフィックが見込まれる場合は事前に LINE へ問い合わせることを推奨します（LINE Platform FAQ）。

開発環境の最低要件

要素	推奨バージョン
Node.js	≥ 18.x
パッケージマネージャー	npm もしくは yarn
HTTPS トンネリングツール（テスト用）	ngrok, Cloudflare Tunnel 等
フロントエンドフレームワーク	React (Next.js 推奨), Vue 3, または純粋な HTML/JS

HTTPS が必須になるのは、Auth0 と LINE のどちらもリダイレクト URL に HTTPS を要求するためです。開発時はローカルサーバーを https://xxxx.ngrok.io などで公開しておくと便利です。

LINE と Auth0 の連携設定

この章では、LINE 側のチャネル設定から Auth0 の Connection 作成まで、一連のフローを 「Callback URL」 と 「Scope」 に焦点を当てながら解説します。重複した説明はまとめ、必要な項目だけを明示しています。

LINE チャネル作成と OIDC 設定

まず LINE 側で OpenID Connect (OIDC) を有効化し、Auth0 が受け取る Callback URL と Scope を登録します。

LINE Developers コンソール → チャネル設定 → LINE Login に移動し、以下を入力します。
OAuth 2.0 設定 > Callback URL：https://YOUR_TENANT.auth0.com/login/callback（YOUR_TENANT は作成したテナント名に置換）
OpenID Connect スイッチをオンにし、Scope に openid profile email を追加。
設定保存後、画面下部に Channel ID と Channel Secret が表示されます。これらは次の章で Auth0 に貼り付けます。

📌 ポイント：Callback URL は「末尾のスラッシュ有無」まで完全一致させる必要があります。不一致だと redirect_uri_mismatch エラーが返ります。

Auth0 側に LINE Connection を作成

Auth0 ダッシュボードで Social Connections → LINE を有効化し、取得したクレデンシャルを入力します。

フィールド	設定値
Client ID（Channel ID）	`YOUR_CHANNEL_ID`
Client Secret（Channel Secret）	`YOUR_CHANNEL_SECRET`
Scope	`openid profile email`
Callback URL	自動的に `https://YOUR_TENANT.auth0.com/login/callback` が設定されます

追加で推奨するセキュリティ設定

PKCE の有効化：Applications → 対象アプリ → Advanced Settings → OAuth で Use PKCE をオンにします。
nonce 自動付与：Auth0 SDK が自動的に nonce パラメータを生成するため、手動で変更しないことがベストプラクティスです。

カスタムクレームの設定例（Actions）

// Auth0 Actions: post-login (Node.js)
exports.onExecutePostLogin = async (event, api) =&gt; {
  // LINE のプロフィール画像とロケールを名前空間付きカスタムクレームに追加
  api.idToken.setCustomClaim('https://myapp.example.com/line_picture', event.user.picture);
  api.idToken.setCustomClaim('https://myapp.example.com/line_locale', event.user.locale ?? 'ja_JP');
};

// Auth0 Actions: post-login (Node.js)

exports.onExecutePostLogin = async (event, api) => {

// LINE のプロフィール画像とロケールを名前空間付きカスタムクレームに追加

api.idToken.setCustomClaim('https://myapp.example.com/line_picture', event.user.picture);

api.idToken.setCustomClaim('https://myapp.example.com/line_locale', event.user.locale ?? 'ja_JP');

};

📌 参考：Auth0 の公式ドキュメント「Add custom claims」を参照してください。

フロントエンド実装例（React / Vue / Next.js）

ここでは、主要フレームワーク別に 最小構成のコード と 動作確認ポイント を示します。共通点は loginWithRedirect({ connection: 'line' }) で LINE 接続を指定するだけです。

React（SPA）実装

React アプリでは公式パッケージ @auth0/auth0-react を利用します。以下は AuthProvider と LoginButton のサンプルです。

// src/AuthProvider.tsx
import { Auth0Provider } from '@auth0/auth0-react';
import { useNavigate } from 'react-router-dom';

export const AuthProvider = ({ children }: { children: React.ReactNode }) =&gt; {
  const navigate = useNavigate();

  return (
    &lt;Auth0Provider
      domain={process.env.REACT_APP_AUTH0_DOMAIN!}
      clientId={process.env.REACT_APP_AUTH0_CLIENT_ID!}
      redirectUri={`${window.location.origin}/callback`}
      audience={`https://${process.env.REACT_APP_AUTH0_DOMAIN}/api/v2/`}
      scope=&quot;openid profile email&quot;
      onRedirectCallback={(appState) =&gt; navigate(appState?.returnTo || '/')}
    &gt;
      {children}
    &lt;/Auth0Provider&gt;
  );
};

// src/AuthProvider.tsx

import { Auth0Provider } from '@auth0/auth0-react';

import { useNavigate } from 'react-router-dom';

export const AuthProvider = ({ children }: { children: React.ReactNode }) => {

const navigate = useNavigate();

return (

<Auth0Provider

domain={process.env.REACT_APP_AUTH0_DOMAIN!}

clientId={process.env.REACT_APP_AUTH0_CLIENT_ID!}

redirectUri={`${window.location.origin}/callback`}

audience={`https://${process.env.REACT_APP_AUTH0_DOMAIN}/api/v2/`}

scope="openid profile email"

onRedirectCallback={(appState) => navigate(appState?.returnTo || '/')}

{children}

</Auth0Provider>

);

};

// src/components/LoginButton.tsx
import { useAuth0 } from '@auth0/auth0-react';

export const LoginButton = () =&gt; {
  const { loginWithRedirect } = useAuth0();
  return (
    &lt;button onClick={() =&gt; loginWithRedirect({ connection: 'line' })}&gt;
      LINEでログイン
    &lt;/button&gt;
  );
};

// src/components/LoginButton.tsx

import { useAuth0 } from '@auth0/auth0-react';

export const LoginButton = () => {

const { loginWithRedirect } = useAuth0();

return (

<button onClick={() => loginWithRedirect({ connection: 'line' })}>

LINEでログイン

</button>

);

};

確認ポイント
- .env に REACT_APP_AUTH0_DOMAIN と REACT_APP_AUTH0_CLIENT_ID を設定。
- npm install @auth0/auth0-react react-router-dom が必要です。

Vue 3 実装

Vue 用 SDK は @auth0/auth0-vue です。プラグインとして登録し、コンポーネントから呼び出します。

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import { Auth0Plugin } from '@auth0/auth0-vue';

createApp(App)
  .use(Auth0Plugin, {
    domain: import.meta.env.VITE_AUTH0_DOMAIN,
    clientId: import.meta.env.VITE_AUTH0_CLIENT_ID,
    redirectUri: `${window.location.origin}/callback`,
    audience: `https://${import.meta.env.VITE_AUTH0_DOMAIN}/api/v2/`,
    scope: 'openid profile email',
  })
  .mount('#app');

// main.js

import { createApp } from 'vue';

import App from './App.vue';

import { Auth0Plugin } from '@auth0/auth0-vue';

createApp(App)

.use(Auth0Plugin, {

domain: import.meta.env.VITE_AUTH0_DOMAIN,

clientId: import.meta.env.VITE_AUTH0_CLIENT_ID,

redirectUri: `${window.location.origin}/callback`,

audience: `https://${import.meta.env.VITE_AUTH0_DOMAIN}/api/v2/`,

scope: 'openid profile email',

})

.mount('#app');

&lt;!-- src/components/LoginButton.vue --&gt;
&lt;template&gt;
  &lt;button @click=&quot;login&quot;&gt;LINEでログイン&lt;/button&gt;
&lt;/template&gt;

&lt;script setup&gt;
import { useAuth0 } from '@auth0/auth0-vue';
const { loginWithRedirect } = useAuth0();
function login() {
  loginWithRedirect({ connection: 'line' });
}
&lt;/script&gt;

<button @click="login">LINEでログイン</button>

</template>

import { useAuth0 } from '@auth0/auth0-vue';

const { loginWithRedirect } = useAuth0();

function login() {

loginWithRedirect({ connection: 'line' });

}

</script>

確認ポイント
- Vite 環境の場合は .env ファイルに VITE_AUTH0_DOMAIN と VITE_AUTH0_CLIENT_ID を記述。
- npm install @auth0/auth0-vue が必要です。

Next.js（SSR）実装

Next.js ではサーバーサイドでも認証情報を扱える @auth0/nextjs-auth0 パッケージが便利です。

// pages/_app.tsx
import { UserProvider } from '@auth0/nextjs-auth0';

export default function App({ Component, pageProps }: any) {
  return (
    &lt;UserProvider&gt;
      &lt;Component {...pageProps} /&gt;
    &lt;/UserProvider&gt;
  );
}

// pages/_app.tsx

import { UserProvider } from '@auth0/nextjs-auth0';

export default function App({ Component, pageProps }: any) {

return (

</UserProvider>

);

}

// 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();

// components/LoginButton.tsx
import Link from 'next/link';

export const LoginButton = () =&gt; (
  &lt;Link href=&quot;/api/auth/login?connection=line&quot;&gt;
    &lt;a&gt;LINEでログイン&lt;/a&gt;
  &lt;/Link&gt;
);

// components/LoginButton.tsx

import Link from 'next/link';

export const LoginButton = () => (

<a>LINEでログイン</a>

</Link>

);

確認ポイント
- .env.local に AUTH0_SECRET, NEXT_PUBLIC_AUTH0_DOMAIN, NEXT_PUBLIC_AUTH0_CLIENT_ID を設定。
- npm install @auth0/nextjs-auth0 が必要です。

トークン検証とカスタムクレーム

この章では、Auth0 が発行する IDトークン の構造を把握し、アプリ側で安全に検証・利用できるようにする方法を解説します。特に sub プレフィックスや名前空間付きカスタムクレームの扱いは、複数プロバイダーが混在する環境で重要です。

IDトークンの主要クレームとサンプル

クレーム	説明
`iss`	トークン発行元（例: `https://YOUR_TENANT.auth0.com/`）
`sub`	ユーザー一意識別子。LINE の場合は `line\|{LINE_USER_ID}` というプレフィックスが付与されます。
`aud`	クライアント ID（Auth0 アプリの Client ID）。
`exp`, `iat`	有効期限・発行時刻（Unix epoch）
`nonce`	リプレイ攻撃防止用ランダム文字列（SDK が自動生成）
`name`, `email`, `picture`	標準 OIDC スコープで取得できる属性
`https://myapp.example.com/line_locale`	カスタムクレーム例（名前空間付き）

{
  &quot;iss&quot;: &quot;https://demo.auth0.com/&quot;,
  &quot;sub&quot;: &quot;line|U1234567890abcdef&quot;,
  &quot;aud&quot;: &quot;YOUR_CLIENT_ID&quot;,
  &quot;exp&quot;: 1735678901,
  &quot;iat&quot;: 1735675301,
  &quot;nonce&quot;: &quot;a1b2c3d4e5f6g7h8i9j0&quot;,
  &quot;name&quot;: &quot;山田 太郎&quot;,
  &quot;email&quot;: &quot;taro@example.com&quot;,
  &quot;picture&quot;: &quot;https://profile.line-scdn.net/abcdefghijkl&quot;,
  &quot;https://myapp.example.com/line_locale&quot;: &quot;ja_JP&quot;
}

{

"iss": "https://demo.auth0.com/",

"sub": "line|U1234567890abcdef",

"aud": "YOUR_CLIENT_ID",

"exp": 1735678901,

"iat": 1735675301,

"nonce": "a1b2c3d4e5f6g7h8i9j0",

"name": "山田太郎",

"email": "taro@example.com",

"picture": "https://profile.line-scdn.net/abcdefghijkl",

"https://myapp.example.com/line_locale": "ja_JP"

}

📌 検証ポイント：トークンの署名は必ず Auth0 の公開鍵（JWK）で検証し、nonce がリクエスト時に生成したものと一致するか確認します。

カスタムクレームを追加するベストプラクティス（Auth0 Actions）

// file: actions/post-login.js
exports.onExecutePostLogin = async (event, api) =&gt; {
  // LINE プロファイル画像とロケールを名前空間付きで付与
  const picture = event.user.picture || null;
  const locale = event.user.locale || 'ja_JP';

  if (picture) {
    api.idToken.setCustomClaim('https://myapp.example.com/line_picture', picture);
  }
  api.idToken.setCustomClaim('https://myapp.example.com/line_locale', locale);
};

// file: actions/post-login.js

exports.onExecutePostLogin = async (event, api) => {

// LINE プロファイル画像とロケールを名前空間付きで付与

const picture = event.user.picture || null;

const locale = event.user.locale || 'ja_JP';

if (picture) {

api.idToken.setCustomClaim('https://myapp.example.com/line_picture', picture);

}

api.idToken.setCustomClaim('https://myapp.example.com/line_locale', locale);

};

名前空間は必ず自分のドメイン（例: https://myapp.example.com/）で始め、衝突を防ぎます。
カスタムクレームは IDトークン と Access Token のどちらに入れるかは用途次第ですが、フロントエンドだけが参照する情報は ID トークンに含めるのが一般的です。

📌 参考文献：Auth0 Docs 「Add custom claims to tokens」。

デバッグ・運用ガイド

実装後に起きやすいトラブルを 二重チェック（Auth0 と LINE の両方）で早期に検出できるよう、具体的な手順とエラーコード別の対処法をまとめました。

Auth0 の Try 機能と LINE コンソールログの確認

Auth0 ダッシュボード → Authentication → Social → 作成した LINE Connection の右端にある Try ボタンをクリック。
ポップアップウィンドウが開き、LINE アカウントで認証できるかテストします。成功すれば ID トークンが取得されます。
同時に LINE Developers コンソール → ログ タブを開き、直近の認可リクエストとコールバック情報を確認します。ステータスコードやエラーメッセージがリアルタイムで表示されます。

📌 これら二つの画面で「リクエストは成功した」「しかしトークンが取得できない」など、どちら側に問題があるかを瞬時に切り分けられます。

主なエラーコードと対処法

エラー	発生シナリオ例	推奨対策
`invalid_client`	Channel ID／Secret が誤植または無効化されている	LINE コンソールで再確認し、Auth0 に正しく貼り付ける
`redirect_uri_mismatch`	Auth0 と LINE の Callback URL が微妙に違う（http ↔ https、末尾スラッシュ）	両方の設定を完全一致させる。URL をコピー＆ペーストでミス防止
`invalid_scope`	要求したスコープが LINE 側で未承認	必要なスコープ（例: `openid profile email`）のみ使用し、不要なカスタムスコープは削除
`nonce_mismatch`	フロントエンドとサーバーで生成された nonce がずれる	SDK の自動生成に任せ、手動で nonce を上書きしない
`429 Too Many Requests`（レートリミット）	短時間に多数の認可リクエストを送信	リクエスト間隔を調整し、キャンペーン時は事前に LINE へ問い合わせる

ユーザー属性マッピングと外部データベース連携例（Supabase）

Auth0 の属性マッピング

Auth0 ダッシュボードの User Profile → Metadata に picture と locale を自動保存する Rule（旧方式）または Action（推奨）を設定します。以下は Action のサンプルです。

// file: actions/post-login-mapping.js
exports.onExecutePostLogin = async (event, api) =&gt; {
  if (event.identity.provider === 'line') {
    const metadata = event.user.user_metadata || {};
    metadata.avatar = event.user.picture;
    metadata.locale = event.user.locale ?? 'ja_JP';
    api.user.setUserMetadata(metadata);
  }
};

// file: actions/post-login-mapping.js

exports.onExecutePostLogin = async (event, api) => {

if (event.identity.provider === 'line') {

const metadata = event.user.user_metadata || {};

metadata.avatar = event.user.picture;

metadata.locale = event.user.locale ?? 'ja_JP';

api.user.setUserMetadata(metadata);

}

};

Supabase と Row‑Level Security（RLS）の併用

Supabase のテーブル profiles に対し、Auth0 の sub と一致する行だけアクセスできるように RLS ポリシーを設定します。

-- テーブル例
create table profiles (
  id uuid primary key,
  auth_sub text not null unique,
  name text,
  avatar text,
  locale text
);

-- RLS ポリシー
create policy &quot;owner can read own profile&quot;
  on profiles for select using (auth.uid() = auth_sub);

-- テーブル例

create table profiles (

id uuid primary key,

auth_sub text not null unique,

name text,

avatar text,

locale text

);

-- RLS ポリシー

create policy "owner can read own profile"

on profiles for select using (auth.uid() = auth_sub);

フロントエンドからは取得した IDトークン の access_token を Authorization: Bearer <token> ヘッダーに設定して Supabase にリクエストすれば、RLS が自動的にユーザーを判定します。

📌 詳細は Supabase Docs 「Row Level Security」をご参照ください。

注意点・リスク管理

項目	内容	推奨対策
レートリミット	LINE Login の正確な上限は公開されていないが、秒間数千件程度と推測される。大量アクセス時に 429 エラーが発生する可能性あり。	大規模キャンペーン前に LINE カスタマーサポートへ問い合わせ、必要ならバックエンドでリクエストレートを制御（キューイングやトークンキャッシュ）
プライバシーポリシー	ソーシャルログインではユーザーのメールアドレスやプロフィール画像が取得できる。	取得する情報と利用目的を明示したプライバシーポリシーを必ず作成し、LINE の開発者ポリシーに準拠
ブランドロゴ使用	Auth0 と LINE の公式ロゴはそれぞれのブランドガイドラインで使用条件が規定されている。	Web サイトや資料に掲載する際は、最新の「Auth0 Brand Guidelines」https://auth0.com/brand および「LINE Brand Guidelines」https://line.me/en/company/brand に従う
トークン漏洩リスク	HTTPS で通信しないとアクセストークンが盗聴される危険がある。	開発・本番環境ともに必ず `https` を使用し、ブラウザの `SameSite=Lax` クッキー設定を推奨
依存バージョン更新	SDK のメジャーアップデートで API が変わることがある。	定期的に `npm outdated` でパッケージをチェックし、リリースノートを確認してマイグレーション手順を実施

まとめ

アカウント準備：Auth0 の無料テナントと LINE Developers のプロバイダー／チャネルを作成し、HTTPS の Callback URL を正確に設定するだけで連携の土台が完成します。
連携設定：LINE 側で OIDC 対応の Callback と openid profile email スコープを登録し、Auth0 で LINE Connection（PKCE・nonce 有効）を作成すれば、ほぼ自動的に認証フローが機能します。
実装例：React / Vue / Next.js 各フレームワーク向けの最小コードは loginWithRedirect({ connection: 'line' }) 1 行で完結。取得できるクレームは sub, name, email, picture に加えて、Actions で追加したカスタムクレームです。
セキュリティ：ID トークンの署名検証・nonce 照合・PKCE の使用は必須。カスタムクレームは名前空間付きで安全に拡張できます。
デバッグ・運用：Auth0 の Try 機能と LINE コンソールログを併用し、エラーコード別の対処法を手元に置くことで障害復旧が迅速になります。また、属性マッピングや Supabase との RLS 連携でユーザーデータ管理を一元化できます。
リスク管理：レートリミット・プライバシーポリシー・ブランドロゴ使用については公式ガイドラインに従い、HTTPS を必ず利用してください。