titles/components/SignIn.tsx

"use client";

import { signIn, signOut } from "next-auth/react";
import { SyntheticEvent } from "react";
import { Session } from "next-auth";

interface SignInProps {
  session: Session | null;
}

export default async function SignIn({ session }: SignInProps) {
  const handleSignIn = async (event: SyntheticEvent) => {
    event.preventDefault();
    await signIn("github");
  };

  const handleSignOut = async (event: SyntheticEvent) => {
    event.preventDefault();
    await signOut();
  };

  return session?.user ? (
    <form onSubmit={handleSignOut}>
      <button type="submit">Sign out</button>
    </form>
  ) : (
    <form onSubmit={handleSignIn}>
      <button type="submit">Sign in with GitHub</button>
    </form>
  );
}