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(props) {
  const { data: session } = useSession();
  const { borderData } = props;

  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>
  );
}