can login again

Author: simonredfern

components.d.ts

@@ -22,6 +22,7 @@ declare module 'vue' {
     ElCollapse: typeof import('element-plus/es')['ElCollapse']
     ElCollapseItem: typeof import('element-plus/es')['ElCollapseItem']
     ElContainer: typeof import('element-plus/es')['ElContainer']
+    ElDialog: typeof import('element-plus/es')['ElDialog']
     ElDivider: typeof import('element-plus/es')['ElDivider']
     ElDropdown: typeof import('element-plus/es')['ElDropdown']
     ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']

server/app.ts

@@ -50,9 +50,8 @@ import { OAuth2CallbackController } from './controllers/OAuth2CallbackController
 import { OAuth2ConnectController } from './controllers/OAuth2ConnectController.js'
 import { OAuth2ProvidersController } from './controllers/OAuth2ProvidersController.js'
 
-// Import middlewares
-import OAuth2AuthorizationMiddleware from './middlewares/OAuth2AuthorizationMiddleware.js'
-import OAuth2CallbackMiddleware from './middlewares/OAuth2CallbackMiddleware.js'
+// Import OAuth2 routes (plain Express, not routing-controllers)
+import oauth2Routes from './routes/oauth2.js'
 
 // ES module equivalent of __dirname
 const __filename = fileURLToPath(import.meta.url)
@@ -226,18 +225,14 @@ let instance: any
 
   const routePrefix = '/api'
 
+  // Register OAuth2 routes BEFORE routing-controllers (plain Express)
+  app.use(routePrefix, oauth2Routes)
+  console.log('OAuth2 routes registered (plain Express)')
+
   const server = useExpressServer(app, {
     routePrefix: routePrefix,
-    controllers: [
-      OpeyController,
-      OBPController,
-      StatusController,
-      UserController,
-      OAuth2CallbackController,
-      OAuth2ConnectController,
-      OAuth2ProvidersController
-    ],
-    middlewares: [OAuth2AuthorizationMiddleware, OAuth2CallbackMiddleware]
+    controllers: [OpeyController, OBPController, StatusController, UserController],
+    middlewares: []
   })
 
   instance = server.listen(port)

server/controllers/OAuth2CallbackController.ts

@@ -25,30 +25,25 @@
  *
  */
 
-import { Controller, Req, Res, Get, QueryParam } from 'routing-controllers'
+import { Controller, Req, Res, Get, UseBefore } from 'routing-controllers'
 import type { Request, Response } from 'express'
-import { Service, Container } from 'typedi'
-import { OAuth2Service } from '../services/OAuth2Service.js'
-import { OAuth2ProviderManager } from '../services/OAuth2ProviderManager.js'
-import type { UserInfo } from '../types/oauth2.js'
+import { Service } from 'typedi'
+import OAuth2CallbackMiddleware from '../middlewares/OAuth2CallbackMiddleware.js'
 
 /**
- * OAuth2 Callback Controller (Multi-Provider)
+ * OAuth2 Callback Controller
  *
- * Handles the OAuth2/OIDC callback from any configured identity provider.
+ * Handles the OAuth2/OIDC callback from the identity provider.
  * This controller receives the authorization code and state parameter
  * after the user authenticates with the OIDC provider.
  *
- * This controller handles:
+ * The OAuth2CallbackMiddleware handles:
  * - State validation (CSRF protection)
  * - Authorization code exchange for tokens
  * - User info retrieval
  * - Session storage
  * - Redirect to original page
  *
- * Supports both multi-provider mode (retrieves provider from session) and
- * legacy single-provider mode (uses existing OAuth2Service).
- *
  * Endpoint: GET /oauth2/callback
  *
  * Query Parameters (from OIDC provider):
@@ -57,23 +52,21 @@ import type { UserInfo } from '../types/oauth2.js'
  *   - error (optional): Error code if authentication failed
  *   - error_description (optional): Human-readable error description
  *
- * Multi-Provider Flow:
+ * Flow:
  *   OIDC Provider → /oauth2/callback?code=XXX&state=YYY
- *   → Retrieve provider from session → Use correct OAuth2 client
- *   → Exchange code for tokens → Original Page (with authenticated session)
+ *   → OAuth2CallbackMiddleware → Original Page (with authenticated session)
  *
  * Success Flow:
  *   1. Validate state parameter
- *   2. Retrieve provider from session (or use legacy service)
- *   3. Exchange authorization code for tokens (access, refresh, ID)
- *   4. Fetch user information from UserInfo endpoint
- *   5. Store tokens, provider name, and user data in session
- *   6. Redirect to original page or home
+ *   2. Exchange authorization code for tokens (access, refresh, ID)
+ *   3. Fetch user information from UserInfo endpoint
+ *   4. Store tokens and user data in session
+ *   5. Redirect to original page or home
  *
  * Error Flow:
  *   1. Parse error from query parameters
- *   2. Log error details
- *   3. Redirect to home with error parameter
+ *   2. Display user-friendly error page
+ *   3. Allow user to retry authentication
  *
  * @example
  * // Successful callback URL from OIDC provider
@@ -84,216 +77,22 @@ import type { UserInfo } from '../types/oauth2.js'
  */
 @Service()
 @Controller()
+@UseBefore(OAuth2CallbackMiddleware)
 export class OAuth2CallbackController {
-  private providerManager: OAuth2ProviderManager
-  private legacyOAuth2Service: OAuth2Service
-
-  constructor() {
-    this.providerManager = Container.get(OAuth2ProviderManager)
-    this.legacyOAuth2Service = Container.get(OAuth2Service)
-  }
-
   /**
    * Handle OAuth2/OIDC callback
    *
-   * Processes the callback from any configured OIDC provider.
-   * Supports both multi-provider mode and legacy single-provider mode.
+   * The actual logic is handled by OAuth2CallbackMiddleware.
+   * This method exists only as the routing endpoint definition.
    *
-   * @param code - Authorization code from OIDC provider
-   * @param state - State parameter for CSRF validation
-   * @param error - Error code if authentication failed
-   * @param errorDescription - Human-readable error description
-   * @param request - Express request object
-   * @param response - Express response object
-   * @returns Response with redirect to original page or error page
+   * @param {Request} request - Express request object with query params (code, state)
+   * @param {Response} response - Express response object (redirected by middleware)
+   * @returns {Response} Response object (handled by middleware)
    */
   @Get('/oauth2/callback')
-  async callback(
-    @QueryParam('code') code: string,
-    @QueryParam('state') state: string,
-    @QueryParam('error') error: string,
-    @QueryParam('error_description') errorDescription: string,
-    @Req() request: Request,
-    @Res() response: Response
-  ): Promise<Response> {
-    console.log('OAuth2CallbackController: Processing OAuth2 callback')
-
-    const session = request.session as any
-
-    // Handle error from provider
-    if (error) {
-      console.error(`OAuth2CallbackController: Error from provider: ${error}`)
-      console.error(`OAuth2CallbackController: Description: ${errorDescription || 'N/A'}`)
-      return response.redirect(`/?oauth2_error=${encodeURIComponent(error)}`)
-    }
-
-    // Validate required parameters
-    if (!code) {
-      console.error('OAuth2CallbackController: Missing authorization code')
-      return response.redirect('/?oauth2_error=missing_code')
-    }
-
-    if (!state) {
-      console.error('OAuth2CallbackController: Missing state parameter')
-      return response.redirect('/?oauth2_error=missing_state')
-    }
-
-    // Validate state (CSRF protection)
-    const storedState = session.oauth2_state
-    if (!storedState || storedState !== state) {
-      console.error('OAuth2CallbackController: State mismatch (CSRF protection)')
-      console.error(`  Expected: ${storedState}`)
-      console.error(`  Received: ${state}`)
-      return response.redirect('/?oauth2_error=invalid_state')
-    }
-
-    // Get code verifier from session (PKCE)
-    const codeVerifier = session.oauth2_code_verifier
-    if (!codeVerifier) {
-      console.error('OAuth2CallbackController: Code verifier not found in session')
-      return response.redirect('/?oauth2_error=missing_verifier')
-    }
-
-    // Check if multi-provider mode (provider stored in session)
-    const provider = session.oauth2_provider
-
-    try {
-      if (provider) {
-        // Multi-provider mode
-        await this.handleMultiProviderCallback(session, code, codeVerifier, provider)
-      } else {
-        // Legacy single-provider mode
-        await this.handleLegacyCallback(session, code, codeVerifier)
-      }
-
-      // Clean up temporary session data
-      delete session.oauth2_code_verifier
-      delete session.oauth2_state
-
-      // Redirect to original page
-      const redirectUrl = session.oauth2_redirect_page || '/'
-      delete session.oauth2_redirect_page
-
-      console.log(
-        `OAuth2CallbackController: Authentication successful, redirecting to: ${redirectUrl}`
-      )
-      return response.redirect(redirectUrl)
-    } catch (error) {
-      console.error('OAuth2CallbackController: Token exchange failed:', error)
-      const errorMessage = error instanceof Error ? error.message : 'Unknown error'
-      return response.redirect(
-        `/?oauth2_error=token_exchange_failed&details=${encodeURIComponent(errorMessage)}`
-      )
-    }
-  }
-
-  /**
-   * Handle multi-provider callback
-   */
-  private async handleMultiProviderCallback(
-    session: any,
-    code: string,
-    codeVerifier: string,
-    provider: string
-  ): Promise<void> {
-    console.log(`OAuth2CallbackController: Multi-provider mode - ${provider}`)
-
-    const client = this.providerManager.getProvider(provider)
-    if (!client) {
-      throw new Error(`Provider not found: ${provider}`)
-    }
-
-    // Exchange code for tokens
-    console.log(`OAuth2CallbackController: Exchanging authorization code for tokens`)
-    const tokens = await client.exchangeAuthorizationCode(code, codeVerifier)
-
-    // Store tokens in session
-    session.oauth2_access_token = tokens.accessToken
-    session.oauth2_refresh_token = tokens.refreshToken
-    session.oauth2_id_token = tokens.idToken
-    session.oauth2_provider = provider
-
-    console.log(`OAuth2CallbackController: Tokens received and stored`)
-
-    // Fetch user info
-    console.log(`OAuth2CallbackController: Fetching user info`)
-    const userInfo = await this.fetchUserInfo(client, tokens.accessToken)
-
-    // Store user in session
-    session.user = {
-      username: userInfo.preferred_username || userInfo.email || userInfo.sub,
-      email: userInfo.email,
-      name: userInfo.name,
-      provider: provider,
-      sub: userInfo.sub
-    }
-
-    console.log(
-      `OAuth2CallbackController: User authenticated via ${provider}: ${session.user.username}`
-    )
-  }
-
-  /**
-   * Handle legacy single-provider callback
-   */
-  private async handleLegacyCallback(
-    session: any,
-    code: string,
-    codeVerifier: string
-  ): Promise<void> {
-    console.log('OAuth2CallbackController: Legacy single-provider mode')
-
-    // Exchange code for tokens using legacy service
-    console.log(`OAuth2CallbackController: Exchanging authorization code for tokens`)
-    const tokens = await this.legacyOAuth2Service.exchangeCodeForTokens(code, codeVerifier)
-
-    // Store tokens in session
-    session.oauth2_access_token = tokens.accessToken
-    session.oauth2_refresh_token = tokens.refreshToken
-    session.oauth2_id_token = tokens.idToken
-
-    console.log(`OAuth2CallbackController: Tokens received and stored`)
-
-    // Fetch user info
-    console.log(`OAuth2CallbackController: Fetching user info`)
-    const userInfo = await this.legacyOAuth2Service.getUserInfo(tokens.accessToken)
-
-    // Store user in session
-    session.user = {
-      username: userInfo.preferred_username || userInfo.email || userInfo.sub,
-      email: userInfo.email,
-      name: userInfo.name,
-      sub: userInfo.sub
-    }
-
-    console.log(`OAuth2CallbackController: User authenticated (legacy): ${session.user.username}`)
-  }
-
-  /**
-   * Fetch user info from UserInfo endpoint
-   */
-  private async fetchUserInfo(client: any, accessToken: string): Promise<UserInfo> {
-    const userInfoEndpoint = client.getUserInfoEndpoint()
-
-    console.log(`OAuth2CallbackController: Calling UserInfo endpoint: ${userInfoEndpoint}`)
-
-    const response = await fetch(userInfoEndpoint, {
-      headers: {
-        Authorization: `Bearer ${accessToken}`,
-        Accept: 'application/json'
-      }
-    })
-
-    if (!response.ok) {
-      const errorText = await response.text()
-      throw new Error(
-        `UserInfo request failed: ${response.status} ${response.statusText} - ${errorText}`
-      )
-    }
-
-    const userInfo = await response.json()
-    console.log(`OAuth2CallbackController: UserInfo retrieved: ${userInfo.sub}`)
-
-    return userInfo as UserInfo
+  callback(@Req() request: Request, @Res() response: Response): Response {
+    // The middleware handles all the logic and redirects the user
+    // This method should never actually execute
+    return response
   }
 }