--- description: Learn how to integrate Auth0 authentication into your Capacitor app using the OAuth plugin with PKCE on Android, iOS, and web. title: How to Sign In with Auth0 Using Capacitor - Capawesome image: https://capawesome.io/docs/assets/images/social/blog/how-to-sign-in-with-auth0-using-capacitor.png --- [ Skip to content](#how-to-sign-in-with-auth0-using-capacitor) [ πŸ” Introducing the **Capacitor Vault** plugin β€” store secrets behind biometrics or a device passcode.](/blog/announcing-the-capacitor-vault-plugin/) * [ SDKs ](/docs/sdks/) * [ Formbricks ](/docs/sdks/capacitor/formbricks/) * [ Geocoder ](/docs/sdks/capacitor/geocoder/) * [ Google Sign-In ](/docs/sdks/capacitor/google-sign-in/) * [ Grafana Faro ](/docs/sdks/capacitor/grafana-faro/) * [ libSQL ](/docs/sdks/capacitor/libsql/) * [ Live Update ](/docs/sdks/capacitor/live-update/) * [ Managed Configurations ](/docs/sdks/capacitor/managed-configurations/) * [ Media Session ](/docs/sdks/capacitor/media-session/) * [ ML Kit ](/docs/sdks/capacitor/mlkit/) * [ Navigation Bar ](/docs/sdks/capacitor/navigation-bar/) * [ NFC ](/docs/sdks/capacitor/nfc/) * [ OAuth ](/docs/sdks/capacitor/oauth/) * [ Pedometer ](/docs/sdks/capacitor/pedometer/) * [ Photo Editor ](/docs/sdks/capacitor/photo-editor/) * [ PostHog ](/docs/sdks/capacitor/posthog/) * [ Printer ](/docs/sdks/capacitor/printer/) * [ Purchases ](/docs/sdks/capacitor/purchases/) * [ RealtimeKit ](/docs/sdks/capacitor/realtimekit/) * [ Screen Orientation ](/docs/sdks/capacitor/screen-orientation/) * [ Screenshot ](/docs/sdks/capacitor/screenshot/) * [ Secure Preferences ](/docs/sdks/capacitor/secure-preferences/) * [ Speech Recognition ](/docs/sdks/capacitor/speech-recognition/) * [ Speech Synthesis ](/docs/sdks/capacitor/speech-synthesis/) * [ Share Target ](/docs/sdks/capacitor/share-target/) * [ Square Mobile Payments ](/docs/sdks/capacitor/square-mobile-payments/) * [ SQLite ](/docs/sdks/capacitor/sqlite/) * [ Superwall ](/docs/sdks/capacitor/superwall/) * [ Torch ](/docs/sdks/capacitor/torch/) * [ Vault ](/docs/sdks/capacitor/vault/) * [ Wifi ](/docs/sdks/capacitor/wifi/) * [ Zip ](/docs/sdks/capacitor/zip/) * [ Cordova ](/docs/sdks/cordova/) * [ Cloud ](/docs/cloud/) * [ Integrations ](/docs/cloud/live-updates/integrations/) * Concepts * Reference * [ Troubleshooting ](/docs/cloud/live-updates/troubleshooting/) * [ FAQ ](/docs/cloud/live-updates/faq/) * [ Native Builds ](/docs/cloud/native-builds/) * [ Set Up Environments ](/docs/cloud/native-builds/environments/) * [ Overwrite Native Configurations ](/docs/cloud/native-builds/native-configurations/) * [ Auto-Increment Build Numbers ](/docs/cloud/native-builds/auto-incrementing-build-numbers/) * [ Configure the Web Build Script ](/docs/cloud/native-builds/web-build-script/) * [ Build from a Monorepo ](/docs/cloud/native-builds/monorepo/) * [ Use pnpm or Yarn ](/docs/cloud/native-builds/package-managers/) * [ Install Private npm Packages ](/docs/cloud/native-builds/npm-private-registry/) * [ Override the Java Version ](/docs/cloud/native-builds/override-java-version/) * [ Custom iOS Provisioning Profiles ](/docs/cloud/native-builds/custom-ios-provisioning-profiles/) * [ Build without Git ](/docs/cloud/native-builds/build-without-git/) * [ Access Git Behind a Firewall ](/docs/cloud/native-builds/firewall-access/) * [ Integrations ](/docs/cloud/native-builds/integrations/) * Reference * [ Troubleshooting ](/docs/cloud/native-builds/troubleshooting/) * [ FAQ ](/docs/cloud/native-builds/faq/) * [ App Store Publishing ](/docs/cloud/app-store-publishing/) * [ Submit a Build ](/docs/cloud/app-store-publishing/submit-a-build/) * [ Submit Automatically After a Build ](/docs/cloud/app-store-publishing/submit-automatically/) * [ Troubleshooting ](/docs/cloud/app-store-publishing/troubleshooting/) * [ FAQ ](/docs/cloud/app-store-publishing/faq/) * [ Automations ](/docs/cloud/automations/) * [ Reference ](/docs/cloud/automations/reference/) * [ Troubleshooting ](/docs/cloud/automations/troubleshooting/) * [ FAQ ](/docs/cloud/automations/faq/) * [ Assist ](/docs/cloud/assist/) * [ CLI ](/docs/cloud/cli/) * APIs and SDKs * [ Webhooks ](/docs/cloud/webhooks/) * [ Integrations ](/docs/cloud/integrations/) * Account * [ Organization ](/docs/cloud/organizations/) * [ Two-Factor Enforcement ](/docs/cloud/organizations/two-factor-authentication/) * [ Audit Logs ](/docs/cloud/organizations/audit-logs/) * [ Billing ](/docs/cloud/organizations/billing/) * [ License Keys ](/docs/cloud/license-keys/) * [ AI ](/docs/ai/) * [ Insiders ](/docs/insiders/) * [ Billing & Plans ](/docs/insiders/billing-and-plans/) * [ FAQ ](/docs/insiders/faq/) * [ License ](https://capawesome.io/legal/eula/) * [ Support ](/docs/support/) * [ Contributing ](/docs/contributing/) * Contributing code * [ Code of Conduct ](/docs/contributing/code-of-conduct/) * [ Questions ](https://docs.github.com/en/discussions/collaborating-with-your-community-using-discussions/participating-in-a-discussion#creating-a-discussion) * [ Blog ](/blog/) * Categories * [ Implementing Authentication ](#implementing-authentication) * [ Fetching the User Profile ](#fetching-the-user-profile) * [ Conclusion ](#conclusion) * Related links # How to Sign In with Auth0 Using Capacitor[ΒΆ](#how-to-sign-in-with-auth0-using-capacitor "Permanent link") [Auth0](https://auth0.com/) is one of the most popular identity platforms, offering authentication and authorization as a service. If you're building a cross-platform app with Capacitor, the [Capacitor OAuth plugin](/docs/sdks/capacitor/oauth/) makes it easy to integrate Auth0 using the Authorization Code flow with PKCE. This guide walks you through application setup, sign-in, token management, and fetching user profile information. [ ![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 step-by-step video walks through implementing OAuth 2.0 and OpenID Connect in a Capacitor app, including PKCE, callback URL setup, token handling, and practical Auth0 integration patterns you can reuse in production. * **[OAuth Demo App](https://github.com/capawesome-team/capacitor-oauth-demo)** β€” A framework-agnostic Capacitor demo that shows the complete OAuth login, refresh token, profile, and logout flow. ## Prerequisites[ΒΆ](#prerequisites "Permanent link") Before you begin, make sure you have the following: * An **Auth0 account**. If you don't have one, you can [sign up for free](https://auth0.com/signup). * A **Capacitor app** with the [Capacitor OAuth plugin](/docs/sdks/capacitor/oauth/) installed. To install the plugin, please refer to the [Installation](/docs/sdks/capacitor/oauth/#installation) section in the plugin documentation. ## Setting Up Auth0[ΒΆ](#setting-up-auth0 "Permanent link") ### Creating an Application[ΒΆ](#creating-an-application "Permanent link") First, you need to create an application in the Auth0 Dashboard: 1. Sign in to the [Auth0 Dashboard](https://manage.auth0.com/). 2. Navigate to **Applications** \> **Applications** \> **Create Application**. 3. Enter a **Name** for your application (e.g. `My Capacitor App`). 4. Select **Native** as the application type and click **Create**. 5. On the **Settings** tab, note the **Domain** and **Client ID**. You will need these later. ### Configuring Callback URLs[ΒΆ](#configuring-callback-urls "Permanent link") You need to configure a callback URL for each platform you want to support. In your application's **Settings** tab, add the following URLs to the **Allowed Callback URLs** field (comma-separated). **Android and iOS**: Use a custom scheme based on your app's package name or bundle identifier: `[](#%5F%5Fcodelineno-0-1)com.example.app://oauth/callback ` **Web**: Use your web app's URL: `[](#%5F%5Fcodelineno-1-1)http://localhost:3000/oauth/callback ` ### Configuring Logout URLs[ΒΆ](#configuring-logout-urls "Permanent link") To support logout, you also need to add the following URLs to the **Allowed Logout URLs** field in your application's **Settings** tab. **Android and iOS**: `[](#%5F%5Fcodelineno-2-1)com.example.app://oauth/logout ` **Web**: `[](#%5F%5Fcodelineno-3-1)http://localhost:3000/oauth/logout ` ## Implementing Authentication[ΒΆ](#implementing-authentication "Permanent link") Throughout the following examples, replace `{domain}` with your Auth0 **Domain** and `{client-id}` with your **Client ID**. ### Signing In[ΒΆ](#signing-in "Permanent link") Use the [login(...)](/docs/sdks/capacitor/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-4-1)import { Oauth } from '@capawesome-team/capacitor-oauth'; [](#%5F%5Fcodelineno-4-2) [](#%5F%5Fcodelineno-4-3)const login = async () => { [](#%5F%5Fcodelineno-4-4) const result = await Oauth.login({ [](#%5F%5Fcodelineno-4-5) issuerUrl: 'https://{domain}', [](#%5F%5Fcodelineno-4-6) clientId: '{client-id}', [](#%5F%5Fcodelineno-4-7) redirectUrl: 'com.example.app://oauth/callback', [](#%5F%5Fcodelineno-4-8) scopes: ['openid', 'profile', 'email', 'offline_access'], [](#%5F%5Fcodelineno-4-9) }); [](#%5F%5Fcodelineno-4-10) console.log('Access token:', result.accessToken); [](#%5F%5Fcodelineno-4-11) console.log('ID token:', result.idToken); [](#%5F%5Fcodelineno-4-12) console.log('Refresh token:', result.refreshToken); [](#%5F%5Fcodelineno-4-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/sdks/capacitor/oauth/#login) method redirects the user to the Auth0 login page. After authentication, the user is redirected back to your app. You need to call [handleRedirectCallback()](/docs/sdks/capacitor/oauth/#handleredirectcallback) on page load to complete the token exchange: `[](#%5F%5Fcodelineno-5-1)import { Oauth } from '@capawesome-team/capacitor-oauth'; [](#%5F%5Fcodelineno-5-2)import { Capacitor } from '@capacitor/core'; [](#%5F%5Fcodelineno-5-3) [](#%5F%5Fcodelineno-5-4)const handleRedirectCallback = async () => { [](#%5F%5Fcodelineno-5-5) if (Capacitor.getPlatform() !== 'web') { [](#%5F%5Fcodelineno-5-6) return; [](#%5F%5Fcodelineno-5-7) } [](#%5F%5Fcodelineno-5-8) const url = new URL(window.location.href); [](#%5F%5Fcodelineno-5-9) if (!url.searchParams.has('code')) { [](#%5F%5Fcodelineno-5-10) return; [](#%5F%5Fcodelineno-5-11) } [](#%5F%5Fcodelineno-5-12) const result = await Oauth.handleRedirectCallback(); [](#%5F%5Fcodelineno-5-13) console.log('Access token:', result.accessToken); [](#%5F%5Fcodelineno-5-14)}; [](#%5F%5Fcodelineno-5-15) [](#%5F%5Fcodelineno-5-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/sdks/capacitor/oauth/#refreshtoken) method to get a new access token without requiring the user to sign in again: `[](#%5F%5Fcodelineno-6-1)import { Oauth } from '@capawesome-team/capacitor-oauth'; [](#%5F%5Fcodelineno-6-2) [](#%5F%5Fcodelineno-6-3)const refreshToken = async () => { [](#%5F%5Fcodelineno-6-4) const result = await Oauth.refreshToken({ [](#%5F%5Fcodelineno-6-5) issuerUrl: 'https://{domain}', [](#%5F%5Fcodelineno-6-6) clientId: '{client-id}', [](#%5F%5Fcodelineno-6-7) refreshToken: 'YOUR_REFRESH_TOKEN', [](#%5F%5Fcodelineno-6-8) }); [](#%5F%5Fcodelineno-6-9) console.log('New access token:', result.accessToken); [](#%5F%5Fcodelineno-6-10)}; ` ### Decoding the ID Token[ΒΆ](#decoding-the-id-token "Permanent link") Use the [decodeIdToken(...)](/docs/sdks/capacitor/oauth/#decodeidtoken) method to read the user's profile claims from the ID token: `[](#%5F%5Fcodelineno-7-1)import { Oauth } from '@capawesome-team/capacitor-oauth'; [](#%5F%5Fcodelineno-7-2) [](#%5F%5Fcodelineno-7-3)const decodeIdToken = async () => { [](#%5F%5Fcodelineno-7-4) const result = await Oauth.decodeIdToken({ [](#%5F%5Fcodelineno-7-5) token: 'YOUR_ID_TOKEN', [](#%5F%5Fcodelineno-7-6) }); [](#%5F%5Fcodelineno-7-7) console.log('Name:', result.payload.name); [](#%5F%5Fcodelineno-7-8) console.log('Email:', result.payload.email); [](#%5F%5Fcodelineno-7-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/sdks/capacitor/oauth/#logout) method: `[](#%5F%5Fcodelineno-8-1)import { Oauth } from '@capawesome-team/capacitor-oauth'; [](#%5F%5Fcodelineno-8-2) [](#%5F%5Fcodelineno-8-3)const logout = async () => { [](#%5F%5Fcodelineno-8-4) await Oauth.logout({ [](#%5F%5Fcodelineno-8-5) issuerUrl: 'https://{domain}', [](#%5F%5Fcodelineno-8-6) idToken: 'YOUR_ID_TOKEN', [](#%5F%5Fcodelineno-8-7) postLogoutRedirectUrl: 'com.example.app://oauth/logout', [](#%5F%5Fcodelineno-8-8) }); [](#%5F%5Fcodelineno-8-9)}; ` ## Fetching the User Profile[ΒΆ](#fetching-the-user-profile "Permanent link") To fetch the authenticated user's profile from Auth0, you can call the `/userinfo` endpoint using the access token: `` [](#%5F%5Fcodelineno-9-1)import { Oauth } from '@capawesome-team/capacitor-oauth'; [](#%5F%5Fcodelineno-9-2) [](#%5F%5Fcodelineno-9-3)const login = async () => { [](#%5F%5Fcodelineno-9-4) const result = await Oauth.login({ [](#%5F%5Fcodelineno-9-5) issuerUrl: 'https://{domain}', [](#%5F%5Fcodelineno-9-6) clientId: '{client-id}', [](#%5F%5Fcodelineno-9-7) redirectUrl: 'com.example.app://oauth/callback', [](#%5F%5Fcodelineno-9-8) scopes: ['openid', 'profile', 'email', 'offline_access'], [](#%5F%5Fcodelineno-9-9) }); [](#%5F%5Fcodelineno-9-10) [](#%5F%5Fcodelineno-9-11) const response = await fetch('https://{domain}/userinfo', { [](#%5F%5Fcodelineno-9-12) headers: { [](#%5F%5Fcodelineno-9-13) Authorization: `Bearer ${result.accessToken}`, [](#%5F%5Fcodelineno-9-14) }, [](#%5F%5Fcodelineno-9-15) }); [](#%5F%5Fcodelineno-9-16) const user = await response.json(); [](#%5F%5Fcodelineno-9-17) console.log('Name:', user.name); [](#%5F%5Fcodelineno-9-18) console.log('Email:', user.email); [](#%5F%5Fcodelineno-9-19)}; `` ## Conclusion[ΒΆ](#conclusion "Permanent link") In this guide, we covered how to set up Auth0 authentication in a Capacitor app using the [Capacitor OAuth plugin](/docs/sdks/capacitor/oauth/). From application setup and callback configuration to sign-in, token refresh, and fetching the user profile, the plugin handles the complexity of the OAuth flow so you can focus on building your application. Explore the complete [API Reference](/docs/sdks/capacitor/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. June 8, 2026 Back to top