Amplify Gen 2 に OAuth認証を追加してみよう！ - LINE ログイン機能を追加

Last updated at 2026-05-01Posted at 2026-05-01

はじめに

前回の記事では、Amplify Gen 2 の Cognito 認証に Google ログインを追加しました。

今回は LINE ログイン を追加してみます。
LINEであれば大抵の人が使っていますし、スマホでQRコードを読み込むだけでログインできるので、日本向けのアプリでは特に有効な選択肢です。

まずは結論から

LINE は OIDC Discovery に対応しているため、Cognitoへの追加が容易
Cognito の「カスタム OIDC プロバイダー」として登録
カスタム OIDC ではログインボタンを自動表示しないため、カスタムUIの実装が必要
メールアドレスの取得には LINE への申請が必要
コード変更量は Google 版と同程度で少ない

Cognitoログイン画面にこんな感じのLINEのログインボタンを追加できます。

想定される読者

Amplify Gen 2 で認証を実装したことがある方
LINE ログインを自分のアプリに追加したい方
Google 版の記事を読んで、他のプロバイダーも試してみたい方

Google版との違い

LINE は Cognito のネイティブプロバイダーではなく、カスタム OIDC プロバイダーとして統合します。Google 版との主な違いを整理しておきます。

項目	Google（ネイティブ）	LINE（カスタム OIDC）
統合方式	`externalProviders.google`	`externalProviders.oidc[]`
開発者コンソール	Google Cloud Console	LINE Developers Console
issuerUrl	不要（ネイティブ）	`https://access.line.me`
費用	無料	無料
ログインボタン	Authenticator が自動表示	自動表示されない → カスタム UI 必須
signInWithRedirect	`{ provider: 'Google' }`	`{ provider: { custom: 'LINE' } }`
メール取得	標準で取得可能	LINE への申請が必要
OIDC プロキシ	不要	不要

ポイントは「カスタム UI が必要」と「メール取得に申請が必要」の 2 点です。
それ以外は Google 版とほぼ同じ流れで進められます。

ネイティブプロバイダー
Cognito が最初から組み込みでサポートしている Google/Apple/Facebook/Amazon の4つのプロバイダー。Amplify では externalProviders.google のように専用の設定キーがあり、ログインボタンを自動表示してくれます。

カスタム OIDC プロバイダー
上記 4 つ以外で、OIDC（OpenID Connect）の仕様に準拠しているサービスを接続する方法です。Amplify では externalProviders.oidc[] 配列に設定を追加します。LINEのように OIDC Discovery に対応していると、Cognito に issuerUrl を指定することで、この Discovery エンドポイントから自動的にメタデータを取得して設定を行います。

実装してみよう

それでは、さっそく実装に入ります。

全体の流れ

Google 版と同様に、シークレットとリダイレクト URI の関係で複数回のデプロイが必要です。

ソースコードの変更（Amplify 認証設定 + フロントエンド）
依存関係の更新（npm install）
GitHub へプッシュ & Amplify デプロイ（失敗）
シークレットの設定
Amplify 再デプロイ（成功）
Cognito の値取得
LINE Developers Console 設定
シークレットの更新
ソースコードの変更（リダイレクト URL）
GitPush & Amplify デプロイ

1. ソースコードの変更

ベースとなる Amplify テンプレートは以下を使っています。

バックエンド（認証設定）

amplify/auth/resource.ts を修正して、LINE を OIDC プロバイダーとして追加します。

amplify/auth/resource.ts (変更前)

import { defineAuth } from "@aws-amplify/backend";

export const auth = defineAuth({
  loginWith: {
    email: true,
  },
});

amplify/auth/resource.ts (変更後)

import { defineAuth, secret } from "@aws-amplify/backend";

export const auth = defineAuth({
  loginWith: {
    email: true,
    externalProviders: {
      oidc: [
        {
          name: "LINE",
          clientId: secret("LINE_CLIENT_ID"),
          clientSecret: secret("LINE_CLIENT_SECRET"),
          issuerUrl: "https://access.line.me",
          scopes: ["openid", "profile", "email"],
          attributeMapping: {
            email: "email",
            fullname: "name",
            profilePicture: "picture",
          },
        },
      ],
      callbackUrls: [
        "http://localhost:3000/",
        "https://<your-app>.amplifyapp.com/",   // 本番ドメインが決まったら追加
      ],
      logoutUrls: [
        "http://localhost:3000/",
        "https://<your-app>.amplifyapp.com/",   // 本番ドメインが決まったら追加
      ],
    },
  },
});

ポイントは以下の通り。

issuerUrl に https://access.line.me を指定（LINE の OIDC Discovery エンドポイント）
name は Cognito の制約で 3〜32 文字。"LINE" を推奨
callbackUrlsとlogoutUrlsには後ほどAmplify本番ドメインを設定

