---
description: Learn how to integrate Microsoft Entra ID authentication into your Capacitor app using the OAuth plugin with PKCE on Android, iOS, and web.
title: How to Sign In with Azure Entra ID Using Capacitor - Capawesome
image: https://capawesome.io/docs/assets/images/social/blog/how-to-sign-in-with-azure-entra-id-using-capacitor.png
---

[ Skip to content](#how-to-sign-in-with-azure-entra-id-using-capacitor) 

[ 🎉 Introducing **Capawesome Platform** — one platform for Live Updates, Native Builds, App Store Publishing, and Insider SDKs.](https://capawesome.io) 

* [  Formbricks ](/docs/plugins/formbricks/)
* [  Geocoder ](/docs/plugins/geocoder/)
* [  Google Sign-In ](/docs/plugins/google-sign-in/)
* [  Grafana Faro ](/docs/plugins/grafana-faro/)
* [  libSQL ](/docs/plugins/libsql/)
* [  Live Update ](/docs/plugins/live-update/)
* [  Managed Configurations ](/docs/plugins/managed-configurations/)
* [  Media Session ](/docs/plugins/media-session/)
* [  ML Kit ](/docs/plugins/mlkit/)
* [  Navigation Bar ](/docs/plugins/navigation-bar/)
* [  NFC ](/docs/plugins/nfc/)
* [  OAuth ](/docs/plugins/oauth/)
* [  Pedometer ](/docs/plugins/pedometer/)
* [  Photo Editor ](/docs/plugins/photo-editor/)
* [  PostHog ](/docs/plugins/posthog/)
* [  Printer ](/docs/plugins/printer/)
* [  Purchases ](/docs/plugins/purchases/)
* [  RealtimeKit ](/docs/plugins/realtimekit/)
* [  Screen Orientation ](/docs/plugins/screen-orientation/)
* [  Screenshot ](/docs/plugins/screenshot/)
* [  Secure Preferences ](/docs/plugins/secure-preferences/)
* [  Speech Recognition ](/docs/plugins/speech-recognition/)
* [  Speech Synthesis ](/docs/plugins/speech-synthesis/)
* [  Share Target ](/docs/plugins/share-target/)
* [  Square Mobile Payments ](/docs/plugins/square-mobile-payments/)
* [  SQLite ](/docs/plugins/sqlite/)
* [  Superwall ](/docs/plugins/superwall/)
* [  Torch ](/docs/plugins/torch/)
* [  Wifi ](/docs/plugins/wifi/)
* [  Zip ](/docs/plugins/zip/)
* [  Cloud ](/docs/cloud/)
* [  Live Updates ](/docs/cloud/live-updates/)
* Advanced
* Integrations
* [  Native Builds ](/docs/cloud/native-builds/)
* [  Configuration ](/docs/cloud/native-builds/configuration/)
* [  Environments ](/docs/cloud/native-builds/environments/)
* Guides
* [  Sample Projects ](/docs/cloud/native-builds/sample-projects/)
* [  Troubleshooting ](/docs/cloud/native-builds/troubleshooting/)
* [  Automations ](/docs/cloud/automations/)
* [  Assist ](/docs/cloud/assist/)
* Account
* Organizations
* [  Organization and User Management ](/docs/cloud/organizations/memberships/)
* [  Single Sign-On (SSO) ](/docs/cloud/organizations/sso/)
* [  Teams ](/docs/cloud/organizations/teams/)
* [  Two-Factor Authentication ](/docs/cloud/organizations/two-factor-authentication/)
* [  Integrations ](/docs/cloud/integrations/)
* [  License Keys ](/docs/cloud/license-keys/)
* [  Webhooks ](/docs/cloud/webhooks/)
* [  Pricing ](https://capawesome.io/pricing/)
* [  FAQ ](/docs/cloud/faq/)
* [  Support ](/docs/cloud/support/)
* [  Contributing ](/docs/contributing/)
* [  LLMs ](/docs/llms/)
* [  Insiders ](/docs/insiders/)
* [  License ](https://capawesome.io/legal/eula/)
* [  Support ](/docs/insiders/support/)
* [  FAQ ](/docs/insiders/faq/)
* [  Blog ](/blog/)
* Categories

* [  Implementing Authentication ](#implementing-authentication)
* [  Accessing the Microsoft Graph API ](#accessing-the-microsoft-graph-api)
* [  Conclusion ](#conclusion)

* Related links

# How to Sign In with Azure Entra ID Using Capacitor[¶](#how-to-sign-in-with-azure-entra-id-using-capacitor "Permanent link")

Many enterprise applications rely on [Microsoft Entra ID](https://www.microsoft.com/en-us/security/business/identity-access/microsoft-entra-id) (formerly Azure Active Directory) for identity and access management. If you're building a cross-platform app with Capacitor, the [OAuth](/docs/plugins/oauth/) plugin makes it straightforward to integrate Entra ID authentication using the Authorization Code flow with PKCE. This guide walks you through app registration, sign-in, token management, and accessing the Microsoft Graph API.

[ ![Build and deploy your Capacitor app with Capawesome Cloud](../../assets/external/cloud.capawesome.io/assets/banners/cloud-build-and-deploy-capacitor-apps.69628c3f.png) ](/) 

## Bonus: Video Tutorial and Demo App[¶](#bonus-video-tutorial-and-demo-app "Permanent link")

This walkthrough explains the OAuth plugin flow end-to-end in Capacitor, including PKCE, callback handling, and secure token usage patterns. You can apply the same implementation approach to Microsoft Entra ID by using your Entra issuer and client setup.

* **[OAuth Demo App](https://github.com/capawesome-team/capacitor-oauth-demo)** — A reusable Capacitor OAuth reference app that you can adapt for Entra ID provider settings.

## Prerequisites[¶](#prerequisites "Permanent link")

Before you begin, make sure you have the following:

* A **Microsoft Entra ID tenant**. If you don't have one, you can [create a free Azure account](https://azure.microsoft.com/en-us/free/).
* A **Capacitor app** with the [OAuth](/docs/plugins/oauth/) plugin installed. To install the plugin, please refer to the [Installation](/docs/plugins/oauth/#installation) section in the plugin documentation.

## Setting Up Azure Entra ID[¶](#setting-up-azure-entra-id "Permanent link")

### Registering Your App[¶](#registering-your-app "Permanent link")

First, you need to register your application in the Microsoft Entra admin center:

1. Sign in to the [Microsoft Entra admin center](https://entra.microsoft.com/).
2. Navigate to **Entra ID** \> **App registrations** \> **New registration**.
3. Enter a **Name** for your application (e.g. `My Capacitor App`).
4. Under **Supported account types**, select the option that fits your use case:  
   * **Single tenant**: Only accounts in your directory.  
   * **Multitenant**: Accounts in any organizational directory.  
   * **Multitenant + personal**: Includes Microsoft personal accounts.
5. Under **Redirect URI**, select the platform and enter a redirect URI (see [Configuring Redirect URIs](#configuring-redirect-uris) below).
6. Click **Register**.
7. On the app overview page, note the **Application (client) ID** and **Directory (tenant) ID**. You will need these later.

### Configuring Redirect URIs[¶](#configuring-redirect-uris "Permanent link")

You need to register a redirect URI for each platform you want to support. To add multiple redirect URIs, go to **Overview** \> **Redirect URIs** and click **Add Redirect URI**.

**Android and iOS**: Select **Public client/native (mobile & desktop)** and use a custom scheme based on your app's package name or bundle identifier:

`[](#%5F%5Fcodelineno-0-1)com.example.app://oauth/callback
`

**Web**: Select **Single-page application (SPA)** and use your web app's URL:

`[](#%5F%5Fcodelineno-1-1)http://localhost:3000/oauth/callback
`

## Implementing Authentication[¶](#implementing-authentication "Permanent link")

Throughout the following examples, replace `{tenant-id}` with your **Directory (tenant) ID** and `{client-id}` with your **Application (client) ID**.

### Signing In[¶](#signing-in "Permanent link")

Use the [login(...)](/docs/plugins/oauth/#login) method to start the OAuth flow. The plugin automatically fetches the OpenID Connect discovery document from the issuer URL and handles the PKCE exchange:

`[](#%5F%5Fcodelineno-2-1)import { Oauth } from '@capawesome-team/capacitor-oauth';
[](#%5F%5Fcodelineno-2-2)
[](#%5F%5Fcodelineno-2-3)const login = async () => {
[](#%5F%5Fcodelineno-2-4)  const result = await Oauth.login({
[](#%5F%5Fcodelineno-2-5)    issuerUrl: 'https://login.microsoftonline.com/{tenant-id}/v2.0',
[](#%5F%5Fcodelineno-2-6)    clientId: '{client-id}',
[](#%5F%5Fcodelineno-2-7)    redirectUrl: 'com.example.app://oauth/callback',
[](#%5F%5Fcodelineno-2-8)    scopes: ['openid', 'profile', 'email', 'offline_access'],
[](#%5F%5Fcodelineno-2-9)  });
[](#%5F%5Fcodelineno-2-10)  console.log('Access token:', result.accessToken);
[](#%5F%5Fcodelineno-2-11)  console.log('ID token:', result.idToken);
[](#%5F%5Fcodelineno-2-12)  console.log('Refresh token:', result.refreshToken);
[](#%5F%5Fcodelineno-2-13)};
`

Include the `offline_access` scope to receive a refresh token.

### Handling the Redirect Callback (Web)[¶](#handling-the-redirect-callback-web "Permanent link")

On the web, the [login(...)](/docs/plugins/oauth/#login) method redirects the user to the Microsoft login page. After authentication, the user is redirected back to your app. You need to call [handleRedirectCallback()](/docs/plugins/oauth/#handleredirectcallback) on page load to complete the token exchange:

`[](#%5F%5Fcodelineno-3-1)import { Oauth } from '@capawesome-team/capacitor-oauth';
[](#%5F%5Fcodelineno-3-2)import { Capacitor } from '@capacitor/core';
[](#%5F%5Fcodelineno-3-3)
[](#%5F%5Fcodelineno-3-4)const handleRedirectCallback = async () => {
[](#%5F%5Fcodelineno-3-5)  if (Capacitor.getPlatform() !== 'web') {
[](#%5F%5Fcodelineno-3-6)    return;
[](#%5F%5Fcodelineno-3-7)  }
[](#%5F%5Fcodelineno-3-8)  const url = new URL(window.location.href);
[](#%5F%5Fcodelineno-3-9)  if (!url.searchParams.has('code')) {
[](#%5F%5Fcodelineno-3-10)    return;
[](#%5F%5Fcodelineno-3-11)  }
[](#%5F%5Fcodelineno-3-12)  const result = await Oauth.handleRedirectCallback();
[](#%5F%5Fcodelineno-3-13)  console.log('Access token:', result.accessToken);
[](#%5F%5Fcodelineno-3-14)};
[](#%5F%5Fcodelineno-3-15)
[](#%5F%5Fcodelineno-3-16)handleRedirectCallback();
`

This step is only required on the web. On Android and iOS, the redirect is handled natively.

### Refreshing the Access Token[¶](#refreshing-the-access-token "Permanent link")

Access tokens expire after a short time. Use the [refreshToken(...)](/docs/plugins/oauth/#refreshtoken) method to get a new access token without requiring the user to sign in again:

`[](#%5F%5Fcodelineno-4-1)import { Oauth } from '@capawesome-team/capacitor-oauth';
[](#%5F%5Fcodelineno-4-2)
[](#%5F%5Fcodelineno-4-3)const refreshToken = async () => {
[](#%5F%5Fcodelineno-4-4)  const result = await Oauth.refreshToken({
[](#%5F%5Fcodelineno-4-5)    issuerUrl: 'https://login.microsoftonline.com/{tenant-id}/v2.0',
[](#%5F%5Fcodelineno-4-6)    clientId: '{client-id}',
[](#%5F%5Fcodelineno-4-7)    refreshToken: 'YOUR_REFRESH_TOKEN',
[](#%5F%5Fcodelineno-4-8)  });
[](#%5F%5Fcodelineno-4-9)  console.log('New access token:', result.accessToken);
[](#%5F%5Fcodelineno-4-10)};
`

### Decoding the ID Token[¶](#decoding-the-id-token "Permanent link")

Use the [decodeIdToken(...)](/docs/plugins/oauth/#decodeidtoken) method to read the user's profile claims from the ID token:

`[](#%5F%5Fcodelineno-5-1)import { Oauth } from '@capawesome-team/capacitor-oauth';
[](#%5F%5Fcodelineno-5-2)
[](#%5F%5Fcodelineno-5-3)const decodeIdToken = async () => {
[](#%5F%5Fcodelineno-5-4)  const result = await Oauth.decodeIdToken({
[](#%5F%5Fcodelineno-5-5)    token: 'YOUR_ID_TOKEN',
[](#%5F%5Fcodelineno-5-6)  });
[](#%5F%5Fcodelineno-5-7)  console.log('Name:', result.payload.name);
[](#%5F%5Fcodelineno-5-8)  console.log('Email:', result.payload.preferred_username);
[](#%5F%5Fcodelineno-5-9)};
`

This decodes the JWT locally without sending it to a server. For server-side validation, you should verify the token on your backend.

### Signing Out[¶](#signing-out "Permanent link")

End the session with the [logout(...)](/docs/plugins/oauth/#logout) method:

`[](#%5F%5Fcodelineno-6-1)import { Oauth } from '@capawesome-team/capacitor-oauth';
[](#%5F%5Fcodelineno-6-2)
[](#%5F%5Fcodelineno-6-3)const logout = async () => {
[](#%5F%5Fcodelineno-6-4)  await Oauth.logout({
[](#%5F%5Fcodelineno-6-5)    issuerUrl: 'https://login.microsoftonline.com/{tenant-id}/v2.0',
[](#%5F%5Fcodelineno-6-6)    idToken: 'YOUR_ID_TOKEN',
[](#%5F%5Fcodelineno-6-7)    postLogoutRedirectUrl: 'com.example.app://oauth/logout',
[](#%5F%5Fcodelineno-6-8)  });
[](#%5F%5Fcodelineno-6-9)};
`

Note that Microsoft Entra ID may show a "You have signed out" page instead of redirecting back to your app. In this case, the user needs to close the browser manually, which results in a `USER_CANCELED` error even though the logout was successful.

## Accessing the Microsoft Graph API[¶](#accessing-the-microsoft-graph-api "Permanent link")

To call the [Microsoft Graph API](https://learn.microsoft.com/en-us/graph/overview), request the `User.Read` scope (or other scopes you need) during login and use the access token in your requests:

`` [](#%5F%5Fcodelineno-7-1)import { Oauth } from '@capawesome-team/capacitor-oauth';
[](#%5F%5Fcodelineno-7-2)
[](#%5F%5Fcodelineno-7-3)const login = async () => {
[](#%5F%5Fcodelineno-7-4)  const result = await Oauth.login({
[](#%5F%5Fcodelineno-7-5)    issuerUrl: 'https://login.microsoftonline.com/{tenant-id}/v2.0',
[](#%5F%5Fcodelineno-7-6)    clientId: '{client-id}',
[](#%5F%5Fcodelineno-7-7)    redirectUrl: 'com.example.app://oauth/callback',
[](#%5F%5Fcodelineno-7-8)    scopes: ['openid', 'profile', 'email', 'offline_access', 'User.Read'],
[](#%5F%5Fcodelineno-7-9)  });
[](#%5F%5Fcodelineno-7-10)
[](#%5F%5Fcodelineno-7-11)  const response = await fetch('https://graph.microsoft.com/v1.0/me', {
[](#%5F%5Fcodelineno-7-12)    headers: {
[](#%5F%5Fcodelineno-7-13)      Authorization: `Bearer ${result.accessToken}`,
[](#%5F%5Fcodelineno-7-14)    },
[](#%5F%5Fcodelineno-7-15)  });
[](#%5F%5Fcodelineno-7-16)  const user = await response.json();
[](#%5F%5Fcodelineno-7-17)  console.log('Display name:', user.displayName);
[](#%5F%5Fcodelineno-7-18)  console.log('Email:', user.mail);
[](#%5F%5Fcodelineno-7-19)};
 ``

## Conclusion[¶](#conclusion "Permanent link")

In this guide, we covered how to set up Microsoft Entra ID authentication in a Capacitor app using the [OAuth](/docs/plugins/oauth/) plugin. From app registration and redirect URI configuration to sign-in, token refresh, and Microsoft Graph API access, the plugin handles the complexity of the OAuth flow so you can focus on building your application.

Explore the complete [API Reference](/docs/plugins/oauth/#api) to see all available methods and options. If you're using Okta instead, check out [How to Sign In with Okta Using Capacitor](/blog/how-to-sign-in-with-okta-using-capacitor/). Have suggestions or questions? [Create an issue](https://github.com/capawesome-team/capacitor-plugins/issues/new/choose) in our [GitHub repository](https://github.com/capawesome-team/capacitor-plugins).

Stay connected with us on [X](https://x.com/capawesomeio) and subscribe to our [newsletter](/newsletter/) for the latest updates.

May 8, 2026 

 Back to top