Planet Green Solutions - Web Design Dubai

Integrating UAE Pass into Website Redesigns for Seamless Login

Integrating UAE Pass into Website Redesigns for Seamless Login

Picture this: You’re trying to access a government service online, and suddenly you’re faced with yet another registration form. Name, email, phone number, Emirates ID details—the whole drill. Then comes the verification process, document uploads, and waiting for approval. Sound familiar?

UAE Pass changed that game entirely. Launched at the Gitex Exhibition 2018, this app became the UAE’s first national digital identity and signature solution. Instead of jumping through hoops with multiple registrations, users can now verify themselves through smartphone-based authentication. The collaboration between Digital Dubai, Telecommunications, and the Digital Government Regulatory Authority (TDRA), and the Department of Government Enablement created something that actually works.

Here’s what makes UAE Pass different: it uses biometric face recognition to register users. We’re talking accounts created in minutes using biometric face recognition, though achieving the highest level of verification (SOP3) for features like legal digital signatures may require a one-time visit to a UAE Pass kiosk. One digital identity gets you access to multiple services: no more password juggling or repeated form-filling. The app supports the UAE’s push toward digital services while ditching paper transactions.

If you’re working on a website redesign, UAE Pass integration isn’t just a nice-to-have—it’s essential. Your users get a smoother experience, and you get better security. Let’s dig into how to make this integration work seamlessly for your project.

Preparing Your Web Environment for UAE Pass

Getting your web environment ready for UAE Pass isn’t rocket science, but it does require some groundwork. Think of it as setting up your development sandbox before you start building.

Start with the basics: Submit your integration request to the UAE Pass onboarding team. Once they approve your request, they’ll walk you through technical overview sessions. These sessions are gold—they’ll share sample UAE Pass applications that become your reference point during development.

Set up your testing playground: Download the UAE Pass staging environment from the resources the team provides. This staging setup lets you create test accounts without messing up any live systems.

Creating sample user accounts in staging follows a straightforward process:

  • Choose “Create New Account” option
  • Accept Terms and Conditions
  • Scan Emirates ID (for Emirates ID holders)
  • Verify mobile number and email via OTP
  • Set up a PIN to secure the application

Know your endpoints: These are the core URLs you’ll be working with:

  • Authorization Endpoint: https://stg-id.uaepass.ae/idshub/authorize
  • Access Token Endpoint: https://stg-id.uaepass.ae/idshub/token
  • User Information Endpoint: https://stg-id.uaepass.ae/idshub/userinfo
  • Logout Endpoint: https://stg-id.uaepass.ae/idshub/logout

The UAE Pass team will provide sandbox credentials for testing. Your client ID and client secret get shared specifically for your integration.

Handle both scenarios: Make sure your web environment works whether users have the UAE Pass app installed or not. For Android, check for the package ID: ae.uaepass.mainapp.stg. For iOS, verify using the scheme: uaepassstg://.

Test early, test often: Before you dive into full implementation, run a simple proof of concept using Postman. This catches configuration issues before they become bigger problems.

Getting these fundamentals right saves you headaches later. Your staging environment becomes your safe space to experiment and perfect the integration.

Integrating UAE PASS with Keycloak Identity Provider

Keycloak makes UAE PASS integration much simpler than building everything from scratch. This open-source identity management solution acts as a bridge between your application and UAE PASS, handling the heavy lifting of authentication flows.

The setup follows the OAuth 2.0 protocol. Users get redirected to UAE PASS for authentication, then bounce back to your app with an authorization code. Pretty straightforward, but the devil’s in the details.

Configure Your Token Exchange

The core piece is your token endpoint configuration. Point it to:

https://stg-id.uaepass.ae/idshub/token

This endpoint swaps your authorization code for an access token. Your request needs three key components:

  • grant_type set to “authorization_code”
  • The same redirect_uri from your authorization request
  • The code parameter with your authorization code

For authentication, include your client credentials using Basic auth:

Authorization: Basic {credentials}
Content-Type: multipart/form-data; charset=UTF-8

Watch Out for the Issuer Field

