Skip to content
zidane
UI kit reference

components/BrowserSignIn

import { … } from 'zidane-ui'ui/src/components/BrowserSignIn.tsx

Components#

BrowserSignInComponent#

Renders a browser sign-in's current state, with Cancel while it runs and Retry once it failed.

TypeScript
function BrowserSignIn(props: BrowserSignInProps): Element

Parameters

Parameters
NameTypeDescription
propsBrowserSignInProps

Component props.

Returns

Element

Props

BrowserSignIn props
NameTypeDescription
className?string

Extra classes on the panel.

onCancel?() => void

Stops the sign-in. Absent: no Cancel button.

onRetry?() => void

Starts it again after a failure. Absent: no Retry button.

onSubmit?(text: string) => void

Called with what the user typed: the answer to a prompt, or a redirect URL or a code. The user pastes one while the page is open, when the browser cannot reach this computer. Absent: no field.

servicestring

What is being signed in to, such as "Anthropic".

stateBrowserSignInState

Where the sign-in is.

style?CSSProperties

Inline styles on the root element, merged after the component's own.

ui/src/components/BrowserSignIn.tsx:72

Interfaces#

BrowserSignInPropsInterface#

Props for BrowserSignIn.

TypeScript
interface BrowserSignInProps

Properties

BrowserSignInProps properties
NameTypeDescription
className?string

Extra classes on the panel.

onCancel?() => void

Stops the sign-in. Absent: no Cancel button.

onRetry?() => void

Starts it again after a failure. Absent: no Retry button.

onSubmit?(text: string) => void

Called with what the user typed: the answer to a prompt, or a redirect URL or a code. The user pastes one while the page is open, when the browser cannot reach this computer. Absent: no field.

servicestring

What is being signed in to, such as "Anthropic".

stateBrowserSignInState

Where the sign-in is.

style?CSSProperties

Inline styles on the root element, merged after the component's own.

ui/src/components/BrowserSignIn.tsx:46

Types#

BrowserSignInStateType#

Where a browser sign-in is.

  • starting: the flow is starting.
  • url: the sign-in page is open in the browser. instructions is the provider's own line, when it has one.
  • device: a device flow: userCode goes on the page at url.
  • prompt: the provider asks a question, such as a code to paste, or picks among options.
  • progress: a status line while it finishes.
  • done: signed in, as account when the provider names it.
  • error: it failed.
TypeScript
type BrowserSignInState =
  | { kind: 'starting' }
  | { instructions?: string; kind: 'url'; url: string }
  | { expiresInSeconds?: number; kind: 'device'; url: string; userCode: string }
  | { kind: 'prompt'; message: string; options?: readonly string[]; placeholder?: string }
  | { kind: 'progress'; message: string }
  | { account?: string; kind: 'done' }
  | { kind: 'error'; message: string }

ui/src/components/BrowserSignIn.tsx:26