# Sign-in and first run

Get a person signed in, into the right account and through the setup that comes before the first useful answer.

For: Anyone opening the product for the first time, and anyone whose sign-in has run out.

Web page: https://candor.themethodic.com/screens/sign-in-and-first-run

## Layouts

### Sign-in, then a setup checklist

Pick it when: The default: the person signs in with SSO or a code, lands in the app and sees what's left to do.

Layout: A centred sign-in card; after it, the app with a checklist of what's left before the first answer.

Items:

- **Sign in** (`sign-in`, Pro; https://candor.themethodic.com/docs/sign-in.md): Sign in without a password: SSO or a one-time code sent to the person's email.
- **Setup checklist** (`setup-checklist`, Pro; https://candor.themethodic.com/docs/setup-checklist.md): What's left before the first useful answer: connect an environment, let the agents read it, invite the team.
- **Integration connect** (`integration-connect`, Pro; https://candor.themethodic.com/docs/integration-connect.md): A checklist step that connects an outside service, by the provider's sign-in or an API key, with the access it asks for in plain words and a connection test.
- **Terms consent** (`terms-consent`, Pro; https://candor.themethodic.com/docs/terms-consent.md): The AI disclosure and terms, asked once per terms version.
- **Session expired** (`session-expired`, Pro; https://candor.themethodic.com/docs/session-expired.md): Shown when the sign-in ran out while the app was open.

```bash
npx candor-ui add sign-in setup-checklist integration-connect terms-consent session-expired
```

### Create the account, then walk through

Pick it when: A new company signs up: an account has to exist before anyone can use the product.

Layout: Account creation, then a walk through the stages with the current one as a focus card.

Items:

- **Create account** (`account-create`, Pro; https://candor.themethodic.com/docs/account-create.md): Create the company's account.
- **Step walker** (`step-walker`, Pro; https://candor.themethodic.com/docs/step-walker.md): A guided walk through stages, the current one as a focus card.
- **Consent ceremony** (`consent-ceremony`, Pro; https://candor.themethodic.com/docs/consent-ceremony.md): Consent that names what flows where, how long it's kept and how to take it back.
- **Invite chooser** (`invite-chooser`, Pro; https://candor.themethodic.com/docs/invite-chooser.md): Shown at sign-in when more than one account has invited the person.

```bash
npx candor-ui add account-create step-walker consent-ceremony invite-chooser
```

### A page that says why nothing can be shown yet

Pick it when: The person is signed in but the app can't show anything: no account, removed from one, email not verified, an invite to accept.

Layout: A whole-page stop in the middle of an otherwise empty frame, naming the reason and the one next step.

Items:

- **Account state** (`account-state`, Pro; https://candor.themethodic.com/docs/account-state.md): A whole-page stop for a signed-in person the app can't show anything to yet.
- **Invite chooser** (`invite-chooser`, Pro; https://candor.themethodic.com/docs/invite-chooser.md): Pick which invite to accept.
- **Session expired** (`session-expired`, Pro; https://candor.themethodic.com/docs/session-expired.md): Sign in again without losing the page.

```bash
npx candor-ui add account-state invite-chooser session-expired
```

## Rules that matter most here

- **A control that can't be used says why** (https://candor.themethodic.com/principles#locked-says-why): A step the person can't take yet says why, and what unlocks it.
- **Nothing is pre-selected in a decision** (https://candor.themethodic.com/principles#nothing-preselected): Consent boxes start unticked; the person ticks them.
- **The agent is always named, by the app** (https://candor.themethodic.com/principles#agents-are-named): The disclosure names the agent as your app names it, and says it is an AI.

## Patterns that cover part of it

- Telling people they're talking to an AI: https://candor.themethodic.com/patterns/ai-disclosure.md

## Brief for a coding agent

Paste this to the agent that builds the screen.

```text
Build sign-in and first run with Candor UI.
SignIn offers SSO or a one-time code by email, with no password. When more than one account has invited the person, InviteChooser comes next.
TermsConsent asks for the AI disclosure and terms once per terms version. Its box starts unticked.
A signed-in person with nothing to see gets AccountState, which names the reason (no account, removed, email not verified, an invite waiting) and one next step.
SetupChecklist lists what is left before the first useful answer; each item says what it needs. Mark an item done from your records, not from the model.
A step that connects an outside service opens IntegrationConnect: optional access starts unticked, and the step is done when its connection test passes, not when the form is sent.
When the sign-in runs out, show SessionExpiredDialog over the page and keep what the person had open.
For a new company, AccountCreate comes first and StepWalker takes them through the stages.

Start from the "Sign-in, then a setup checklist" layout: A centred sign-in card; after it, the app with a checklist of what's left before the first answer.
Candor items: sign-in (https://candor.themethodic.com/docs/sign-in.md), setup-checklist (https://candor.themethodic.com/docs/setup-checklist.md), integration-connect (https://candor.themethodic.com/docs/integration-connect.md), terms-consent (https://candor.themethodic.com/docs/terms-consent.md), session-expired (https://candor.themethodic.com/docs/session-expired.md).
Install: npx candor-ui add sign-in setup-checklist integration-connect terms-consent session-expired
Read each item's docs before using it and take its props from there; don't guess them. Pro and Premium items need the person's licence key, which they add with `npx candor-ui key <key>`; don't ask for it.
```