OIDC Authentication Integration for User Portal

OIDC Authentication Integration

Parent Issue: unibee-api#2 - OIDC/OAuth2 Authentication Support

Problem: Users must re-authenticate when navigating from Hjallr CRM to the Unibee user portal, creating friction in the user experience.

Solution: Implement OIDC client authentication in the user portal to enable seamless single sign-on with Hjallr CRM.

Scope

This issue tracks frontend implementation for the user portal. Backend OIDC infrastructure is tracked in unibee-api#2.

Tasks

Phase 1: OIDC Client Setup

  • Install oidc-client-ts or react-oidc-context library
  • Add OIDC configuration to environment variables
  • Create OIDC authentication service/hooks
  • Set up OIDC state management (Zustand store)

Phase 2: Login Page Updates

  • Add "Sign in with Hjallr CRM" button to login page
  • Implement OIDC login initiation
  • Style new authentication option
  • Maintain existing password/OTP login options

Phase 3: OIDC Callback Handling

  • Create /auth/oidc/callback route
  • Implement callback handler component
  • Exchange authorization code for tokens (via backend)
  • Store tokens in localStorage
  • Handle authentication errors gracefully

Phase 4: Token Management

  • Update axios interceptor to use OIDC tokens
  • Implement token refresh logic
  • Handle token expiration
  • Maintain backward compatibility with existing JWT tokens

Phase 5: Session Management

  • Update session store to handle OIDC sessions
  • Implement logout flow (local + OIDC provider)
  • Handle redirect after authentication
  • Preserve intended destination URL

Phase 6: Testing & Integration

  • Test OIDC flow end-to-end
  • Test token refresh mechanism
  • Test error scenarios
  • Test backward compatibility with existing auth
  • Integration testing with Hjallr CRM (dev environment)

Dependencies

  • ✅ Backend OIDC infrastructure (unibee-api#2 - in progress)
  • ✅ Hjallr CRM configured as OIDC provider

Files to Modify

  • src/components/login/index.tsx - Add OIDC login button
  • src/components/auth/OIDCCallback.tsx - New callback handler
  • src/requests/client.ts - Update axios interceptor
  • src/stores/index.ts - Add OIDC token storage
  • src/App.tsx - Add OIDC callback route
  • package.json - Add oidc-client-ts dependency

Success Criteria

  • Users can click "Sign in with Hjallr CRM" and authenticate via OIDC
  • Authentication redirects back to user portal successfully
  • OIDC tokens stored and used for API requests
  • Token refresh works automatically
  • Existing authentication methods still work (backward compatibility)
  • No re-authentication needed when coming from CRM

Priority: High (Enables seamless CRM integration) Estimated Effort: 2-3 days