フロントエンド（LINE ログインボタン）

Google 版では import "aws-amplify/auth/enable-oauth-listener" の 1 行追加だけで済みましたが、LINE はカスタム OIDC のため ログインボタンのカスタム実装 が必要です。

まず、LINE ログインボタンのコンポーネントを作成します。

src/components/auth/LineLoginButton.tsx

"use client";

import { signInWithRedirect } from "aws-amplify/auth";

/** LINE ロゴ SVG — path data is the official LINE icon */
const LineIcon = () => (
  <svg width="20" height="20" viewBox="0 0 24 24" fill="#fff">
    <path d="M19.365 9.863c.349 0 .63.285.63.631 0 .345-.281.63-.63.63H17.61v1.125h1.755c.349 0 .63.283.63.63 0 .344-.281.629-.63.629h-2.386a.63.63 0 0 1-.63-.629V8.108c0-.345.282-.63.63-.63h2.386c.349 0 .63.285.63.63 0 .349-.281.63-.63.63H17.61v1.125h1.755zm-3.855 3.016a.63.63 0 0 1-.63.629.626.626 0 0 1-.51-.262l-2.397-3.274v2.906a.63.63 0 0 1-.629.63.63.63 0 0 1-.63-.63V8.108a.63.63 0 0 1 .63-.63c.2 0 .385.096.51.262l2.397 3.274V8.108c0-.345.282-.63.63-.63.349 0 .629.285.629.63v4.771zm-5.741 0a.63.63 0 0 1-1.26 0V8.108a.63.63 0 0 1 1.26 0v4.771zm-2.527.629H4.856a.63.63 0 0 1-.63-.629V8.108c0-.345.282-.63.63-.63.349 0 .63.285.63.63v4.141h1.756c.348 0 .629.283.629.63 0 .344-.282.629-.629.629M24 10.314C24 4.943 18.615.572 12 .572S0 4.943 0 10.314c0 4.811 4.27 8.842 10.035 9.608.391.082.923.258 1.058.59.12.301.079.766.038 1.08l-.164 1.02c-.045.301-.24 1.186 1.049.645 1.291-.539 6.916-4.078 9.436-6.975C23.176 14.393 24 12.458 24 10.314"/>
  </svg>
);

export default function LineLoginButton() {
  const handleClick = () => {
    signInWithRedirect({ provider: { custom: "LINE" } });
  };

  return (
    <button
      type="button"
      aria-label="LINE でログイン"
      title="LINE でログイン"
      onClick={handleClick}
      style={{
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        gap: "0.5rem",
        width: "100%",
        height: 48,
        border: "none",
        borderRadius: 8,
        backgroundColor: "#06c755",
        color: "#fff",
        fontSize: "1rem",
        fontWeight: 600,
        cursor: "pointer",
      }}
    >
      <LineIcon />
      LINE でログイン
    </button>
  );
}

ポイントは signInWithRedirect の引数です。
Google のようなネイティブプロバイダーでは { provider: 'Google' } と書きますが、カスタム OIDC では { provider: { custom: "LINE" } } と書きます。
"LINE" は amplify/auth/resource.ts の name と一致させてください。

フロントエンド（Authenticator への統合）

作成した LINE ボタンを Authenticator のサインイン画面に組み込みます。

src/lib/amplify/AmplifyProvider.tsx

"use client";

import { Amplify } from "aws-amplify";
import { Authenticator } from "@aws-amplify/ui-react";
import "@aws-amplify/ui-react/styles.css";
import "aws-amplify/auth/enable-oauth-listener";  // OAuth リダイレクト処理に必須
import LineLoginButton from "@/src/components/auth/LineLoginButton";

let configured = false;
try {
  const outputs = require("@/amplify_outputs.json");
  Amplify.configure(outputs.default ?? outputs);
  configured = true;
} catch {
  console.info(
    "[AmplifyProvider] amplify_outputs.json が見つかりません。sandbox を起動してください。"
  );
}

/** Amplify が設定済みかどうかを返す */
export function isAmplifyConfigured(): boolean {
  return configured;
}

/** Authenticator の SignIn フッターに LINE ボタンを追加 */
const authenticatorComponents = {
  SignIn: {
    Footer() {
      return <LineLoginButton />;
    },
  },
};

export default function AmplifyProvider({
  children,
}: {
  children: React.ReactNode;
}) {
  if (!configured) {
    return <>{children}</>;
  }
  return (
    <Authenticator components={authenticatorComponents}>
      {children}
    </Authenticator>
  );
}

import "aws-amplify/auth/enable-oauth-listener" は Google 版と同様に必須です。これがないと OAuth リダイレクト後のトークン処理が行われず、ログインが完了しません。

