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(borderInfo) {
  const { data: session } = useSession();
  const [isLoading, setLoading] = useState(false);
  const [borderData, setBorderData] = useState(undefined);

  useEffect(async () => {
    setLoading(true);
    const res = await fetch('api/user/border/@me');
    const data = await res.json();
    setBorderData(data);
    setLoading(false);
  }, []);

  return (
    <div>{
      isLoading ?
        <p>Loading...</p>
        :
        <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>
          {
            !!borderData ?
              (<div>
                <img src={session.user.image} />
                <img src={`/api/border/${borderData.imageId ?? '0'}`} />
              </div>)
              : undefined
          }
        </div>
    }
    </div>
  );
}