Home

リソースの保護

サーバサイド

frontend/src/app/myaccount/page.tsx

...（略）...
const MyAccountPage = async () => {
  const session = await auth();
  if (!session) return <div>Not authenticated</div>; // <- 追加
...（略）...
};

export default MyAccountPage;

サインアウトした状態で、下記URLにアクセスすると、セッション情報が表示されずに、「Not authenticated」と表示されます。

• http://localhost:3000/myaccount

サインイン後は、正常にセッション情報が表示されます。

クライアントサイド

frontend/src/app/components/HelloAccount.tsx

...（略）...
const HelloAccount = () => {
  const { data: session, status } = useSession();

  return (
    <>
      {/* ↓修正 */}
      {status === 'loading' ? (
        <div>Loading...</div>
      ) : !session?.user ? (
        <div>ようこそ ゲスト さん！</div>
      ) : (
        <div>ようこそ {session.user.name} さん！</div>
      )}
      {/* ↑修正 */}
    </>
  );
};

export default HelloAccount;

サインアウトした状態で、下記URLにアクセスすると、「ようこそ ゲスト さん！」と表示されます。サインイン後は、「ようこそ 【ユーザ名】 さん！」のようにアカウント情報が表示されます。

• http://localhost:3000

参考

1. Auth.js | Protecting
   • Next.js (Client)