2. 依存関係の更新

ソースコードを変更したら、npm install を実行して package-lock.json を更新しておきます。

npm install

この手順を忘れると、Amplify Hosting のビルド時に npm ci が失敗します。package.json と package-lock.json の間で依存関係のバージョンが不一致になるためです。

3. Amplify デプロイ

GitHub に Push して、Amplify へデプロイします。

AWS コンソールから Amplify を開いて、新しいアプリを作成します。

デフォルト設定のまま進めて、デプロイを実行します。

シークレットの設定がないためデプロイは失敗します。（想定通り）
デプロイ実行後、４項のシークレットの設定をサクッと終わらせれば、失敗せずに完了できます。その場合は６項から進めてください。

4. シークレットの設定

Amplify のアプリを開いて、ホスティング → シークレット → シークレットを管理 と進めます。

次のようにシークレットを設定します。値はとりあえず Dummy としておきます。

変数	値
LINE_CLIENT_ID	Dummy
LINE_CLIENT_SECRET	Dummy

こんな感じです。

5. Amplify 再デプロイ

デプロイ画面を開いて、このバージョンを再デプロイ を実行します。
今度は成功します。

6. Cognito の値取得

Cognito が作成されるので、AWS コンソールから Cognito のユーザープールを開きます。
ドメインを開いて、今回作成されたドメインを取得します。

https://<your-cognito-domain>.auth.<region>.amazoncognito.com/

こちらで取得できます。

7. LINE Developers Console 設定

ここから LINE 側の設定をしていきます。
LINE Developers Console にアクセスします。

プロバイダーの作成

LINE Developers Console にログインし、プロバイダーを作成します。
既存のプロバイダーがあればそれを使っても構いません。

LINE Login チャネルの作成

プロバイダーのページで 新規チャネル作成 を選択します。

以下の情報を入力します。

項目	設定値
チャネルの種類	LINEログイン
サービスを提供する地域	日本
会社・事業者の所在国・地域	日本
チャネル名	アプリの名前（`Cognito Login Test` 等）
チャネル説明	アプリの説明（`AWS Cognito Oauth Login機能` 等）
アプリタイプ	ウェブアプリにチェック
2要素認証の必須化	ON/OFF どちらでも
メールアドレス	連絡先メール

チャネルの種類

チャネル名、他

LINE開発者契約に同意して作成を選択します。

アプリタイプ で ウェブアプリ にチェックを入れるのを忘れないでください。これが無効だとウェブアプリからの LINE ログインが動作しません。

コールバック URL の設定

チャネルの LINEログイン設定 タブを開き、コールバックURL に以下を設定します。

https://<your-cognito-domain>.auth.<region>.amazoncognito.com/oauth2/idpresponse

手順 6 で取得した Cognito ドメインを使ってください。

Channel ID と Channel Secret の取得

チャネルの チャネル基本設定 タブを開き、以下の値を控えます。

項目	用途
チャネルID	`LINE_CLIENT_ID` として使用
チャネルシークレット	`LINE_CLIENT_SECRET` として使用

チャネルID。シークレットは下の方。

メールアドレス取得の申請（重要）

LINE はデフォルトではメールアドレスを返しません。
Cognito は email を必須属性としているため、申請なしでは attributes required: [email] エラーが発生します。

チャネルの チャネル基本設定 タブで、OpenID Connect セクションの メールアドレス取得権限 から申請を選択します。

申請といってもそこまで大変なものではなく、「メールアドレスの取得・利用目的についてユーザーに通知・同意を取得している画面のスクリーンショット」があれば大丈夫です。

審査は即座に完了します。以下の画面になったら申請完了です。

また、参考までに今回の申請に使用したプライバシーポリシーの画面イメージはこちらです。

8. シークレットの更新

Amplify に戻ります。
ホスティング → シークレット → シークレットを管理 と進みます。

手順 7 で取得した Channel ID と Channel Secret の値で、シークレットを更新します。

変数	値
LINE_CLIENT_ID	（Channel ID の値）
LINE_CLIENT_SECRET	（Channel Secret の値）

9. ソースコードの変更

LINE 認証後、Cognito からトップ画面へリダイレクトするための URL を設定します。
手順 1 で <your-app> としていた箇所を、Amplify で払い出された実際のドメインに書き換えます。

amplify/auth/resource.ts (抜粋)

      callbackUrls: [
        "http://localhost:3000/",
        "https://<your-app>.amplifyapp.com/",   // 本番ドメインが決まったら追加
      ],
      logoutUrls: [
        "http://localhost:3000/",
        "https://<your-app>.amplifyapp.com/",   // 本番ドメインが決まったら追加
      ],