💪

NextAuthでLINEログインを実装してみた

2023/06/18に公開

LINE

Next.js

NextAuth

tech

目的

NextAuthを使ってLINEログインをwebアプリに実装
+αでparallel routesを使って、ログイン状態に応じて表示を切り替える

使用ライブラリ

next: 13.4.6 (appディレクトリ使用)
next-auth: 4.22.1

LINEログインの実装

LINEログインチャネルの作成 + 設定

「LINEログインのチャネルを作成する」を参考にチャネルを作成。
その後、「LINEログイン設定」のコールバックURLにhttp://localhost:3000/api/auth/callback/lineを設定。

環境変数の設定

LINE_CLIENT_ID=
LINE_CLIENT_SECRET=
NEXTAUTH_SECRET=
NEXTAUTH_URL=http://localhost:3000

LINE_CLIENT_ID: LINEログインのチャネルの「チャネル基本設定」から取得し設定
LINE_CLIENT_SECRET: LINEログインのチャネルの「チャネル基本設定」から取得し設定
NEXTAUTH_SECRET: NextAuthのOptionsページを参考に取得し設定
NEXTAUTH_URL: NextAuthのOptionsページを参考に設定

ログインのapiを作成

app/api/auth/[...nextauth]/route.ts

import NextAuth, { AuthOptions } from 'next-auth';
import LineProvider from 'next-auth/providers/line';

const options: AuthOptions = {
  providers: [
    LineProvider({
      clientId: process.env.LINE_CLIENT_ID ?? '',
      clientSecret: process.env.LINE_CLIENT_SECRET ?? '',
    }),
  ],
};

const handler = NextAuth(options);

export { handler as GET, handler as POST };

フロントでログインボタンの実装

'use client';

import { signIn } from 'next-auth/react';
import { FC } from 'react';

const LoginButton: FC = () => (
  <button onClick={() => signIn('line')}>LINEでログイン</button>
)

ログイン状態に応じて表示を切り替える

appディレクトリ

app
└ (home)
  ├ @authenticated
  | ├ page.tsx
  | └ LogoutButton.tsx
  ├ @unauthenticated
  | ├ page.tsx
  | └ LoginButton.tsx
  └ layout.tsx

app/(home)/layout.tsx

import { getServerSession } from 'next-auth';
import { FC, ReactNode } from 'react';

interface Props {
  authenticated: ReactNode;
  unauthenticated: ReactNode;
}

const HomeLayout: FC<Props> = async ({ authenticated, unauthenticated }) => {
  // optionsはapiで使用したものを使用する
  const session = await getServerSession(options);

  return <>{session ? authenticated : unauthenticated}</>;
};

export default HomeLayout;

ポイント

getServerSessionを使用してセッションを取得。
parallel routesを参考に、ログイン時に表示するページを/@authenticated/page.tsx、非ログイン時に表示するページを/@unauthenticated/page.tsxに作成。
getServerSessionの返り値を元に、どちらを表示するかを切り替える。

今後やりたいこと

データベースと接続し、ユーザー登録の実装
LINEログイン以外のログイン方法の実装（今回は仕事でよく使うLINEログインを使用したが、自分の作りたいアプリではTwitterログインの方が親和性が高いため）

目的