Here’s something that trips up many developers: the Issuer field in Keycloak. Set it to match the iss property from your decoded token. Getting this wrong causes authentication errors that can be frustrating to debug.

Handle Different User Types

UAE PASS supports various user profiles, including Visitors who can create verified accounts. Your application needs to handle these different attribute sets appropriately. Not all users will have the same data available.

Common Pitfalls to Avoid

Authorization codes expire in 10 minutes, so be sure to handle the token exchange promptly. Redirect URIs must match exactly between authorization and token calls. Invalid client errors usually point to credential issues or mismatched configurations.

When configured correctly, Keycloak gives your users single sign-on access across government and private services. The initial setup requires attention to detail, but the payoff is worth it.

Integrating UAE PASS with Keycloak Identity Provider

User Login Experience and Final Testing

Once your technical setup is complete, it’s time to walk through what your users will actually experience. The authentication flow is straightforward, but understanding each step helps you troubleshoot issues before they reach production.

Your user clicks the UAE Pass login button on your site. They get redirected to the UAE Pass authentication URL, enter their mobile number, and receive a push notification on their phone. After they confirm on their device, your application receives the access code that kicks off the token generation process.

The next step requires speed. Your application makes a POST request to the token endpoint with the authorization code:

curl --request POST 'https://stg-id.uaepass.ae/idshub/token?grant_type=authorization_code&redirect_uri=YOUR_REDIRECT_URI&code=YOUR_CODE' \
--header 'Authorization: Basic YOUR_CREDENTIALS'

Critical timing alert:

You have 10 minutes to use that authorization code before it expires. After that, it expires. No extensions, no second chances. Build your token exchange logic to handle this tight window.
With your access token in hand, you can now pull user information from the userinfo endpoint. Users with SOP3 profiles give you access to up to 18 attributes—UUID, name details, nationality, gender, mobile number, email, and Emirates ID. Store that UUID securely. It’s your primary identifier for future authentication attempts.

Testing will throw you some curveballs. Expect invalid client errors, expired authorization codes, and redirect URI mismatches. When users run into problems, they might need to reinstall the UAE Pass app and recover their account. Build your error handling to guide them through these scenarios.

Pay attention to your login button design. UAE Pass has specific guidelines about prominence and sizing. Your UAE Pass button should look just as important as any other third-party login option. No hiding it in a corner or making it smaller than the rest.

Final testing means checking both authenticated and non-authenticated states. Remember, users should initiate their own authentication—don’t trigger it automatically. Let them decide when they want to log in.

Conclusion

Is UAE Pass integration worth the effort? Absolutely. But let’s be honest about what you’re getting into.

The technical setup isn’t trivial. You’ll spend time configuring endpoints, managing token exchanges, and handling different user profiles. The 10-second authorization code expiry alone can trip up your testing. Yet once it’s working, your users get something they actually want: one login for multiple services.

Here’s what really matters: your users stop dealing with registration fatigue. No more filling out forms with the same information over and over. No more password resets. They scan their face, confirm on their phone, and they’re in.

Should you prioritize UAE Pass integration in your next redesign? If you’re serving UAE users, yes. The staging environment makes testing manageable, and the onboarding team provides solid technical support. Just don’t underestimate the testing phase—both authenticated and non-authenticated states need to work flawlessly.

The real win isn’t just about following UAE’s digital strategy. It’s about creating an experience that actually serves your users better. When someone can access your service as easily as they access government platforms, you’ve removed a major friction point.

We’ve seen this pattern before: early adopters of seamless authentication solutions gain a competitive edge. UAE Pass integration puts you ahead of organizations still stuck with traditional login systems.

The effort you invest now pays off long-term. Your users get convenience, you get better security, and the UAE moves closer to its paperless future. That’s a win worth working for.

government web design
uae pass
web design
website redesign
Author
PGS Research Team
The PGS Research Team is a group of marketing experts and content creators dedicated to helping businesses grow. With years of experience in marketing and content marketing, we create engaging content for websites, blogs, and social channels.

Related web design blog posts

Contact us on WhatsApp
Get a Quote