borders/components/userInfo.js

import { useSession, signIn, signOut } from "next-auth/react";
import { useEffect, useState } from "react";
import styles from "../styles/Components.module.css";

export default function UserInfo() {
  const { data: session } = useSession();
  const [borderData, setBorderData] = useState(null);

  useEffect(() => {
    fetch("api/user/border/@me")
      .then((res) => res.json())
      .then((data) => setBorderData(data));
  }, []);

  return (
    <div>
      <p className={styles.description}>
        {session
          ? `Signed in as ${session.user.name} (${borderData?.discordId})`
          : "Not signed in"}
        <br />
        {session ? (
          <button onClick={() => signOut()}>Sign Out</button>
        ) : (
          <button onClick={() => signIn()}>Sign In</button>
        )}
      </p>
    </div>
  );
}