nextauthを使用してバックエンドで認証する.js

カスタムバックエンドソリューションを認証する必要がある場合があります.つまり、エンドポイントを認証のためのバックエンドを持ち、nextauthを使いたいです.あなたの次の認証を扱うJS.ジェイフロント.この場合、公式ドキュメンテーションはあなたがする必要があることに関して明確でありません.この記事はNextauthであなたのバックエンドに対して認証する方法をご案内します.js

Check out the source code to the repo used to demonstrate the solution.

どのようにnextauth。jsワークス

Nextauthで.現在のログインしているユーザーを記述するデータは、フロントエンドでアクセスできるセッションに格納されます.セッションに含まれるデータを変更できます.もっとすぐに.
ネクサスJSの設定は、ファイルを作成することで行われます[...nextauth].js にpages/api/auth ディレクトリ.このファイルはすべてのリクエストに対するルートハンドラです.jsあなたはnextauthにリクエストを行うことができます.とのjsClient API or REST API . この記事ではクライアントAPIを利用するだけです.
以下はサンプルエクソンの例である.JSの設定.

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

export default NextAuth({
  providers: [
    CredentialsProvider({
      id: "login",
      async authorize(credentials) {
          //...
        },
    }),
  ],
  callbacks: {
    async signIn({ user }) {
      //...
    },
    async session({ session, token }) {
        //...
      },
    async jwt({ token, user }) {
        //... 
      },
  },
  // use env variable in production
  secret: "looselipssinkships",
});

すぐに、構成オブジェクトの各々のオプションの目的を説明するつもりです.構成オブジェクトはより多くのオプションを取ることができますが、我々はこの記事の目標に関連するオプションを見ているだけです.

プロバイダ

にproviders array , NextAuth用の認証媒体を指定します.jsネクサスJSはGoogle、Facebook、およびGithubのようなOAuthプロバイダを使用して認証をサポートしており、また、電子メールで署名しています.あなたの設定で複数のプロバイダを定義することができます.この記事では、資格情報プロバイダーを使用します.

コールバック

コールバックは、認証フローの特定の部分にフックするのに便利な非同期関数です.本稿では3つに注目します.signIn , session and jwt .

signin callback :このコールバックで、ユーザがログインを許可されているかどうかを制御できます.たとえば、ユーザーのロールを確認し、適切な応答を確認できます.

JWTコールバック:サインインプロセスでは、シグネチャコールバックの後にJWTコールバックが呼び出されます.ここではJSONウェブトークンが作成されます.トークンの詳細データを保持できます.

session callback :このコールバックで、クライアントに利用できるデータを変更できます.サインインの間、JWTコールバックはセッションコールバックの前に呼び出されます.したがって、トークンに加えられるどんな情報もすぐにトークンパラメタを通してセッションコールバックで利用可能です.

上記の写真は、サインインプロセス中にコールバックがどのように呼び出されるかの流れを説明します.

秘密

これはトークンをハッシュ化したり、クッキーをサインしたり暗号化したりするキーです.生産に必要です.

サインアップとログイン実装

誰もが自分のユニークなセットアップを持っているので、私はログインとサインアップ形式の詳細には行きません.我々が議論することは

ネクサスjsセットアップ.

構成

認証.

ネクサスjsセットアップ

ここでどのように取得し、nextauthと実行している.js

nextauthをインストールします.jsnpm install next-auth or yarn add next-auth .

加えるNEXTAUTH_URL 環境変数.プロジェクトの標準URLに設定します.例えば、

NEXTAUTH_URL="http://localhost:3000"

あなたの_app.js ファイル、SessionProviderでアプリケーションをラップします.

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

export default function App({ Component, pageProps }) {
  return (
    <SessionProvider session={pageProps.session}>
      <Component {...pageProps} />
    </SessionProvider>
  );
}

構成

以下はこの記事に使用される構成です.

import NextAuth from "next-auth";
import CredentialsProvider from "next-auth/providers/credentials";
import * as Auth from "../../../lib/auth";

export default NextAuth({
  providers: [
    CredentialsProvider({
      id: "login",
      async authorize(credentials) {
        try {
          return await Auth.login(credentials);
        } catch (error) {
          throw new Error(error.message);
        }
      },
    }),
    CredentialsProvider({
      id: "signup",
      async authorize(credentials) {
        try {
          return await Auth.signup(credentials);
        } catch (error) {
          throw new Error(error.message);
        }
      },
    }),
  ],
  callbacks: {
    async signIn({ user }) {
      if (user) return true;

      return false;
    },
    async session({ session }) {
      session.user.isLoggedIn = true;
      return session;
    },
    async jwt({ token, user }) {
      return token;
    },
  },
  // use env variable in production
  secret: "looselipssinkships",
});

つのプロバイダを使用して定義されてCredentialsProvider Nextauthから.jsログインのための1つとサインアップのための1.資格情報プロバイダは、あなたがバックエンドに対して認証したいときに必要なものです.各プロバイダはIDフィールドを持っています.idフィールドは各プロバイダー定義の識別子です.
The authorize プロバイダー定義の関数は、認証のためのロジックを含んでいます.ご覧のように、関数は資格情報としてパラメータを持ちます.あなたがnextauthに認証要求をするとき.このパラメータは認証資格を表します.その後、認証用のバックエンドに資格情報を送信します.この関数は成功した場合にオブジェクトを返し、エラー時にNULLを返します.また、エラーをスローできます.
の結果authorize 関数はsignIn 経由でコールバックuser パラメータコールバックはオブジェクトが定義されていれば真を返します.それ以外の場合はfalseを返します.
セッションコールバックに注意してください.フロントエンドで使用できるデータを追加するには、セッションオブジェクトをここで変更することができます.上記の構成では、isLoggedIn プロパティuser プロパティsession オブジェクト.
最後に、設定することを忘れないでくださいsecret 生産のオプション値.しない場合は、あなたのアプリケーションがエラーをスローします.環境変数を設定できます.NEXTAUTH_SECRET , 秘密のオプションの代わりに.

認証

サインアップとログインのために、プロセスは本質的に同じです.あなたのサインアップ/ログインフォームでsignIn 機能からnext-auth/react モジュールです.Provider IDと認証資格情報を渡すフォームフォームハンドラーで関数を呼び出します.

The signIn callback is a function in the NextAuth.js configuration where you handle the result of the authorize function, while the signIn function is a function you invoke to make an authentication request to the NextAuth.js handler.

以下の例はnextAuthへのリクエストを表示します.とのjssignIn 関数.

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

 const response = await signIn("login", {
    email: formData.get("email"),
    password: formData.get("password"),
    redirect: false,
  });

最初の引数login , IDログインのプロバイダー定義が要求を処理することを指定します.
設定redirect falseを指定すると、ページの再読み込みを禁止します.したがって、フォームの送信ハンドラでの応答を処理できます.オプションです.
The signIn 関数はこのオブジェクトを解決する約束を返す

{
  error: string | undefined;
  status: number;
  ok: boolean;
  url: string | null;
}

このオブジェクトを使用すると、ユーザー認証が成功したかどうかを判断できます.
それで、これはNextauthを使ってあなたのバックエンドで認証することについてのすべてです.jsこの記事があなたに役に立つことを願っています.楽しむ!