OneBN - Brunei Digital Services

Every Bruneian. One App. All Services.

Comment

Inspiration

Our inspiration for OneBN was born from a shared, everyday frustration: the digital maze of government services. As citizens and developers in Brunei, we've experienced the challenge of navigating multiple websites and apps, each with its own login and unique interface, just to complete basic tasks. This fragmentation not only confuses users but also represents a duplicated effort and cost for government agencies.

We saw the launch and potential of iDentiti, Brunei's National Digital Identity system, as the pivotal moment—the missing piece that could finally unify this fragmented landscape. Inspired by successful Super Apps like Singapore's LifeSG and DubaiNow, we asked a powerful question: "What if we could create a single, elegant, and secure front door to all government services, with iDentiti as the universal key?" This question became the driving force behind OneBN.

What it does

OneBN is a Super App that centralizes all government services into a single, mobile-first platform, powered by Brunei's National Digital Identity system, iDentiti. It transforms how citizens interact with the government by providing a seamless, secure, and unified experience.

For our MVP, we demonstrated the platform's core capabilities through two powerful modules:

  1. JPD Service - Driving License Renewal: We built a complete, end-to-end user flow that allows a citizen to view their license, receive renewal alerts, and complete the entire renewal process online. Crucially, the process includes a mandatory iDentiti verification step, ensuring the transaction is secure and legitimate.
  2. EYE - Smart Gate Entry: This module showcases how OneBN integrates with physical infrastructure. A user can generate a secure, time-limited QR code, which, when combined with License Plate Recognition (LPR), grants automated vehicle access. This entire flow is underpinned by iDentiti for vehicle and user verification.

In essence, OneBN provides a unified login, a central service hub, and a secure identity layer for any government interaction, from digital paperwork to physical access control.

How we built it

We built OneBN with a modern, frontend-focused stack, designed for a production-ready feel and rapid development.

  • Frontend: The entire application is a React 18 Single-Page Application (SPA) built with TypeScript for type safety and robustness. We used Vite for its blazing-fast development server and build tooling.
  • Styling: Tailwind CSS was our choice for its utility-first approach, which allowed us to build a fully responsive, pixel-perfect UI and implement a seamless Dark Mode with minimal effort.
  • Navigation & State: We used React Router DOM for all client-side navigation and React's Context API to manage global state, such as theme preferences and, most importantly, the user's iDentiti authentication status.
  • iDentiti Integration: This was the heart of our technical effort. To demonstrate a realistic integration, we built a dedicated backend server using Node.js and Express. This server fully implements the OAuth2 Authorization Code flow with PKCE and is capable of processing SD-JWT Verifiable Credentials from the iDentiti system to securely extract the user's real IC Number and Name. This allowed us to build a frontend that interacts with the iDentiti system just as it would in a real-world scenario.

Our architectural planning was visualized using Mermaid diagrams, ensuring we had a clear vision for both the MVP and the future EGNC-centric architecture.

Challenges we ran into

  1. Replicating the iDentiti Ecosystem: The biggest challenge was simulating a national-level identity system authentically. Instead of faking a login, we chose to build a functional backend that correctly implements the complex OAuth2 and Verifiable Credential standards. This required a deep dive into security protocols but was crucial for making our demo credible.
  2. Designing Security with Simplicity: Integrating mandatory identity verification without creating a clunky user experience was a key design challenge. We focused on making the iDentiti step feel like a natural and secure part of the process, using clear language and contextual prompts rather than just blocking the user.
  3. Managing Scope: The temptation with a Super App is to build everything. We overcame this by strategically choosing two very different use cases: a purely administrative task (license renewal) and a physical-world interaction (gate access). This allowed us to demonstrate the breadth of OneBN's capabilities without getting lost in feature creep.

Accomplishments that we're proud of

  • The Real iDentiti Integration: We are most proud of our fully functional iDentiti authentication flow. It's not a simple mock; it correctly handles the OAuth2 redirect, verifies tokens, and extracts data from SD-JWTs. This demonstrates our ability to work with complex, high-security systems.
  • Polished End-to-End User Flows: We didn't just build features; we built complete, thoughtful user journeys. The license renewal process, from the initial alert to the final confirmation screen, feels like a real, production-ready service.
  • A Professional UI/UX: The clean, responsive design, complete with a fully functional Dark Mode and consistent iconography, makes the application feel robust and trustworthy—essential qualities for a government app.
  • The Clear Architectural Vision: We are proud of not just what we built, but how we planned to build it for the future. Our documentation clearly outlines a scalable, secure, EGNC-centric architecture that respects data sovereignty.

What we learned

  1. The Intricacies of Modern Identity: We gained an incredibly deep understanding of enterprise-grade authentication standards like OAuth 2.0 (with PKCE) and the emerging power of Verifiable Credentials like SD-JWTs.
  2. User Trust is Paramount: We learned that for a government application, every design choice must build confidence. Clear verification badges, secure process explanations, and a professional interface are not just nice-to-haves; they are fundamental requirements.
  3. The Power of a "Frontend-First" Backend: By building a dedicated backend just to support the frontend's needs for the demo, we were able to work much faster and create a far more realistic and impressive user experience than if we had tried to build a full-stack monolith.

What's next for OneBN

Our vision for OneBN extends far beyond this MVP. The roadmap is clear and focused on bringing this platform to life for all Bruneians.

  1. Transition to Live EGNC APIs: The immediate next step is to replace our mock backend with a live integration into the E-Government National Centre (EGNC) staging environment, making our service calls real.
  2. Expand the Service Catalog: We will onboard more critical government services, following the established architectural pattern. Key targets include Healthcare (MOH appointment booking), Education (MOE services), and Finance (TAP/SCP contributions).
  3. Deepen iDentiti Features: We plan to leverage more of iDentiti's capabilities, such as creating a Verified Digital Wallet within OneBN to hold digital versions of a user's IC, passport, and other official documents.
  4. Full Biometric Integration: We will work to activate real device biometrics (Fingerprint/Face ID) through the iDentiti mobile app for an even more seamless and secure authentication experience.

Our ultimate goal is for OneBN to become the single, indispensable app for every citizen, operating as a secure and elegant frontend for Brunei's national digital infrastructure, with iDentiti at its very heart.

Share this project:

Updates