# SSO first

> Single sign-on leads; email is the fallback under an "or" divider.

URL: https://apogee.avaui.dev/docs/sign-up-pages/sso-first
Last updated: 2026-10-15

Single sign-on leads; email is the fallback under an "or" divider.

Last updated October 15, 2026

Live example: https://apogee.avaui.dev/examples/sign-up/sso-first

```astro
---
/**
 * SSO first: Single sign-on leads; email is the fallback under an "or" divider.
 *
 * @page sign-up
 */
import { Orbit, KeyRound } from '@lucide/astro'
import AuthShell from '@/components/apogee/sections/AuthShell/AuthShell.astro'
import FeaturedIcon from '@/components/apogee/FeaturedIcon/FeaturedIcon.astro'
import Input from '@/components/apogee/Input/Input.astro'
import Button from '@/components/apogee/Button/Button.astro'
import Divider from '@/components/apogee/Divider/Divider.astro'
import Link from '@/components/apogee/Link/Link.astro'
---

<AuthShell heading="Create an account" description="Start your 30-day free trial." pattern="grid">
  <FeaturedIcon slot="brand" theme="solid" color="primary" size="large"><Orbit /></FeaturedIcon>

  <div class="flex flex-col gap-6">
    <Button href="#" variant="outline" color="neutral" size="large" fullWidth>
      <KeyRound slot="start" aria-hidden="true" />
      Sign up with SSO
    </Button>
    <Divider>or</Divider>
    <form method="post" class="flex flex-col gap-4">
      <Input label="Email" type="email" name="email" placeholder="Enter your email" autocomplete="email" required />
      <Button type="submit" size="large" fullWidth>Get started</Button>
    </form>
  </div>

  <p slot="footer" class="text-neutral-faded">
    Already have an account? <Link href="#" underline="hover" class="font-semibold">Log in</Link>
  </p>
</AuthShell>
```

## Add

```sh
npx @ava-ui/apogee add sign-up/sso-first
```

This copies the page to `src/components/apogee/pages/sign-up/` with everything it uses: AuthShell, Button, Divider, FeaturedIcon, Input, Link. Render it from one of your routes, or use **Copy code** above.

## Accessibility

-   The page heading is the `h1`; the fields carry visible labels and `autocomplete` hints (`new-password` for new passwords, so password managers offer to generate one).
-   The SSO button is a link to your identity provider; swap its `href` for your own.

## Related

[

Auth shellThe frame of a log in, sign up or recovery page; brand mark, heading and your form, centred, in a card, beside a panel, or beside a step sidebar.

](https://apogee.avaui.dev/docs/sections/auth-shell)[

DividerA separator between content, horizontal or vertical.

](https://apogee.avaui.dev/docs/divider)