Coloriginz Design Systemshadcn custom registry

@col/auth-pages-starter

v1.0.0

Het uiterlijk is de standaard, de code is een startpunt.

Je hoeft deze pagina's niet over te nemen. Wat tussen apps hetzelfde hoort te zijn, is hoe de schermen eruitzien — de opbouw van de kaart, de volgorde van logo, titel, SSO-knop en velden. Past de code niet bij jouw stack, bouw ze dan na op basis van de previews hieronder; daarvoor staan ze er. Een gedeeltelijke overname mag ook: alleen de loginpagina, of de schermen zonder de API-routes. De documentatie beschrijft wat er wél bindend is.

npx shadcn add @col/auth-pages-starter

Zo zien de schermen eruit

De knoppen en velden doen niets — geen state, geen validatie, geen sessie. De werkende code met NextAuth-integratie en API-routes krijg je met bovenstaand commando. De taalkiezer rechtsboven is hier een eenvoudige plaatsvervanger (wereldbol met NL); jouw app levert zijn eigen taalkiezer.

Login

venster 1280px · 75% weergegeven

Login, uitgeklapt

venster 1280px · 75% weergegeven

Account activeren

venster 1280px · 75% weergegeven

Wachtwoord vergeten

venster 1280px · 75% weergegeven

Wachtwoord vergeten, verzonden

venster 1280px · 75% weergegeven

Nieuw wachtwoord instellen

venster 1280px · 75% weergegeven

Op een telefoon

De achtergrondfoto blijft, de kaart houdt de volle breedte binnen de marges. Anders dan bij AuthSplit, waar de foto onder lg juist verdwijnt.

Login op 390px

venster 390px

Zeven bestanden

Bestand	Landt in	Soort
login-page.tsx	app/login/page.tsx	registry:page
activate-page.tsx	app/activate/[token]/page.tsx	registry:page
forgot-password-page.tsx	app/forgot-password/page.tsx	registry:page
reset-password-page.tsx	app/reset-password/[token]/page.tsx	registry:page
activate-route.ts	app/api/auth/activate/route.ts	registry:file
forgot-password-route.ts	app/api/auth/forgot-password/route.ts	registry:file
reset-password-route.ts	app/api/auth/reset-password/route.ts	registry:file

Wat je app moet leveren

Elk van de zeven bestanden verwijst naar modules die alleen in de installerende app bestaan. Zonder onderstaande bouwt de app niet.

LanguageSelector — @/components/ui/language-selector — gebruikt op de loginpagina. @col/language-selector levert er een; let op het afwijkende pad.
useLanguage() / t() — @/lib/i18n-context — sleutels onder auth.*, plus common.or / common.loading / common.error
getLabelFromHostname, getLabelConfig — @/lib/label-config — merkdetectie op basis van hostname
NextAuth — credentials-provider verplicht, azure-ad optioneel (signIn('azure-ad', ...))
Prisma User — minimaal email, passwordHash, activationToken, isActive — de documentatie heeft de volledige lijst
bcryptjs, uuid — wachtwoord-hashing en reset-tokens
Zod-schemas — @/lib/validations — activateSchema, forgotPasswordSchema, resetPasswordSchema

Registry-afhankelijkheden

Worden automatisch meegeïnstalleerd: @col/auth-shell, @col/brand-logo, @col/sso-button, plus de shadcn-primitieven alert, button, card, input, label, separator.