Next.jsで認証済みの場合のみアクセスできるページの制御

概要

Webアプリケーションを作成するときに、認証が必要となるケースもあるでしょう。その際に、ログインページなど未認証の状態で通すページと認証済みではないとアクセスできないページが出てくると思います。
今回はNext.jsを使用した場合の、ページの認証制御をどう実装するかについて書いてみます。

対応方法

認証が必要なページに個別にチェック処理を入れていっても良いのですが、もう少し効率の良い実装方法がないかと探してみました。参考になりそうなのが、How to Implement Authentication in Next.JS to Protect your Routesのページで、ProtectRouteというコンポーネントを別途作成して、実際に表示するコンポーネントの親として定義して認証のチェックを行っています。
この実装でも良いと思いますが、もう少し簡易的にチェックを実装する方法を以下に記します。

実装サンプル

＜前提＞

• 上記で紹介した記事のAuthProviderは使用しません。ログイン処理は別途ログインページで実装するものとします。
• 認証情報はRecoilを使ってグローバルステートで管理します。Next.jsでRecoilを使用する実装はHow to Use Recoil.js Library in Next.js Frameworkを参考にして頂ければと思います。
• 認証が必要なページのみ、ProtectRouteを親コンポーネントに設定します。未認証の場合はルートのパスに遷移させるようにします。
• 本実装のサンプルではログイン・ログアウトの処理は割愛しています。ログイン時はloginUserStateに情報をセットされていることを前提とします。（2020/1/5追記）

ProtectRoute.js

import Router from "next/router";
import { useRecoilState } from "recoil";
import { loginUserState } from "../../atoms/LoginUser";

export const ProtectRoute = ({ children }) => {
  const [user, setUser] = useRecoilState(loginUserState);
  if (!user || !user.loginUser) {
    if (typeof window !== "undefined") {
      Router.push("/");
    }
  }
  return children;
};

samplePage.js

import Header from "../../components/common/Header";
import { ProtectRoute } from "../../components/auth/ProtectRoute";
import Sample from "../../components/sapmle/Sample";

const SamplePage = () => {
  return (
    <div>
      <ProtectRoute>
        <Header />
        <Sample />
      </ProtectRoute>
    </div>
  );
};

export default SamplePage;