auth0シークレットページ実装【ログイン後】

今回は前回作ったログイン、ログアウト機能を応用して

auth0でシークレットページを作ります。

(ログインしないと入れないページ)

手順

では実装していきます。

今回作るページの名前はsecretにします。

secret.tsxの作成

src/pages/apiの中に

secret.tsxを作成しておいてください。

コード

import { useGetUser } from '@/actions/user';

const Secret = () => {
  const { data, loading } = useGetUser();
  return <h1>I am Secret Page</h1>;
};

export default Secret;

現時点のコードはこのようにしておきました。

ローディング処理追加

次にローディングの処理を書いていきます。

ローディング中はLoading…を返します。

import { useGetUser } from '@/actions/user';

const Secret = () => {
  const { data, loading } = useGetUser();
  if (loading) {
    return <p>Loading...</p>;
  }
  return <h1>I am Secret Page</h1>;
};

export default Secret;

ログイン中か判断する処理の追加

1.userがログインしてなかったらnull返し

ここでuserのチェックをしてログインしてなかったら

nullを返します。

import { useGetUser } from '@/actions/user';

const Secret = () => {
  const { data, loading } = useGetUser();
  if (loading) {
    return <p>Loading...</p>;
  }
  if (!data) {
    return null;
  }else{
  return <h1>I am Secret Page</h1>;
}
};

export default Secret;

2.ユーザーデータない場合ログインページへ

ユーザー情報がない場合はプライベートページを表示させる前に

ログインページへ遷移します。

これはrouter push で遷移させます。

import { useGetUser } from '@/actions/user';
import { useRouter } from 'next/router';

const Secret = () => {
  const { data, loading } = useGetUser();
  const router = useRouter();
  if (loading) {
    return <p>Loading...</p>;
  }

  if (!data) {
    router.push('/api/login');
    return null;
  } else {
    return <h1>I am Secret Page</h1>;
  }
};

export default Secret;

これによりログインしているときは

secret pageに入ることができますが

ログアウトしているときは

ログインが要求されるようになり

secret pageに入ることができなくなりました！

ですがurlから入った場合にアクセスできるという

致命的なエラーをみつけたので

それを修正していきます。

Redirect.tsxの作成

componentsの中にRedirect.tsxを作成します。

/src/components/shared/Redirecgt.tsx

このRedirect.tsxではtoで指定した所に遷移します。

※useEffectを利用

import { useRouter } from 'next/router';
import { useEffect } from 'react';

const Redirect = ({ to }) => {
  const router = useRouter();

  useEffect(() => {
    router.push(to);
  }, []);
  return null;
};

export default Redirect;

secretでRedirectを使う

secret pageで使えるようにするために

importします。

そしてデータがないときにloginページにpushするところを消して

<Redirect />に置き換えます。

import { useGetUser } from '@/actions/user';
import Redirect from '../../components/shared/Redirect';

const Secret = () => {
  const { data, loading } = useGetUser();
  if (loading) {
    return <p>Loading...</p>;
  }

  if (!data) {
    return <Redirect to={'/api/login'} />;
  } else {
    return <h1>I am Secret Page</h1>;
  }
};

export default Secret;

これでログインしていない状態での

外部からのアクセスを制限できました。

最後までお読みいただき

ありがとうございました。