@econneq/auth-ui

Hosted UI pages for the Econneq Auth SDK — drop in pre-built LoginPage, TenantSelectorPage, and SessionExpiredPage components.

Position in the install order

1. auth-core   ◄── prerequisite
2. auth-react  ◄── prerequisite (provider must be mounted)
3. auth-ui     ◄── you are here

Both auth-core and auth-react must be installed and the <AuthProvider> mounted before any page from this package will work — these components consume the React context published by auth-react.

Install

npm install @econneq/auth-core @econneq/auth-react @econneq/auth-ui

Peer deps: react >=18, react-dom >=18.

What you get

| Export | Purpose | |---|---| | LoginPage | Email/password (and MFA) sign-in screen | | TenantSelectorPage | Tenant/institution picker shown after a successful global login | | SessionExpiredPage | Friendly screen when the session lapses |

Use the pages as routes

Next.js App Router example — mount each page under your existing /auth segment:

// src/app/auth/login/page.tsx
'use client'
import { LoginPage } from '@econneq/auth-ui'
export default function Page() { return <LoginPage /> }

// src/app/auth/select-tenant/page.tsx
'use client'
import { TenantSelectorPage } from '@econneq/auth-ui'
export default function Page() { return <TenantSelectorPage /> }

// src/app/auth/session-expired/page.tsx
'use client'
import { SessionExpiredPage } from '@econneq/auth-ui'
export default function Page() { return <SessionExpiredPage /> }

Make sure your root layout wraps everything in <AuthProvider> (from @econneq/auth-react) so these pages can read config and dispatch actions.

Build

npm run build
npm run typecheck
npm run dev

Notes

• Pages are pure React components — they work in any framework that mounts <AuthProvider>, not just Next.js.
• Styles are self-contained; the theme follows whatever brand tokens you pass to defineAuthConfig.
• Replace any page with your own by not importing it — there's no global registration, just normal React.