認証用ボタンの追加

定数の定義

src/frontend/src/constants/styles.ts

/**
 * スタイル関連の定数
 */
export const STYLES = {
  ...（略）...
  // ヘッダ、フッタ関連
  HEADER: `flex items-center justify-between bg-sky-600 px-8 py-4 text-white`,
  HEADER_APP_NAME: `text-2xl font-extrabold`,
  HEADER_MENU: `flex items-center justify-between gap-4 text-sm font-medium`,
  FOOTER: `border-t px-4 py-2`,
  MENU_BUTTON: `cursor-pointer`, // <- 追加
  ...（略）...
} as const;

認証用ボタン

サインアップボタン

src/frontend/src/app/components/auth/ButtonSignUp.tsx

"use client";

import { useRouter } from "next/navigation";
import { STYLES } from "@/constants";

export function ButtonSignUp() {
  const router = useRouter();

  const handleClick = () => {
    router.push("/signup");
  };

  return (
    <button
      type="button"
      onClick={handleClick}
      className={`${STYLES.MENU_BUTTON}`}
    >
      Sign Up
    </button>
  );
}

サインインボタン

src/frontend/src/app/components/auth/ButtonSignIn.tsx

"use client";

import { useRouter } from "next/navigation";
import { STYLES } from "@/constants";

export function ButtonSignIn() {
  const router = useRouter();

  const handleClick = () => {
    router.push("/signin");
  };

  return (
    <button
      type="button"
      onClick={handleClick}
      className={`${STYLES.MENU_BUTTON}`}
    >
      Sign In
    </button>
  );
}

サインアウトボタン

src/frontend/src/app/components/auth/ButtonSignOut.tsx

"use client";

import { STYLES } from "@/constants";

import signOut from "@/api/auth/signOut";

export function ButtonSignOut() {
  const handleSignOut = async () => {
    await signOut();
    window.location.href = "/signin";
  };

  return (
    <button onClick={handleSignOut} className={`${STYLES.MENU_BUTTON}`}>
      Sign Out
    </button>
  );
}

認証用ボタンへのリンクの追加

src/frontend/src/app/components/Header.tsx

import Link from 'next/link';

import { STYLES, SETTINGS } from '@/constants';

import AccountMenu from './ui/header/AccountMenu';
import { ButtonSignUp } from './auth/ButtonSignUp'; // <- 追加
import { ButtonSignIn } from './auth/ButtonSignIn'; // <- 追加

const Header = () => {
  return (
    ...（略）...
        <nav className={`${STYLES.HEADER_MENU}`}>
          <Link href="/about/">About</Link>
          {/* ↓修正 */}
          <ButtonSignUp />
          <ButtonSignIn />
          {/* ↑修正 */}
          <AccountMenu />
        </nav>
    ...（略）...
  );
};

export default Header;

src/frontend/src/app/components/ui/header/AccountMenu.tsx

...（略）...
import Logout from '@mui/icons-material/Logout';
import { ButtonSignOut } from '../../auth/ButtonSignOut'; // <- 追加
...（略）...
  return (
    <React.Fragment>
      ...（略）...
      <Menu
        ...（略）...
      >
        <MenuItem onClick={handleClose}>
          <Avatar /> My account
        </MenuItem>
        <Divider />
        <MenuItem onClick={handleClose}>
          <ListItemIcon>
            <Logout fontSize="small" />
          </ListItemIcon>
          <ButtonSignOut /> {/* <- Logoutを修正 */}
        </MenuItem>
      </Menu>
    </React.Fragment>
  );
}

バックエンドサーバを起動した状態で、ブラウザで下記 URL にアクセスしてください。

http://localhost:3000/

メニューからSign Up、Sign Inをクリックしてください。それぞれ、サインアップページ、サインインページに移動すれば成功です。

サインインページから任意のアカウントにサインインした後、アカウントメニューからSign Outをクリックしてください。下記からアクセストークンとリフレッシュトークンが削除されていることを確認してください。

Google Chrome のデベロッパーツールを開く。
1. Applicationを開く。
  1. Storage > Local storage > http://localhost:3000 を開く。
  2. 下記の Key に値が削除されていることを確認する。
    - access
    - refresh

参考

Auth.js | Login
- Next.js (Client)
Auth.js | Login
- Next.js (Client)