Home

サインイン・サインアウトボタンの追加

サインインボタンの追加

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

'use client';
import { signIn } from 'next-auth/react';

type Props = {
  provider: string;
};

export function ButtonSignIn(props: Props) {
  return (
    <button className="cursor-pointer" onClick={() => signIn(props.provider)}>
      Sign In
    </button>
  );
}

サインアウトボタンの追加

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

'use client';
import { signOut } from 'next-auth/react';

export function ButtonSignOut() {
  return (
    <button className="cursor-pointer" onClick={() => signOut()}>
      Sign Out
    </button>
  );
}

サインインボタン、サインアウトボタンへのリンクの追加

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'; // <- 追加

const Header = () => {
  return (
...（略）...
        <nav className="flex items-center justify-between text-sm font-medium">
          <div className="p-2">
            <Link href="/about/">About</Link>
          </div>
          <div className="p-2">
            <ButtonSignIn provider="" /> {/* <- Sign Inを修正 */}
          </div>
          <AccountMenu />
        </nav>
...（略）...
  );
};

export default Header;

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

...（略）...
import Logout from '@mui/icons-material/Logout';
import { ButtonSignOut } from '../auth/ButtonSignOut'; // <- 追加

export default function AccountMenu() {
...（略）...
  return (
...（略）...
        <MenuItem onClick={handleClose}>
          <ListItemIcon>
            <Logout fontSize="small" />
          </ListItemIcon>
          <ButtonSignOut /> {/* <- Logoutを修正 */}
        </MenuItem>
...（略）...
  );
}

ブラウザで下記URLにアクセスし、ヘッダからSign Inをクリックしてください。ただし、現時点では、認証クライアントを作成していませんので、Sing Inをクリックしても、空のボックスが表示されます。

• http://localhost:3000

参考

1. Auth.js | Login
   • Next.js (Client)
2. Auth.js | Login
   • Next.js (Client)