Home

認証状態の判定

ヘッダ

frontend/src/app/components/Header.tsx

import Link from 'next/link';
import React from 'react';
import AccountMenu from './ui/AccountMenu';
import { ButtonSignIn } from './auth/ButtonSignIn';
import { auth } from '@/auth'; // <- 追加

const Header = async () => {  // <- asyncを追加
  const session = await auth(); // <- 追加

  return (
...（略）...
        <nav className="flex items-center justify-between text-sm font-medium">
          <div className="p-2">
            <Link href="/about/">About</Link>
          </div>
          {/* ↓修正 */}
          {!session?.user ? (
            <div className="p-2">
              <ButtonSignIn provider="Google" />
            </div>
          ) : (
            <AccountMenu />
          )}
          {/* ↑修正 */}
        </nav>
...（略）...
  );
};

export default Header;

ブラウザで下記URLにアクセスし、ヘッダのSign Inからサインインすると、Sign Inボタンが消え、右上にアカウントメニューが表示されます。また、アカウントメニューから、Sign Outをクリックすると、ヘッダ右上がSign Inに戻ります。

• http://localhost:3000