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
jsx
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 iflogoDarkSrcprovided) - 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 rendersLogo Requirements
- Copy both
*-horizontal.pngand*-horizontal-dark.pngfrom_jockey/brand-assets/into your portal's repo - Serve them from the same origin (never cross-domain)
- Pass both paths to
Login
jsx
<Login
productName="Mode"
logoSrc="/assets/mode-horizontal.png"
logoDarkSrc="/assets/mode-horizontal-dark.png"
/>Router Setup
jsx
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.
