Next.js + Auth0でのルートの保護

2022-01-13

工事中ですが、次のようなページをポップアップメニューから出せるとします。

ただしログインしたときだけこのページを表示するための方法について調べました。

これを実現するには、次のようにします。

import React from 'react';
import { withPageAuthRequired } from '@auth0/nextjs-auth0';
import Layout from '../components/Layout';

const contact = withPageAuthRequired(() => {
  return (
    <Layout>
      <h1 className='flex text-4xl text-blue-600/80 font-bold justify-center'>
        お問い合わせ
      </h1>
      <article className=' pt-6 ml leading-loose'>
        <p>工事中です。</p>
      </article>
    </Layout>
  );
});

export default contact;

これで、ログインしていないときは、Auth0の認証画面に切り替わります。

こちらのドキュメントを見ると違う書き方となっています。