useUserProfile hook for Amplify auth

use-user-profile.tsx

import type { PropsWithChildren } from "react"
import { useState, createContext, useEffect, useContext } from "react"
import { useAuthenticator } from "@aws-amplify/ui-react"
import { fetchUserAttributes } from "aws-amplify/auth"

type UserProfile = {
  /**
   * the sub
   */
  id: string
  /**
   * the actual email
   */
  email: string
  /**
   * "preferred_username" but without the alias attributes
   */
  displayName: string
  /**
   * whether the user is verified
   * @default false
   */
  isVerified: boolean
}

const UserProfileContext = createContext<UserProfile | null>(null)

async function fetchUserProfile(): Promise<UserProfile> {
  const attributes = await fetchUserAttributes()
  return {
    id: attributes.sub,
    email: attributes.email,
    displayName: attributes.preferred_username,
    isVerified: attributes.email_verified,
  }
}

export function UserProfileProvider({ children }: PropsWithChildren<{}>) {
  const { authStatus } = useAuthenticator()
  const [user, setUser] = useState<UserProfile | null>(null)

  useEffect(() => {
    if (user && authStatus === "unauthenticated") {
      setUser(null)
    }
    if (!user && authStatus === "authenticated") {
      fetchUserProfile().then(setUser)
    }
  }, [authStatus])

  return (
    <UserProfileContext.Provider value={user}>
      {children}
    </UserProfileContext.Provider>
  )
}

export function useUserProfile() {
  const context = useContext(UserProfileContext)
  if (context === undefined) {
    throw new Error("useUserProfile must be used within a UserProfileProvider")
  }
  return context
}