Auth Sign Up

blockauth

Full-page sign-up surface. Name/email/password/confirm form with password-match validation, T&C acceptance gate, optional OAuth row, link back to sign-in. Emits `submit` with the validated payload and `oauth` with provider; consumer wires the actual auth call.

Installation

$pnpm dlx shadcn@latest add https://uipkge.dev/r/lit/auth-sign-up.json

$npx shadcn@latest add https://uipkge.dev/r/lit/auth-sign-up.json

$yarn dlx shadcn@latest add https://uipkge.dev/r/lit/auth-sign-up.json

$bunx shadcn@latest add https://uipkge.dev/r/lit/auth-sign-up.json

Manifest:https://uipkge.dev/r/lit/auth-sign-up.jsonInstalls to:src/uip/blocks/auth-sign-up/

Variants

Loading interactive previews…

Props

Name	Type / Values	Default	Required
`heading`	`string`	`Create your account`	optional
`description`	`string`	`Start your 14-day free trial. No credit card required.`	optional
`sign-in-href`	`string`	`/login`	optional
`terms-href`	`string`	`#`	optional
`privacy-href`	`string`	`#`	optional
`oauth-providers`	`string`	`github google`	optional

Schema

Type aliases exported from this item's source. Use these to shape the data you pass in.

AuthSignUpPayload

interface AuthSignUpPayload {
  name: string
  email: string
  password: string
}

HTMLElementTagNameMap

interface HTMLElementTagNameMap {
    'uip-auth-sign-up': UipAuthSignUp
  }
}

npm dependencies

lit

Includes

button card checkbox input label lit-core separator

Files installed (1)

src/uip/blocks/auth-sign-up/auth-sign-up.ts10.9 kB

import { LitElement, css, html } from 'lit'
import { cn } from '../../lib/utils'
import { tailwind } from '../../lib/styles'
import { ThemeController } from '../../lib/theme'
// Side-effect imports: register the composed elements for standalone use
// (consumers who install only this block still get working primitives).
import '../../components/button/button'
import '../../components/card/card'
import '../../components/checkbox/checkbox'
import '../../components/input/input'
import '../../components/label/label'
import '../../components/separator/separator'
import type { UipInput } from '../../components/input/input'

export type AuthSignUpProvider = 'github' | 'google'

export interface AuthSignUpPayload {
  name: string
  email: string
  password: string
}

/**
 * <uip-auth-sign-up> — the registry AuthSignUp block as a web component.
 *
 * Class strings are React's AuthSignUp verbatim. React state becomes @state
 * fields; the `canSubmit` gate is a getter. `onSubmit` (validated payload) /
 * `onOauth` (provider) become `submit` / `oauth` CustomEvents (bubbles,
 * composed). GitHub/Google brand marks are copied from React's inline SVGs.
 * `oauth-providers` is a space-separated attribute (default: "github google").
 */
