Use the React bindings

The React package wraps the client with one provider and exposes each in-progress flow as renderable state and actions.

Provide the client

import { AuthDanceProvider } from "auth-dance/react";

<AuthDanceProvider client={client}>
  <App />
</AuthDanceProvider>

useAuthDanceClient() reads that client. useAuthDanceTokens(), useAuthDanceIdentity(), and useAuthDanceSession() update when the client's credentials change.

Render one flow

AuthDanceFlowProvider starts a named flow. AuthDancePromptSwitch chooses your component by prompt name.

import {
  AuthDanceFlowProvider,
  AuthDancePromptSwitch,
} from "auth-dance/react";

<AuthDanceFlowProvider flow="sign-in">
  <AuthDancePromptSwitch
    prompts={{
      email: (prompt, flow) => (
        <EmailField disabled={flow.pending} onSubmit={flow.submitPrompt} />
      ),
      password: (prompt, flow) => (
        <PasswordField disabled={flow.pending} onSubmit={flow.submitPrompt} />
      ),
    }}
  />
</AuthDanceFlowProvider>

Your components own labels, fields, help text, and layout. The flow handle supplies prompt, current, choices, pending, error, and the actions that move the dance.

Use the hook directly

Use useAuthDanceFlow when the screen needs to arrange prompts itself.

const flow = useAuthDanceFlow({
  flow: "rotate",
  name: "password",
  onDone: () => navigate({ to: "/settings/security" }),
});

Actions on the React handle catch failures, place the last failure in flow.error, and return undefined. Render that error near the action that caused it, and call flow.clearError() before a new attempt when appropriate.