@fine-dev/fine-js/src/oauth.ts

Javascript client for Fine BaaS

import { type FormEventHandler, useCallback, useEffect, useState } from "react"

export type ClientInfo = {
    clientName?: string
    clientUri?: string
    policyUri?: string
    tosUri?: string
    contacts?: string[]
    redirectUris?: string[]
}

type AuthorizationData = {
    client: ClientInfo | null
    state: Record<string, any>
}

export function createOAuthApprovalHook(baseURL: string) {
    /**
     * Custom hook that encapsulates the OAuth approval logic
     */
    return function useOAuthApproval() {
        const [data, setData] = useState<AuthorizationData | null>(null)
        const [status, setStatus] = useState<"loading" | "submitting" | null>(null)
        const [error, setError] = useState<string | null>(null)

        useEffect(() => {
            const fetchAuthorizationData = async () => {
                try {
                    setStatus("loading")

                    const url = `${baseURL}/authorize${window.location.search}`
                    const response = await fetch(url, { credentials: "include" })

                    if (!response.ok) throw new Error(`Failed to fetch authorization data: ${response.statusText}`)

                    const authData = (await response.json()) as AuthorizationData | { redirectUrl: string }
                    if ("redirectUrl" in authData) return (window.location.href = authData.redirectUrl)

                    // Add default values to the client object
                    const client = (authData.client ||= {})
                    client.clientUri ||= ""
                    client.policyUri ||= ""
                    client.tosUri ||= ""
                    client.redirectUris ||= []
                    client.contacts ||= []
                    client.clientName ||= "Unknown MCP Client"

                    setData(authData)
                } catch (err) {
                    setError(err instanceof Error ? err.message : "Unknown error occurred")
                    console.error("Error fetching authorization data:", err)
                } finally {
                    setStatus(null)
                }
            }

            fetchAuthorizationData()
        }, [])

        const handleSubmit = useCallback<FormEventHandler>(
            async (e) => {
                e.preventDefault()
                if (!data) return

                try {
                    setStatus("submitting")

                    const formData = new FormData()
                    formData.append("state", btoa(JSON.stringify(data.state)))

                    const response = await fetch(`${baseURL}/authorize`, {
                        method: "POST",
                        body: formData,
                        credentials: "include"
                    })
                    if (!response.ok) throw new Error(`Authorization failed: ${response.statusText}`)

                    const { redirectUrl } = await response.json()
                    window.location.href = redirectUrl
                } catch (err) {
                    setError(err instanceof Error ? err.message : "Unknown error occurred")
                    console.error("Error during authorization:", err)
                    setStatus(null)
                }
            },
            [data]
        )

        return { status, error, handleSubmit, ...data?.client }
    }
}