【Next.js】NextAuth.jsとFirebase Authenticationを使ってGoogleログイン機能を作る

2023.03.04

Next.jsで認証機能を実装するためのライブラリであるNextAuth.jsを使ってGoogleログイン機能を作成する方法を解説します。

環境

  • next @13.2.1
  • next-auth @4.19.2
  • react 18.2.0

目次
  1. FirebaseでAPIキーの発行
  2. NextAuth.jsの導入
  3. まとめ

FirebaseでAPIキーの発行

GoogleのOAuthを利用するために、以下の手順でFirebaseで認証機能のAPIキーを発行します。

  1. Firebaseでプロジェクトを作成
  2. Authenticatorを開く
  3. Sign-in methodタブより、Googleを選択し、有効とする
  4. ウェブSDK構成を開き、「ウェブ クライアント ID」と「ウェブ クライアント シークレット」が生成されていることを確認する。
    この2つのキーは後ほど使用します。

NextAuth.jsの導入

NextAuth.jsとは

NextAuth.jsは、Next.jsアプリケーションで認証機能を実装するためのJavaScriptライブラリです。OAuthをサポートしており、主要な認証プロバイダー（Google、Facebook、Twitter、GitHubなど）との統合も簡単に行うことができます。

公式ドキュメントはこちら

インストール

まずは、npmを使ってnextAuth.jsをインストールします。

npm install next-auth

設定

次に、nextAuth.jsの設定を行います。まず、pages/api/auth/[…nextauth].tsファイルを作成し以下のようなコードを書きます。

import NextAuth from "next-auth";
import GoogleProvider from "next-auth/providers/google";
export const authOptions = {
  // Configure one or more authentication providers
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_ID!,
      clientSecret: process.env.GOOGLE_SECRET!,
    }),
    // ...add more providers here
  ],
};
export default NextAuth(authOptions);

ログイン画面の作成

次に、ログイン画面を作成します。components/Login.tsxに以下のようなコードを書きます。

"use client";

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

const Login = () => {
  return (
    <div>
      <button onClick={() => signIn("google")}>
        サインイン
      </button>
    </div>
  );
};

export default Login;

認証済みユーザーの取得

最後に、認証済みユーザーの情報を取得する方法について説明します。

sessionを渡すためのSessionProviderというコンポーネントを作成します。

"use client";

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

type Props = {
  children: React.ReactNode;
  session: Session | null;
};

export const SessionProvider = ({ children, session }: Props) => {
  return <Provider>{children}</Provider>;
};

sessionにより表示の切り替えをしたいコンポーネントをSessionProviderで囲みます。

import { getServerSession } from "next-auth";
import Login from "../components/Login";
import { SessionProvider } from "../components/SessionProvider";
import { authOptions } from "../pages/api/auth/[...nextauth]";
import "../styles/globals.css";

export default async function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const session = await getServerSession(authOptions);

  return (
    <html>
      <head />
      <body>
        <SessionProvider session={session}>
          {!session ? (
            <Login />
          ) : (
            <div>Home</div>
          )}
        </SessionProvider>
      </body>
    </html>
  );
}

これにより、sessionが無い場合は、先程作成したLoginコンポーネントを表示し、sessionがある場合は、Homeと表示されます。

ログアウト機能の作成

Sidebarというcomponentが作られている前提で、「ログアウト」ボタンを押したらログアウトの処理が行われるようにします。

"use client";

import { signOut, useSession } from "next-auth/react";
import NewChat from "./NewChat";

const SideBar = () => {
  const { data: session } = useSession();

  return (
    <div className="p-2 flex flex-col h-screen">
      {session && (
        <button onClick={() => signOut()}>ログアウト</button>
      )}
    </div>
  );
};

export default SideBar;

まとめ

NextAuthを使用することで、Googleのログイン機能を簡単に作ることができ、sessionを使ったアクセス制限の実装も簡単にできました。

以上、ご覧頂きありがとうございました。

コメント