next.jsでnextauth.jsを使用して資格ベースの認証を実装します

nextauth.jsおよびnext.jsを使用してユーザーアクセスを安全に管理する：資格情報ベースの認証ガイド

堅牢な認証は、Webアプリケーションへのアクセスを制御するための最重要策です。 OAUTHプロバイダー（GoogleやGitHubなど）は人気がありますが、電子メール/パスワード認証は一般的で安全な選択のままです。このガイドの詳細は、強力なnextauth.jsライブラリを使用して、next.jsアプリケーション内で資格ベースの認証を実装しています。 あなた自身のプロジェクトで簡単に実装するために、プロセスを段階的に分類します。

nextauth.jsとその資格プロバイダー

を理解しています

nextauth.jsは、next.jsの合理化された認証ソリューションであり、OAuthプロバイダーの両方をサポートし、重要なことにはこのチュートリアルではカスタム資格プロバイダーです。 後者では、電子メール/パスワード認証が可能になり、ログインプロセスをきめぶし制御できます。

nextauth.js資格プロバイダーが提供しています：

完全なカスタマイズ：
• 独自のログインロジック、エラー処理、および検証ルール（アカウント検証チェックなど）を定義します。 シンプルさとセキュリティ：
電子メール/パスワード認証の確立されたセキュリティを活用してください。
• コード実装を掘り下げましょう。

ステップ1：nextauth.jsを資格情報プロバイダーで構成

---

構成オブジェクトは、nextauth.jsの認証動作を決定します。 完全な構成コードは次のとおりです

ステップ2：認証APIルートの作成

NextAuthOptionsnextauth.jsの認証メカニズムとインターフェイスするには、APIルートが必要です。

<code class="language-javascript">import { NextAuthOptions } from "next-auth";
import CredentialProvider from "next-auth/providers/credentials";
import bcrypt from "bcryptjs";
import { dbConnect } from "@/lib/dbConnect";
import UserModel from "@/model/User";

export const authOptions: NextAuthOptions = {
  providers: [
    CredentialProvider({
      id: "credentials",
      name: "Credentials",
      credentials: {
        email: { label: "Email", type: "text" },
        password: { label: "Password", type: "password" },
      },
      async authorize(credentials: any): Promise<any> {
        await dbConnect();

        try {
          const user = await UserModel.findOne({
            $or: [
              { email: credentials.identifier },
              { username: credentials.identifier },
            ],
          });

          if (!user) {
            throw new Error("Invalid email or username");
          }

          if (!user.isVerified) {
            throw new Error("Please verify your account.");
          }

          const isPasswordCorrect = await bcrypt.compare(credentials.password, user.password);
          if (isPasswordCorrect) {
            return user;
          } else {
            throw new Error("Incorrect password.");
          }
        } catch (err: any) {
          throw new Error(err.message); //Improved error handling
        }
      },
    }),
  ],
  callbacks: {
    async jwt({ token, user }) {
      if (user) {
        token._id = user._id?.toString();
        token.isVerified = user?.isVerified;
        token.username = user?.username;
        token.isAcceptingMessages = user?.isAcceptingMessages;
      }
      return token;
    },
    async session({ session, token }) {
      if (token) {
        session.user._id = token._id?.toString();
        session.user.isVerified = token?.isVerified;
        session.user.username = token?.username;
        session.user.isAcceptingMessages = token?.isAcceptingMessages;
      }
      return session;
    },
  },
  pages: {
    signIn: "/sign-in",
    error: "/sign-in",
  },
  session: {
    strategy: "jwt",
  },
  secret: process.env.NEXTAUTH_SECRET,
};</code>

これにより、構成を簡潔にインポートし、取得リクエストと投稿リクエストの両方にハンドラーを公開します。

ステップ3：プロジェクトファイルの構造（例）

よく組織化されたプロジェクト構造を維持します：

<code class="language-javascript">// 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 };</code>

---

ステップ4：next.js 13（Appルーター）

でルートを処理します

APIルートの提供されたコードスニペットは、アプリルーターを使用してnext.js 13に対して既に正しく構成されています。

結論

<code>/lib
  /authOptions.ts
/model
  /User.ts
/app
  /api
    /auth
      /[...nextauth]/route.ts</code>

この包括的なガイドにより、nextauth.jsを使用して、next.jsプロジェクトに安全な資格ベースの認証を実装することができます。 資格プロバイダーの柔軟性により、認証フローを完全に制御できるようになり、堅牢で安全なユーザーエクスペリエンスが確保されます。データベース接続（

---

および

）を特定のセットアップに適応させることを忘れないでください。

以上がnext.jsでnextauth.jsを使用して資格ベースの認証を実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。