OIDC Authentication Integration for Admin Portal (Optional)

OIDC Authentication Integration

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

Problem: Currently admin portal uses password-based authentication. With OIDC support in the API, admin portal could optionally integrate for consistency.

Solution: Implement OIDC client authentication in the admin portal (optional/low priority).

Scope

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

Note: This is OPTIONAL and LOW PRIORITY because:

  • Only one merchant user exists (Unibee free API limitation)
  • No real benefit from SSO with only one user
  • Can be skipped initially and added later if needed

Tasks (If Implemented)

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

Phase 2: Login Page Updates

  • Add "Sign in with Hjallr CRM" option
  • Implement OIDC login initiation
  • 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 (merchantToken key)
  • Handle authentication errors

Phase 4: Token Management

  • Update axios interceptors to use OIDC tokens
  • Implement token refresh logic
  • Handle token expiration
  • Maintain backward compatibility

Phase 5: OIDC Provider Configuration UI

  • Create "Authentication Settings" page
  • UI for adding/editing OIDC providers
  • Test connection functionality
  • Provider enable/disable toggle
  • Display configuration (issuer, client ID, scopes)

Dependencies

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

Files to Modify

  • src/components/login/index.tsx - Add OIDC login option
  • 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
  • src/components/settings/authentication.tsx - New provider config UI
  • package.json - Add oidc-client-ts dependency

Success Criteria (If Implemented)

  • Merchant can configure OIDC providers in admin UI
  • Merchant can sign in via OIDC
  • Token management works correctly
  • Existing authentication still works
  • Provider configuration persists correctly

Priority: Low (Optional - only 1 merchant user) Estimated Effort: 2-3 days Recommendation: Skip initially, implement only if needed later