- Introduction
- Pitch
- Hogwarts
- Live Demo
- MVP
- Roadmap
- Launch Sprint
- PRD
- Get Started
- Localhost
- Architecture
- Structure
- Pattern
- Page
- Layout
- Content
- Types
- Config
- Actions
- Queries
- Authorization
- Validation
- Form
- Table
- Detail
- Card
- Util
- Hooks
- List Params
- Views
- README.md
- ISSUE.md
- Technology Stack
- Database
- File
- CDN Assets
- Entry Points
- Dashboard
- Authentication
- Credentials
- OAuth
- Flow Diagrams
- Multi-Tenancy
- Offline
- Onboarding
- Onboarding Videos
- Add Values
- Admission
- Application
- Attendance
- Compliance
- Profile
- Exams
- Exam Wizard
- Timetable
- Classrooms
- Notifications
- Conference
- LMS (Lumos)
- Finance
- Fee Management
- Invoice
- Wallet
- Salary
- Payroll
- Timesheet
- Expenses
- Budget
- Receipt
- Accounts
- Banking
- Reports
- Dashboard
- Permissions
- Messages
- Integration Flow
- Provision
- AI Document Processing
- Document Intelligence
- Internationalization
- Translation
- Translation Guide
- Icons
- Docs Factory
- Inspiration
- Listings
- Teachers
- Students
- Catalog
- Library
- Contributing
- Code of conduct
- GitHub Workflow
- Database Seeds
- Database Safety
- Test Accounts
- Playwright
- Prettier
- Block Rebound
Visual diagrams for the seven core auth and onboarding journeys. Each section embeds an MDX component and links to its E2E tests. Test credentials and URLs at top.
Credentials
Test Credentials
All accounts use password: 1234
dev@balqalam.comadmin@balqalam.comteacher@balqalam.comstudent@balqalam.comparent@balqalam.comaccountant@balqalam.comstaff@balqalam.comuser@balqalam.comURLs
Key URLs
https://ed.databayt.org/enMain marketing site
https://ed.databayt.org/en/oPlatform admin (DEVELOPER only)
https://ed.databayt.org/en/loginAuthentication page
https://ed.databayt.org/en/onboardingSchool creation wizard
https://demo.databayt.org/enDemo school marketing
https://demo.databayt.org/en/dashboardDemo school platform
1. Platform link
User clicks "Platform" from a school marketing header.
Platform Link Flow
All possible scenarios when clicking 'Platform' from school marketing site
Click "Platform" Link
User clicks Platform link from school marketing site header
https://demo.databayt.org/enIs User Logged In?
Check if user has an active session
Redirect to Login
User is redirected to login page with callback URL
https://demo.databayt.org/en/login?callbackUrl=/en/dashboardLogin Form
User enters credentials or uses OAuth
https://demo.databayt.org/en/loginadmin@balqalam.com1234Valid Login?
Redirect to Dashboard
User is redirected to role-specific dashboard
https://demo.databayt.org/en/dashboardError Message
Show error and allow retry
Correct School?
Check if user belongs to this school
Check User Role
Full Dashboard
Access to all school modules
https://demo.databayt.org/en/dashboardadmin@balqalam.com1234Teacher Dashboard
Classes, lessons, attendance, grades
https://demo.databayt.org/en/dashboardteacher@balqalam.com1234Student Dashboard
My classes, grades, assignments
https://demo.databayt.org/en/dashboardstudent@balqalam.com1234Access Denied
User cannot access this school's dashboard
Tests: school-login-flow.spec.ts, saas-dashboard.spec.ts.
2. Get Started
User clicks "Get Started" from the SaaS marketing hero to create a school.
/onboarding is protected — unauthenticated users hit /login?callbackUrl=/onboarding. This is the only path to /onboarding.
Get Started Flow
School owner journey from marketing site to school creation
Click "Get Started"
User clicks Get Started button from SaaS marketing hero
https://ed.databayt.org/enIs User Logged In?
Redirect to Login
Callback URL preserved for onboarding
https://ed.databayt.org/en/login?callbackUrl=/en/onboardingChoose Auth Method
Google OAuth, Facebook OAuth, or Email/Password
https://ed.databayt.org/en/loginUser Created/Found
New user created with schoolId: null
Onboarding Wizard
16-step wizard to create school
https://ed.databayt.org/en/onboardingSchool Created
User becomes ADMIN, redirected to school dashboard
https://{subdomain}.databayt.org/en/dashboardRedirect to School
User already has a school, go to dashboard
https://{school}.databayt.org/en/dashboardContinue to Onboarding
Complete the school creation process
https://ed.databayt.org/en/onboardingTests: get-started.spec.ts.
3. Live demo
User clicks "Live Demo" to explore the demo school without authentication.
Live Demo Flow
User exploring the demo school site
Click "Live Demo"
User clicks Live Demo button from SaaS marketing hero
https://ed.databayt.org/enOpens New Tab
Demo school site opens in new browser tab
https://demo.databayt.org/enBrowse Demo School
Public marketing pages: homepage, about, academic programs, faculty
https://demo.databayt.org/enUser Action
Platform Link Flow
See Platform Link Flow diagram above
https://demo.databayt.org/en/dashboardadmin@balqalam.com1234Application Form
Start admission application
https://demo.databayt.org/en/applicationExplore Pages
Faculty, houses, events, contact
https://demo.databayt.org/enTests: get-started.spec.ts (OB-005 to OB-008).
4. Login
Two distinct contexts:
- SaaS marketing login (
localhost:3000/ed.databayt.org) — onlyDEVELOPERredirects to the SaaS dashboard. Everyone else stays on the SaaS marketing page; school members should login from their own subdomain. We do NOT auto-redirect school members to their school dashboard. - School marketing login (
demo.localhost:3000/demo.databayt.org) — users stay on the school marketing page after login. Dashboard access is via the "Platform" header link, which checks membership.
If a school member accidentally logs in on the SaaS main domain and tries /dashboard, they hit /access-denied — the SaaS dashboard is DEVELOPER-only by design.
Login Flow
Complete authentication flow with role-based redirects
Visit Login Page
User navigates to login page from any entry point
https://ed.databayt.org/en/loginChoose Auth Method
Select Google, Facebook, or Email/Password
https://ed.databayt.org/en/loginAuthentication
OAuth Provider
Redirect to Google/Facebook consent screen
Callback
Handle OAuth callback and create/find user
https://ed.databayt.org/api/auth/callback/googleValidate Credentials
Check email exists and password matches
dev@balqalam.com1234Redirect Decision
Determine where to send the user
Operator Dashboard
Platform admin with all schools access
https://ed.databayt.org/en/odev@balqalam.com1234School Dashboard
Redirect to user's school
https://{school}.databayt.org/en/dashboardadmin@balqalam.com1234Onboarding
Create or join a school
https://ed.databayt.org/en/onboardinguser@balqalam.com1234Tests: login.spec.ts (AUTH-001 to AUTH-022), saas-login-flow.spec.ts.
5. Logout
Context-aware logout that preserves locale and stays on the current domain. LogoutButton always navigates to /{locale} (e.g. /en); the proxy rewrites this to /en/s/{subdomain}/ on a school subdomain. This avoids double-rewrite bugs.
Logout Flow
Context-aware logout with appropriate redirects
Click Logout
User clicks logout from avatar dropdown menu
Determine Context
Where is the user logging out from?
Redirect to Homepage
Session cleared, redirect to marketing homepage
https://ed.databayt.org/enRedirect to School Site
Session cleared, redirect to school public page
https://demo.databayt.org/enRules:
- Locale never changes during logout.
/onboardingis never a logout redirect target.signOut({ redirect: false })— the auth.ts redirect callback is NOT invoked during logout.
Tests: logout.spec.ts (AUTH-038 to AUTH-045).
6. DEVELOPER dashboard
Two access paths to ed.databayt.org/en/dashboard. Two security layers:
- Proxy middleware — extracts role from JWT, blocks non-
DEVELOPERat the edge. - Layout server component — full
auth()check, redirects non-DEVELOPERto/access-denied.
DEVELOPER Dashboard Flow
SaaS dashboard access — DEVELOPER-only with two entry paths
Access SaaS Dashboard
DEVELOPER navigates to the SaaS dashboard via login or direct URL
https://ed.databayt.org/en/dashboardHow Did User Arrive?
Login with context=saas
Login page knows user came from SaaS site
https://ed.databayt.org/en/login?context=saasdev@balqalam.com1234Check Role
Redirect to /dashboard
Auto-redirect after login
https://ed.databayt.org/en/dashboardStay on Marketing Page
Non-DEVELOPER users stay on /en after SaaS login
https://ed.databayt.org/enProtected Route Check
Redirect to login with callbackUrl
https://ed.databayt.org/en/login?callbackUrl=/en/dashboardCheck Role After Login
Access Dashboard
Callback URL honored, dashboard renders
https://ed.databayt.org/en/dashboardAccess Denied
Non-DEVELOPER redirected to /access-denied
https://ed.databayt.org/en/access-deniedTests: saas-dashboard.spec.ts (EP-017 to EP-022), saas-login-flow.spec.ts.
7. Onboarding wizard
Multi-step school creation after Get Started + login. User must be authenticated.
Onboarding Wizard Flow
15-step school creation wizard — from hub to live school
Onboarding Hub
User arrives after clicking "Get Started" and logging in
https://ed.databayt.org/en/onboarding1. About School
Overview and introduction
2. Title (Required)
School name — the only required field in this section
3-5. Description, Location, Stand Out
School description & type, address & country, unique selling points
6-9. Capacity, Branding, Import, Finish Setup
Max students/teachers, logo & colors, data import, final configuration
10-11. Join, Visibility
Invite staff/teachers, set public or private
12-13. Price, Discount
Tuition fees and discount rules
14. Legal (Required)
Terms of service and privacy policy acceptance
15. Subdomain (Required)
Reserve {name}.databayt.org
Congratulations!
School created, user role upgraded from USER to ADMIN, redirected to new school dashboard
https://{subdomain}.databayt.org/en/dashboardTests: onboarding-school.spec.ts (access control, school initialization, form steps, subdomain, complete flow, navigation).