Login Component

The Login component is the standard login page for all SM portals. It provides Google SSO, Microsoft SSO, and magic link authentication. Never build a custom login page — use this.

Usage

import { Login } from '@nomadahq/sm-ui'
import '@nomadahq/sm-ui/css'

// In your router — place at /auth/login
function LoginPage() {
  return (
    <Login
      productName="Studios"
      logoSrc="/logo-studios-horizontal.png"
      logoDarkSrc="/logo-studios-horizontal-dark.png"
      authBase="https://api.sprintmode.ai"
    />
  )
}

Props

Prop	Type	Required	Description
productName	string	yes	Product name shown below logo (e.g. "Studios")
logoSrc	string	yes	Path to horizontal logo (light mode)
logoDarkSrc	string	no	Path to horizontal logo (dark mode)
authBase	string	no	SM API base URL. Default: https://api.sprintmode.ai

What it renders

• Product logo (with <picture> for dark mode if logoDarkSrc provided)
• Continue with Google button → GET /auth/sso/google?redirect=<current_path>
• Continue with Microsoft button → GET /auth/sso/microsoft?redirect=<current_path>
• Continue with Email toggle → reveals email input → POST /auth/magic-link
• After magic link send: success state ("Check your email")
• Error state with message

Auth Flow

User visits /dashboard (not logged in)
  → Layout detects no session → redirects to /auth/login?redirect=/dashboard
  → User clicks "Continue with Google"
  → Redirected to Google OAuth
  → Google redirects back to /auth/sso/google/callback?code=...&state=...
  → SM API creates session, sets sm_client cookie on .sprintmode.ai
  → SM API redirects to /dashboard (from state.redirect)
  → Layout loads, fetchSession() returns session
  → Dashboard renders

Logo Requirements

1. Copy both *-horizontal.png and *-horizontal-dark.png from _jockey/brand-assets/ into your portal's repo
2. Serve them from the same origin (never cross-domain)
3. Pass both paths to Login

<Login
  productName="Mode"
  logoSrc="/assets/mode-horizontal.png"
  logoDarkSrc="/assets/mode-horizontal-dark.png"
/>

Router Setup

import { BrowserRouter, Routes, Route } from 'react-router-dom'
import { Layout, Login } from '@nomadahq/sm-ui'

function App() {
  return (
    <BrowserRouter>
      <Routes>
        {/* Public login page — outside Layout */}
        <Route path="/auth/login" element={
          <Login
            productName="Studios"
            logoSrc="/assets/studios-horizontal.png"
            logoDarkSrc="/assets/studios-horizontal-dark.png"
          />
        } />

        {/* Protected pages — inside Layout */}
        <Route path="/" element={<Layout navConfig={NAV} />}>
          <Route path="dashboard" element={<Dashboard />} />
          <Route path="clients" element={<Clients />} />
        </Route>
      </Routes>
    </BrowserRouter>
  )
}

Design standards

The Login component uses Noto Sans, SM blue (--blue) accent, and white card on a subtle background — matching DESIGN_SYSTEM.md exactly. Do not override its styles or change the design.