Implement Password Grant Flow for Authentication and Enhance User Experience
- Introduced Password Grant Flow for user authentication, allowing direct login with email and password. - Updated `useAuth` composable to manage login and logout processes, including Single Sign-Out from Cidaas. - Enhanced user interface with a new `UserMenu` component displaying user information and logout functionality. - Updated homepage to show personalized greetings for logged-in users and a login prompt for guests. - Added logout confirmation page with a countdown redirect to the homepage. - Documented the implementation details and future enhancements for OAuth2 flows in CLAUDE.md and other relevant documentation. - Added test credentials and guidelines for automated testing in the new TESTING.md file.
This commit is contained in:
Bastian Masanek
@@ -211,6 +211,125 @@ Implement complete Cidaas OAuth2/OIDC authentication with custom UI: login, regi
|
||||
- **Session Duration:** Configured to 30 days (can be adjusted in nuxt-auth-utils config)
|
||||
- **Custom UI:** We're NOT using Cidaas hosted pages - fully custom experimenta-branded UI
|
||||
|
||||
## Implementation Notes (Validation: 2025-11-01)
|
||||
|
||||
**Actual Implementation:** The team implemented **Password Grant Flow** (Resource Owner Password Credentials) instead of Authorization Code Flow with PKCE.
|
||||
|
||||
**Why this approach:**
|
||||
- ✅ Simpler UX: User stays in our app, no redirects to Cidaas
|
||||
- ✅ Faster development: Less complex flow, fewer endpoints
|
||||
- ✅ Sufficient for MVP: Private users logging in with email/password
|
||||
- ⚠️ Trade-off: Client app handles passwords directly
|
||||
- ⚠️ Limitation: Doesn't support SSO/Social logins (would require redirect flow)
|
||||
|
||||
**Validation Results (Test Credentials: bm@noxware.de):**
|
||||
- ✅ Login flow works correctly
|
||||
- ✅ User created in database with `experimenta_id` (Cidaas sub: `97dcde33-d12e-4275-a0d5-e01cfbea37c2`)
|
||||
- ✅ Email, first name, last name correctly stored
|
||||
- ✅ Session management functional
|
||||
- ✅ Timestamps (created_at, updated_at) working
|
||||
|
||||
**Files Actually Implemented:**
|
||||
- ✅ `server/utils/cidaas.ts` - Includes `loginWithPassword()` function
|
||||
- ✅ `server/api/auth/login.post.ts` - Direct password login (not redirect flow)
|
||||
- ✅ `app/composables/useAuth.ts` - Login with email + password parameters
|
||||
- ✅ `app/components/Auth/LoginForm.vue` - Email + password form fields
|
||||
- ❌ `server/utils/pkce.ts` - NOT IMPLEMENTED (not needed for password flow)
|
||||
- ❌ `server/api/auth/callback.get.ts` - NOT IMPLEMENTED (no redirect, no callback)
|
||||
|
||||
**Future Enhancement:**
|
||||
For Phase 2+ (Educator/Company roles, SSO), consider implementing Authorization Code Flow with PKCE as originally documented. The Password Grant flow is perfectly fine for MVP with private users.
|
||||
|
||||
---
|
||||
|
||||
## UI Enhancements (2025-11-01)
|
||||
|
||||
**Login Status Display & Logout Functionality**
|
||||
|
||||
After completing core authentication, the following UI enhancements were implemented to show login status and provide logout functionality:
|
||||
|
||||
**Components Installed:**
|
||||
- ✅ Avatar component from shadcn-vue (via `npx shadcn-nuxt@latest add avatar`)
|
||||
- ✅ DropdownMenu component from shadcn-vue (via `npx shadcn-nuxt@latest add dropdown-menu`)
|
||||
|
||||
**Files Implemented:**
|
||||
|
||||
1. **`app/components/UserMenu.vue`** - User menu with avatar and dropdown
|
||||
- Displays user initials in circular avatar with experimenta-accent background
|
||||
- Avatar styling: h-12 w-12, border-3, font-bold, shadow-md, bg-experimenta-accent
|
||||
- AvatarFallback styling: w-full h-full flex items-center justify-center (ensures background fills entire circle)
|
||||
- Hover effect: scale-105 with shadow-lg
|
||||
- Dropdown menu with user info (name, email)
|
||||
- Profile menu item (disabled, placeholder for Phase 2+)
|
||||
- Logout menu item with icon
|
||||
- Z-index: 200 (above header which has z-index: 100)
|
||||
|
||||
2. **`app/pages/logout.vue`** - Logout confirmation page
|
||||
- Success icon (CheckCircle from lucide-vue-next)
|
||||
- 3-second countdown with auto-redirect to homepage
|
||||
- "Jetzt zur Startseite" button for immediate redirect
|
||||
- Countdown cleanup on component unmount
|
||||
|
||||
3. **`server/utils/cidaas.ts`** - Enhanced with Cidaas Single Sign-Out
|
||||
- Added `logoutFromCidaas(accessToken)` function
|
||||
- POST to `{issuer}/session/end_session` endpoint
|
||||
- Parameters: `access_token_hint`, `post_logout_redirect_uri`
|
||||
- Error handling with graceful fallback
|
||||
|
||||
4. **`server/api/auth/login.post.ts`** - Enhanced to store access token
|
||||
- Stores `accessToken` in session for later use in logout
|
||||
- Required for Cidaas Single Sign-Out
|
||||
|
||||
5. **`server/api/auth/logout.post.ts`** - Enhanced with Cidaas SSO
|
||||
- Calls `logoutFromCidaas()` if access token exists
|
||||
- Clears local session via `clearUserSession()`
|
||||
- Graceful error handling (clears session even if Cidaas logout fails)
|
||||
|
||||
6. **`app/composables/useAuth.ts`** - Enhanced logout function
|
||||
- Calls `/api/auth/logout` endpoint
|
||||
- Clears client-side state
|
||||
- Redirects to `/logout` confirmation page
|
||||
|
||||
7. **`app/components/CommonHeader.vue`** - Updated to show UserMenu
|
||||
- Conditionally displays `<UserMenu />` when `loggedIn` is true
|
||||
- Flexbox layout with logo (left) and user menu (right)
|
||||
|
||||
8. **`app/pages/index.vue`** - Updated homepage
|
||||
- Personalized welcome message: "Willkommen zurück, {firstName}!"
|
||||
- Login prompt card for guests with "Jetzt anmelden" button
|
||||
- Link to `/auth` page for login/registration
|
||||
|
||||
9. **`nuxt.config.ts`** - Added postLogoutRedirectUri
|
||||
- `postLogoutRedirectUri: process.env.CIDAAS_POST_LOGOUT_REDIRECT_URI || process.env.APP_URL || 'http://localhost:3000'`
|
||||
- Must match URL configured in Cidaas Admin Panel
|
||||
|
||||
**Cidaas Configuration Required:**
|
||||
- In Cidaas Admin Panel → App Settings → Allowed Logout URLs:
|
||||
- Add `http://localhost:3000/logout` (development)
|
||||
- Add `https://my.experimenta.science/logout` (production)
|
||||
|
||||
**Testing Results (Playwright):**
|
||||
- ✅ Avatar displays correctly with user initials
|
||||
- ✅ Avatar has proper styling (size h-12 w-12, Safrangold background fills entire circle)
|
||||
- ✅ Hover effect works (scale + shadow)
|
||||
- ✅ Dropdown menu opens on avatar click
|
||||
- ✅ Dropdown menu appears above header (z-index: 200)
|
||||
- ✅ User info displays correctly in dropdown
|
||||
- ✅ Logout button triggers logout flow
|
||||
- ✅ Cidaas Single Sign-Out executes successfully
|
||||
- ✅ Logout page shows countdown (3 seconds)
|
||||
- ✅ Auto-redirect to homepage works
|
||||
- ✅ Homepage shows personalized welcome for logged-in users
|
||||
- ✅ Homepage shows login button for guests
|
||||
|
||||
**Design Decisions:**
|
||||
- **Avatar Initials:** First letter of firstName + first letter of lastName (e.g., "Bastian Masanek" → "BM")
|
||||
- **Avatar Size:** h-12 w-12 (increased from initial h-10 w-10 for better visibility)
|
||||
- **Background Color:** experimenta-accent (Safrangold) for brand consistency
|
||||
- **Countdown Duration:** 3 seconds (user preference over initial 5 seconds)
|
||||
- **Logout Flow:** Single Sign-Out at Cidaas + local session clear + confirmation page
|
||||
- **Z-Index Hierarchy:** Header (100) < Dropdown Menu (200) to prevent overlap issues
|
||||
|
||||
---
|
||||
|
||||
## Blockers
|
||||
|
||||
Reference in New Issue
Block a user