Docusaurusで会員専用ログインページを実装する方法

はじめに

今回はdocusaurusでの会員専用のログインページと画面制御の方法を解説します。今回の記事のソースコードに関しては、こちらの記事を基に作成しています。

前提条件

Docusaurusのプロジェクトが既に作成されていること

パッケージのインストール

下記のパッケージをインストールしてください

firebase: このパッケージを使用することで、Firebaseの認証機能を使用してユーザ認証を実装することができます。
docusaurus2-dotenv: このパッケージを使用することで、Docusaurusプロジェクト内で環境変数を扱うことができます。

npm i firebase docusaurus2-dotenv

docusaurus.config.tsの更新

ここで、先ほどインストールしたプラグインを組み込む設定をします。

plugins: [
  [
    'docusaurus2-dotenv',
    {
      systemvars: true
    }
  ]
],

手動でSwizzleを行う

Swizzleとは、Docusaurusで提供されているデフォルトのテーマコンポーネントをカスタマイズする機能のことです。今回の場合は、src/theme/Root.jsを作成し、そこにカスタムコンポーネントを作成します。

// src/theme/Root.js

import { signInWithGoogle, logout, auth } from "./firebase"; // Firebaseからの認証関連関数をインポート
import Loading from "./Loading"; // ローディングコンポーネントをインポート
import { useLocation } from "react-router-dom"; // 現在のURL情報を取得するためのフックをインポート

// Default implementation, that you can customize
export default function Root({ children }) {
  const [userAuth, setUserAuth] = useState(null); // ユーザー認証情報の状態
  const [authLoading, setAuthLoading] = useState(true); // 認証プロセスのローディング状態
  const location = useLocation(); // 現在のロケーション情報を取得

  useEffect(() => {
    // 認証状態の変更を監視する
    const unsubscribe = auth.onAuthStateChanged(async function (user) {
      if (user !== null) {
        setUserAuth(user); // ユーザーが存在する場合は、認証情報をセット
      }
      setAuthLoading(false); // 認証プロセス終了
    });

    return () => unsubscribe(); // コンポーネントのアンマウント時に監視を解除
  }, []);

  const isAllow = () => {
    // 特定のパスへのアクセスを認証済みユーザーに限定するロジック
    if (location.pathname.startsWith("/news") &amp;&amp; !userAuth?.email) {
      return false; // "/news"で始まるパスへのアクセスは認証済みユーザーのみ許可
    }
    return true; // それ以外のパスはアクセス許可
  };

  if (authLoading) {
    return (
      <>
        <Loading />
        <div style={{ display: "none" }}>{children}</div>


      </>
    );
  }

  return (
    <>
      {isAllow() ? (
        <>
          {userAuth &amp;&amp; (
            <a
              style={{ marginRight: 15, cursor: "pointer", color: "#222222" }}
              onClick={() => logout(() => window.location.reload())}
            >
              Logout
            </a>
          )}
          {children}
        </>
      ) : (
        <div className="login">
          <div className="login__container">
            <button
              className="login__btn login__google"
              onClick={signInWithGoogle}
            >
              Login with Google
            </button>
          </div>


        </div>


      )}
    </>
  );
}

ここでは、認証プロセス中のローディングされている際のコンポーネントを実装します。

// src/theme/Loading.js


const Loading = () => {
  return (
    <div>
    Loading...
    </div>


  );
};

export default Loading;

Firebaseでの認証を実装

次に、Firebaseを使用してGoogle認証を簡単に実装します。

// src/theme/firebase.js

import "firebase/storage";
import "firebase/auth";
import {
  GoogleAuthProvider,
  getAuth,
  signInWithPopup,
  signOut,
} from "firebase/auth";

const app = firebase.initializeApp({
  apiKey: process.env.FIREBASE_API_KEY,
  authDomain: process.env.FIREBASE_AUTH_DOMAIN,
  projectId: process.env.FIREBASE_PROJECT_ID,
  storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
});

export const auth = getAuth(app); // Firebaseアプリから認証オブジェクトを取得
export const googleProvider = new GoogleAuthProvider(); // Google認証プロバイダのインスタンスを作成

// ログアウト処理
export const logout = (afterAction = () => {}) => {
  signOut(auth).then((r) => afterAction(null));
};

// Googleでのサインイン処理
export const signInWithGoogle = async () => {
  try {
    const res = await signInWithPopup(auth, googleProvider);
  } catch (err) {
    console.error(err);
    alert(err.message);
  }
};

firebaseの設定情報の取得

こちらの記事を参考にfirebaseの設定情報を取得します。

備考

Firebaseの設定情報を取得する際はwebを選択することに注意してください

ここで、Firebaseの設定を貼り付けます。

// .env

FIREBASE_API_KEY=
FIREBASE_AUTH_DOMAIN=
FIREBASE_PROJECT_ID=
FIREBASE_STORAGE_BUCKET=

より良くするには

CSSの実装: cssを記載してレイアウトを整える。
ローディング状態の管理: 認証プロセス中にユーザにローディング画面を表示する。これにより、ユーザ体験の向上がする。
エラーハンドリング: 認証プロセス中に発生する可能性のあるエラーを適切にハンドリングすることで、ユーザ体験を向上する。

参考

備考

Hakky ではエンジニアを募集中です！「まずは話を聞いてみたい」という方も是非お気軽に採用ページからお問い合わせくださいませ。