React

PromaProvider, usePromaAuth hook, and the LoginWithProma button.

Import React bindings from @proma/sdk/react.

PromaProvider

Wrap your app once at the root. The provider creates a PromaClient, restores any existing session on mount, and makes it available to all child components.

import { PromaProvider } from '@proma/sdk/react'

function App() {
  return (
    <PromaProvider
      clientId="proma_app_xxx"
      redirectUri="https://yourapp.com/callback"
      scopes={['profile', 'credits']}
    >
      <YourApp />
    </PromaProvider>
  )
}

PromaProvider accepts the same options as PromaClient plus an optional baseUrl.

usePromaAuth

The usePromaAuth hook returns the current authentication state and helpers. Must be used inside PromaProvider.

import { usePromaAuth } from '@proma/sdk/react'

function Dashboard() {
  const { user, isLoading, isAuthenticated, login, logout, client } = usePromaAuth()

  if (isLoading) return <p>Loading…</p>

  if (!isAuthenticated) {
    return <button onClick={() => login()}>Login with Proma</button>
  }

  return (
    <div>
      <p>Welcome, {user.email}</p>
      <button onClick={logout}>Log out</button>
    </div>
  )
}

Return values

Value	Type	Description
`user`	`UserInfo \| null`	The logged-in user, or `null`
`isLoading`	`boolean`	`true` while the session is being restored on mount
`isAuthenticated`	`boolean`	`true` once the user is confirmed
`login`	`(scopes?) => void`	Redirects to the Proma login page
`logout`	`() => void`	Clears the session
`client`	`PromaClient`	Direct access to the underlying client

LoginWithProma button

A drop-in button that handles the redirect for you.

import { LoginWithProma } from '@proma/sdk/react'

<LoginWithProma
  clientId="proma_app_xxx"
  redirectUri="https://yourapp.com/callback"
  scopes={['profile', 'credits']}
  className="my-button-class"
>
  Sign in with Proma
</LoginWithProma>

The children prop is optional — omitting it renders the default "Login with Proma" label with the Proma logo. The button shows "Redirecting…" while the PKCE flow is being set up.

Callback page (Next.js example)

// app/auth/callback/page.tsx
'use client'
import { useEffect } from 'react'
import { useRouter } from 'next/navigation'
import { usePromaAuth } from '@proma/sdk/react'

export default function CallbackPage() {
  const { client } = usePromaAuth()
  const router = useRouter()

  useEffect(() => {
    client.handleCallback()
      .then(() => router.push('/dashboard'))
      .catch(console.error)
  }, [client, router])

  return <p>Completing login…</p>
}