概要

NextAuth.jsを雰囲気で使っているので、ソースコードを読んで理解を深めていきます。

ゴール

設定をカスタマイズすることで処理を構築するNextAuth.jsが何をしているのか、ソースコードから明確にすることを目指します。
全体像が見えてくれば、NextAuth.jsの設定を迷うことなく書けるようになるはずです。

環境

• Next.js: 15.1.6
• NextAuth.js: 4.24.11

用語

• authOptions: 認証に関する設定値を記述したオブジェクト 本記事では、lib/authOptions.tsに書いたオブジェクトを指す
• Credentials: いわゆるID・パスワード認証

記事の構成

最初に、ログインの簡単なサンプルからNextAuth.jsにおける認証処理の書き方を見ておきます。
続いて、処理の特徴や公式ドキュメントの構成も踏まえ、何が分からないことがNextAuth.jsを難しくしているのか整理します。

そして、分からないことを解消する材料を集めにソースコードを読んでいきます。
つまり、最初に目的を見据えてからソースコードを読み進めることで、NextAuth.jsを理解するためのステップを確実に踏んでいくことを目指します。

ログイン処理のサンプル

まずはアプリケーションの認証処理をNextAuth.jsでどう実現するのか、簡単なサンプルを示します。
今回はシンプルにユーザ名とパスワードでログインすることにします。

けっこう長い処理なので、ひとまずどんなファイルがあるのかだけ掴めれば十分です。

設定(src/lib/authOptions.ts)

import CredentialsProvider from "next-auth/providers/credentials";

import {NextAuthOptions} from "next-auth";



// ログイン処理の設定を記述

export const authOptions: NextAuthOptions = {

    // プロバイダ

    // ユーザの本人確認を責務とする

    providers: [

        // いわゆるID・パスワード方式

        // OAuthなども使えるが、今回はシンプルに扱えるクレデンシャル方式を採用

        CredentialsProvider({

            // ログインのタイミングで呼ばれる関数

            // ここで画面の入力情報が特定のユーザと紐づくか、つまり認証の成否を判定

            authorize(credentials, req) {

                // (後述)

                // credentialsオブジェクトのプロパティは、signIn()で渡された引数と対応

                if (!credentials?.username || !credentials?.password) {

                    return null;

                }

                const {username, password} = credentials;



                // バックエンドなどと通信し、認証

                // ex:

                // await login(username, password);



                return {

                    id: "USERID",

                    name: username

                }

            },

            // 本来は、このオプションからログイン画面を組み立てるときに参照されるプロパティ

            // ただし、authorize関数の引数credentialsのキー名がここで定義したものに限定されるので、名前だけ設定しておく

            credentials: {username: {}, password: {}},

        })

    ],

    // トークンをハッシュ化させたりなど、機密情報を生成するのに使うランダムな文字列

    secret: process.env.AUTH_SECRET,

    // 特定のタイミングでNextAuth.jsから呼ばれる処理

    callbacks: {

        // JWTトークンを生成/更新する準備が整ったときに呼ばれる

        // トークンに何を含めるか

        async jwt({token, user}) {

            if (user?.name) {

                token.name = user.name

            }

            return token;

        },

    }

}

Route Handler(src/app/api/auth/[...nextauth]/route.ts)

import NextAuth from "next-auth";

import {authOptions} from "@/lib/authOptions";



// サーバ側でログイン処理を実行するためのエンドポイント

const handler = NextAuth(authOptions);



export {handler as GET, handler as POST};

参考

ログイン処理呼び出し(src/app/sign-in/page.tsx)

'use client'

import {signIn} from "next-auth/react";



// ログイン画面 ボタンを押したらログイン成功画面へ遷移

export default function SignInPage() {



    const handleSignIn = () => {

        // 第一引数は認証プロバイダ名 プロバイダによってリダイレクトなどの制御が異なるので指定が必要

        signIn('credentials', {

            // ログイン処理後のリダイレクト先

            callbackUrl: '/welcome',

            // 以降はクレデンシャル情報

            username: 'Snivy',

            password: 'strongPassword',

        });

    };



    return (

        <div>

            <button onClick={handleSignIn}>

                ログイン

            </button>

        </div>

    );

}

参考

NextAuth.jsの難しさ

さて、アプリケーションで書いたNextAuth.js向けのコードを見ると、オプションがたくさん書かれていて難しそうです。
これらのオプションを適切に組み合わせることで、NextAuth.jsの提供する認証処理は完成します。

ですが、公式ドキュメントにはサンプルがほとんどなく、部分に対する解説しかありません。
つまり、ドキュメントを読んでもどのオプションをいつ・どのように使えば良いのか全体像を理解するのが困難でした。

まとめると、十分なサンプルが提供されておらず、オプションの使い方が見えてこないことで
NextAuth.jsが難しく感じているように思えました。

…

記事の続きは下のURLをクリック！

https://rightcode.co.jp/blogs/51242

エンジニア積極採用中です！

現在、WEBエンジニア、モバイルエンジニア、デザイナー、営業などを積極採用中です！

採用ページはこちら：https://rightcode.co.jp/recruit

社員の声や社風などを知りたい方はこちら：https://rightcode.co.jp/blogs?category=life

社長と一杯飲みながらお話しませんか？（転職者向け）

特設ページはこちら： https://rightcode.co.jp/gohan-sake-president-talk

もっとワクワクしたいあなたへ

現在、ライトコードでは「WEBエンジニア」「モバイルエンジニア」「ゲームエンジニア」、「デザイナー」「WEBディレクター」「営業」などを積極採用中です！

ライトコードは技術力に定評のある受託開発をメインにしているIT企業です。

有名WEBサービスやアプリの受託開発などの企画、開発案件が目白押しの状況です。

• もっと大きなことに挑戦したい！
• エンジニアとしてもっと成長したい！
• モダンな技術に触れたい！

現状に満足していない方は、まずは、エンジニアとしても第一線を走り続ける弊社代表と気軽にお話してみませんか？

ネット上では、ちょっとユルそうな会社に感じると思いますが（笑）、
実は技術力に定評があり、沢山の実績を残している会社ということをお伝えしたいと思っております。

• ライトコードの魅力を知っていただきたい！
• 社風や文化なども知っていただきたい！
• 技術に対して熱意のある方に入社していただきたい！

一度、【Wantedly内の弊社ページ】や【コーポレートサイト】をのぞいてみてください。