Revolut ID Web SDK

Revolut ID enables secure authentication and authorisation using Revolut credentials with a dynamic loading pattern that injects the authentication widget on-demand. Built on OpenID Connect standard with OAuth 2.0 + PKCE for enhanced security and user-controlled data sharing.

Authentication verifies the user's identity. Authorisation governs access to user data or resources — it handles user consent, restricts access using scopes, and generates an user data.

Web applications can use this SDK to retrieve code that can be exchanged with user JWT token with requested user data.

Architecture​

The SDK uses a Promise-based dynamic loader that injects external authentication scripts from Revolut's CDN:

• RevolutIdLoader: Main entry point with environment-aware script loading
• Dynamic Script Injection: On-demand loading with caching and cleanup
• TypeScript-First: Comprehensive type definitions with discriminated unions
• Security-Focused: Automatic cleanup and instance isolation

Key features​

• OpenID Connect Standard: Built on industry-standard protocols for secure authentication
• Flexible Scope Permissions: Request specific user information like profile, email, phone, address, or documents
• Dual Authentication Modes: Support for both redirect and popup-based flows with discriminated union types
• Customizable UI: Configurable button styles, themes, and localization for 25+ languages
• Environment Support: Separate sandbox and production environments for development and testing
• TypeScript Support: Full TypeScript support
• Dynamic Loading: Promise-based script injection with caching and error handling

Supported scopes​

The Revolut ID SDK supports the following OpenID scopes:

• openid: Required - Basic OpenID Connect authentication
• profile: User's basic profile information
• name: User's full name
• email: User's email address
• phone: User's phone number
• address: User's residential address information
• birthdate: User's date of birth
• citizenship: Access to user's document verification status

Authentication flows​

The SDK supports two distinct authentication modes using TypeScript discriminated unions:

Popup mode​

• Display mode: 'popup'
• User Experience: Authentication opens in popup window, user stays on original page
• Requirements: onAuthSuccess callback (mandatory), onAuthFailure callback (optional)
• Result Handling: Immediate callback execution with authentication results
• Advantages: No page reload, seamless UX, immediate response handling

Redirect mode (default)​

• Display Mode: 'redirect' or omitted
• User Experience: User redirected to Revolut authentication, then back to redirectUri
• Requirements: Only base configuration needed
• Result Handling: Use processRedirectParams() on redirect page
• Advantages: No popup blocker issues, works on all devices, standard OAuth flow

Benefits​

• Simple Integration: Dynamic loader pattern handles SDK initialisation automatically
• Secure: OAuth 2.0 with PKCE implementation and automatic cleanup
• User Control: Granular data sharing permissions with consent management
• Trusted Identity: Access to Revolut's verified user base across 35+ countries
• Developer Experience: Full TypeScript support with discriminated unions and IntelliSense
• Flexible UX: Choose between popup and redirect flows based on your application needs

Basic implementation flow​

1. Load: Use RevolutIdLoader() to dynamically load the SDK from CDN
2. Initialise: Configure client with revolutId.initialise() using appropriate UX mode
3. Mount: Create authentication button with mountButton() in target container
4. Authenticate: User interaction triggers authentication flow (popup or redirect)
5. Handle Results: Process authentication results via callbacks or redirect processing
6. Exchange: Exchange authorization code for access tokens via your secure backend

This documentation contains comprehensive integration examples, configuration guides, and implementation best practices for both authentication modes.