# components/BrowserSignIn (zidane-ui)

Import: `import { … } from 'zidane-ui'`. Source: [ui/src/components/BrowserSignIn.tsx](https://github.com/Tahul/zidane/blob/main/ui/src/components/BrowserSignIn.tsx).

## Components

### `BrowserSignIn`

Component.

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

```ts
function BrowserSignIn(props: BrowserSignInProps): Element
```

**Parameters**

- `props` (`BrowserSignInProps`): Component props.

**Returns** `Element`

**Props**

- `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.
- `service` (`string`): What is being signed in to, such as "Anthropic".
- `state` (`BrowserSignInState`): Where the sign-in is.
- `style?` (`CSSProperties`): Inline styles on the root element, merged after the component's own.

Source: [ui/src/components/BrowserSignIn.tsx:72](https://github.com/Tahul/zidane/blob/main/ui/src/components/BrowserSignIn.tsx#L72)

## Interfaces

### `BrowserSignInProps`

Interface.

Props for [`BrowserSignIn`](https://zidane.si/docs/reference/ui-components-browser-sign-in.md#BrowserSignIn).

```ts
interface BrowserSignInProps
```

**Properties**

- `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.
- `service` (`string`): What is being signed in to, such as "Anthropic".
- `state` (`BrowserSignInState`): Where the sign-in is.
- `style?` (`CSSProperties`): Inline styles on the root element, merged after the component's own.

Source: [ui/src/components/BrowserSignIn.tsx:46](https://github.com/Tahul/zidane/blob/main/ui/src/components/BrowserSignIn.tsx#L46)

## Types

### `BrowserSignInState`

Type.

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.

```ts
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 }
```

Source: [ui/src/components/BrowserSignIn.tsx:26](https://github.com/Tahul/zidane/blob/main/ui/src/components/BrowserSignIn.tsx#L26)