export class UipAuthSignUp extends LitElement {
  static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true }
  // :host display can't be a utility class (the host has no template of its own).
  static styles = [tailwind, css`:host { display: block; }`]

  static properties = {
    heading: {},
    description: {},
    signInHref: { attribute: 'sign-in-href' },
    termsHref: { attribute: 'terms-href' },
    privacyHref: { attribute: 'privacy-href' },
    oauthProviders: { attribute: 'oauth-providers' },
    name: { state: true },
    email: { state: true },
    password: { state: true },
    confirm: { state: true },
    accept: { state: true },
  }

  /** React's `title` (`title` is taken by HTMLElement). */
  heading = 'Create your account'
  description = 'Start your 14-day free trial. No credit card required.'
  signInHref = '/login'
  termsHref = '#'
  privacyHref = '#'
  oauthProviders = 'github google'
  private name = ''
  private email = ''
  private password = ''
  private confirm = ''
  private accept = false

  constructor() {
    super()
    new ThemeController(this)
  }

  connectedCallback() {
    super.connectedCallback()
    this.setAttribute('data-uipkge', '')
    this.setAttribute('data-slot', 'auth-sign-up')
  }

  private get providers(): AuthSignUpProvider[] {
    return this.oauthProviders
      .split(/\s+/)
      .filter((p): p is AuthSignUpProvider => p === 'github' || p === 'google')
  }

  private get passwordsMatch(): boolean {
    return !this.confirm || this.password === this.confirm
  }

  private get canSubmit(): boolean {
    return Boolean(this.name && this.email && this.password && this.passwordsMatch && this.accept)
  }

  private handleSubmit(e: Event) {
    e.preventDefault()
    if (!this.canSubmit) return
    this.dispatchEvent(
      new CustomEvent<AuthSignUpPayload>('submit', {
        detail: { name: this.name, email: this.email, password: this.password },
        bubbles: true,
        composed: true,
      }),
    )
  }

  render() {
    const providers = this.providers
    return html`
      <div data-slot="auth-sign-up" class=${cn('bg-background flex min-h-svh items-center justify-center p-6')}>
        <uip-card class="w-full max-w-md">
          <uip-card-header class="text-center">
            <uip-card-title class="text-2xl">${this.heading}</uip-card-title>
            <uip-card-description>${this.description}</uip-card-description>
          </uip-card-header>
          <uip-card-content>
            <form class="space-y-4" @submit=${this.handleSubmit}>
              <div class="grid gap-2">
                <uip-label for="signup-name">Full name</uip-label>
                <uip-input
                  id="signup-name"
                  .value=${this.name}
                  autocomplete="name"
                  required
                  @input=${(e: Event) => {
                    this.name = (e.target as UipInput).value
                  }}
                ></uip-input>
              </div>
              <div class="grid gap-2">
                <uip-label for="signup-email">Email</uip-label>
                <uip-input
                  id="signup-email"
                  .value=${this.email}
                  type="email"
                  placeholder="[email protected]"
                  autocomplete="email"
                  required
                  @input=${(e: Event) => {
                    this.email = (e.target as UipInput).value
                  }}
                ></uip-input>
              </div>
              <div class="grid gap-2">
                <uip-label for="signup-password">Password</uip-label>
                <uip-input
                  id="signup-password"
                  .value=${this.password}
                  type="password"
                  autocomplete="new-password"
                  required
                  @input=${(e: Event) => {
                    this.password = (e.target as UipInput).value
                  }}
                ></uip-input>
                <p class="text-muted-foreground text-xs">8+ characters, mix of letters, numbers and symbols.</p>
              </div>
              <div class="grid gap-2">
                <uip-label for="signup-confirm">Confirm password</uip-label>
                <uip-input
                  id="signup-confirm"
                  .value=${this.confirm}
                  type="password"
                  autocomplete="new-password"
                  aria-invalid=${this.passwordsMatch ? 'false' : 'true'}
                  required
                  @input=${(e: Event) => {
                    this.confirm = (e.target as UipInput).value
                  }}
                ></uip-input>
                ${!this.passwordsMatch ? html`<p class="text-destructive text-xs">Passwords don't match.</p>` : ''}
              </div>
              <div class="flex items-start gap-2">
                <uip-checkbox
                  id="signup-accept"
                  .checked=${this.accept}
                  @checked-change=${(e: CustomEvent<{ checked: boolean }>) => {
                    this.accept = e.detail.checked
                  }}
                ></uip-checkbox>
                <uip-label for="signup-accept" class="text-sm leading-snug font-normal">
                  I agree to the
                  <a href=${this.termsHref} class="text-foreground underline-offset-4 hover:underline">
                    Terms of Service
                  </a>
                  and
                  <a href=${this.privacyHref} class="text-foreground underline-offset-4 hover:underline">
                    Privacy Policy
                  </a>
                  .
                </uip-label>
              </div>
              <uip-button type="submit" class="w-full" ?disabled=${!this.canSubmit}>Create account</uip-button>
            </form>

            ${providers.length > 0
              ? html`
                  <div class="my-6 flex items-center gap-3">
                    <uip-separator class="flex-1"></uip-separator>
                    <span class="text-muted-foreground text-xs uppercase">or continue with</span>
                    <uip-separator class="flex-1"></uip-separator>
                  </div>
                  <div class=${cn('grid gap-2', providers.length > 1 ? 'sm:grid-cols-2' : '')}>
                    ${providers.includes('github')
                      ? html`<uip-button
                          variant="outline"
                          type="button"
                          @click=${() =>
                            this.dispatchEvent(
                              new CustomEvent('oauth', { detail: 'github', bubbles: true, composed: true }),
                            )}
                        >
                          <svg class="mr-2 size-4" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                            <path
                              d="M12 .5C5.7.5.5 5.7.5 12c0 5.1 3.3 9.4 7.9 10.9.6.1.8-.3.8-.6v-2c-3.2.7-3.9-1.5-3.9-1.5-.5-1.4-1.3-1.7-1.3-1.7-1.1-.7.1-.7.1-.7 1.2.1 1.8 1.2 1.8 1.2 1 1.8 2.7 1.3 3.4 1 .1-.8.4-1.3.7-1.6-2.6-.3-5.3-1.3-5.3-5.8 0-1.3.5-2.3 1.2-3.1-.1-.3-.5-1.5.1-3.1 0 0 1-.3 3.3 1.2a11.4 11.4 0 016 0C17 4.7 18 5 18 5c.6 1.6.2 2.8.1 3.1.8.8 1.2 1.8 1.2 3.1 0 4.5-2.7 5.5-5.3 5.8.4.4.8 1.1.8 2.2v3.3c0 .3.2.7.8.6 4.6-1.5 7.9-5.8 7.9-10.9C23.5 5.7 18.3.5 12 .5z"
                            />
                          </svg>
                          GitHub
                        </uip-button>`
                      : ''}
                    ${providers.includes('google')
                      ? html`<uip-button
                          variant="outline"
                          type="button"
                          @click=${() =>
                            this.dispatchEvent(
                              new CustomEvent('oauth', { detail: 'google', bubbles: true, composed: true }),
                            )}
                        >
                          <svg class="mr-2 size-4" viewBox="0 0 24 24" aria-hidden="true">
                            <path
                              fill="#4285F4"
                              d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 01-2.2 3.32v2.77h3.57c2.08-1.92 3.27-4.74 3.27-8.1z"
                            />
                            <path
                              fill="#34A853"
                              d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84A11 11 0 0012 23z"
                            />
                            <path
                              fill="#FBBC05"
                              d="M5.84 14.1a6.6 6.6 0 010-4.2V7.06H2.18a11 11 0 000 9.88l3.66-2.84z"
                            />
                            <path
                              fill="#EA4335"
                              d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1A11 11 0 002.18 7.06l3.66 2.84C6.71 7.31 9.14 5.38 12 5.38z"
                            />
                          </svg>
                          Google
                        </uip-button>`
                      : ''}
                  </div>
                `
              : ''}
          </uip-card-content>
          <uip-card-footer class="justify-center">
            <p class="text-muted-foreground text-sm">
              Already have an account?
              <a href=${this.signInHref} class="text-foreground font-medium underline-offset-4 hover:underline">
                Sign in
              </a>
            </p>
          </uip-card-footer>
        </uip-card>
      </div>
    `
  }
}

customElements.get('uip-auth-sign-up') || customElements.define('uip-auth-sign-up', UipAuthSignUp)

declare global {
  interface HTMLElementTagNameMap {
    'uip-auth-sign-up': UipAuthSignUp
  }
}

Raw manifest:https://uipkge.dev/r/lit/auth-sign-up.json

Change language