DEV Community

rout0978
rout0978

Posted on

Entra External ID Login in Ionic: One Capacitor Plugin for iOS, Android and Web

#ionic #capacitor #azure #authentication

Adding sign-in to a hybrid app gets painful fast when you target Microsoft Entra External ID on iOS, Android and the web at once. The browser needs a redirect flow, iOS needs Keychain set up correctly, and Android wants a signature hash written in two different encodings.

I built @nativelement/capacitor-msal-entra to hide that behind four calls: signIn, acquireTokenSilent, getAccount and signOut. It wraps MSAL Android and MSAL iOS natively and @azure/msal-browser on the web, so you get secure token caching and silent renewal instead of a hand-rolled PKCE flow.

const result = await MsalAuth.signIn({ scopes: [] });
const { value: account } = await MsalAuth.getAccount();
const token = (await MsalAuth.acquireTokenSilent({ scopes: [] })).accessToken;
Enter fullscreen mode Exit fullscreen mode

A few things the full tutorial covers that the docs don't put in one place:

  • Why the Android signature hash is URL-encoded in msal_config.json but raw in the manifest
  • The missing Keychain entitlement that makes getAccount() fail with OSStatus -34018 even though sign-in "worked"
  • Why signIn() never resolves on web, and how to restore the session on startup instead
  • The case-sensitive domainHint: 'Google' for skipping the provider picker

The tutorial also has a table of 11 real failure symptoms with causes and fixes, an Angular auth service, guard and HTTP interceptor, and backend token validation.

Read the full tutorial: Entra External ID Login in Ionic: A Capacitor MSAL Plugin Tutorial

Code: plugin · demo Ionic app

Top comments (0)