Back to Projects

Identity & Access

SSO Portal

A centralized banking portal and middleware layer built around Keycloak and OIDC for authenticated access across digital channels.

Senior Frontend Developer at Bank Saqu · August 2024 - Present

100+

Users

3

Portal Surfaces

4

Middleware Capabilities

The Problem

The portal needed a centralized authentication flow that could support multiple digital banking channels while maintaining secure sessions and consistent communication between the frontend and backend services.

My Role

Owned the frontend and middleware implementation of the SSO portal, including authentication flows, session handling, security controls, automated end-to-end testing, and deployment.

Architecture

The portal frontend and middleware provide the application layer between users, centralized authentication, and existing backend services.

  1. User

  2. Portal UI

    Next.js application containing authenticated portal, admin dashboard, and public-facing pages.

  3. Application Middleware

    Handles route guards, error-code normalization, session refresh, and logging.

  4. Keycloak / OIDC

    Provides centralized authentication for the portal.

  5. Backend Services

    Existing banking/backend services consumed by the application via REST and GraphQL.

  6. Deployment

    Docker-based application deployment through Kubernetes and CI/CD.

Access
Application request
Authentication/session
API request

Engineering Decisions

  • Centralized authentication

    Used Keycloak and OIDC as the identity layer for the portal authentication flow.

  • Middleware as integration boundary

    Kept route protection, session handling, request processing, and response normalization in the middleware layer.

  • Shared component system

    Used Radix UI and Tailwind CSS for consistent interaction patterns across portal surfaces.

What I Built

  • Built the SSO portal using Next.js with Keycloak/OIDC authentication, consuming backend services via REST and GraphQL.
  • Implemented the middleware layer responsible for route guards, error-code normalization, session refresh, and logging.
  • Built the authenticated portal, admin dashboard, and public-facing pages using a shared Radix UI and Tailwind CSS component system.
  • Implemented security controls including rate limiting, configurable account lockout, device fingerprinting, and cryptographic request signing.
  • Managed Docker-based deployment and CI/CD delivery to Kubernetes, backed by automated Playwright end-to-end tests.

Constraints

  • Authentication security had to be strengthened without creating unnecessary friction during login.
  • Multiple portal surfaces needed to work with the same authentication flow.
  • Session and request handling needed to remain compatible with existing backend services.

Outcome

The resulting portal supports 100+ users across three portal surfaces, with centralized authentication, middleware-based session handling, security controls, and Kubernetes-based CI/CD deployment.

Technology

Next.jsTypeScriptKeycloakOIDCNextAuth.jsZustandRadix UITailwind CSSDockerKubernetesCI/CDGraphQLPlaywright

Engineering Highlights

Authentication architectureSession securityRequest signingRoute protectionKubernetes deployment