---
title: How to Sign In with Auth0 Using Capacitor
description: Learn how to integrate Auth0 authentication into your Capacitor app using the OAuth plugin with PKCE on Android, iOS, and web.
date:
created: 2026-02-17
updated: 2026-07-14
authors:
- robingenz
categories:
- Capacitor
- Guides
- SDKs
links:
- Capacitor OAuth: sdks/capacitor/oauth.md
faq: true
---
# How to Sign In with Auth0 Using Capacitor
[Auth0](https://auth0.com/){:target="_blank"} 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](../../sdks/capacitor/oauth.md) 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.
## Bonus: Video Tutorial and Demo App
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){:target="_blank"}** — A framework-agnostic Capacitor demo that shows the complete OAuth login, refresh token, profile, and logout flow.
## Prerequisites
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){:target="_blank"}.
- A **Capacitor app** with the [Capacitor OAuth plugin](../../sdks/capacitor/oauth.md) installed. To install the plugin, please refer to the [Installation](../../sdks/capacitor/oauth.md/#installation) section in the plugin documentation.
## Setting Up Auth0
### Creating an Application
First, you need to create an application in the Auth0 Dashboard:
1. Sign in to the [Auth0 Dashboard](https://manage.auth0.com/){:target="_blank"}.
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
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:
```
com.example.app://oauth/callback
```
**Web**: Use your web app's URL:
```
http://localhost:3000/oauth/callback
```
### Configuring Logout URLs
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**:
```
com.example.app://oauth/logout
```
**Web**:
```
http://localhost:3000/oauth/logout
```
## Implementing Authentication
Throughout the following examples, replace `{domain}` with your Auth0 **Domain** and `{client-id}` with your **Client ID**.
### Signing In
Use the [`login(...)`](../../sdks/capacitor/oauth.md#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:
```typescript
import { Oauth } from '@capawesome-team/capacitor-oauth';
const login = async () => {
const result = await Oauth.login({
issuerUrl: 'https://{domain}',
clientId: '{client-id}',
redirectUrl: 'com.example.app://oauth/callback',
scopes: ['openid', 'profile', 'email', 'offline_access'],
});
console.log('Access token:', result.accessToken);
console.log('ID token:', result.idToken);
console.log('Refresh token:', result.refreshToken);
};
```
Include the `offline_access` scope to receive a refresh token.
### Handling the Redirect Callback (Web)
On the web, the [`login(...)`](../../sdks/capacitor/oauth.md#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()`](../../sdks/capacitor/oauth.md#handleredirectcallback) on page load to complete the token exchange:
```typescript
import { Oauth } from '@capawesome-team/capacitor-oauth';
import { Capacitor } from '@capacitor/core';
const handleRedirectCallback = async () => {
if (Capacitor.getPlatform() !== 'web') {
return;
}
const url = new URL(window.location.href);
if (!url.searchParams.has('code')) {
return;
}
const result = await Oauth.handleRedirectCallback();
console.log('Access token:', result.accessToken);
};
handleRedirectCallback();
```
This step is only required on the web. On Android and iOS, the redirect is handled natively.
### Refreshing the Access Token
Access tokens expire after a short time. Use the [`refreshToken(...)`](../../sdks/capacitor/oauth.md#refreshtoken) method to get a new access token without requiring the user to sign in again:
```typescript
import { Oauth } from '@capawesome-team/capacitor-oauth';
const refreshToken = async () => {
const result = await Oauth.refreshToken({
issuerUrl: 'https://{domain}',
clientId: '{client-id}',
refreshToken: 'YOUR_REFRESH_TOKEN',
});
console.log('New access token:', result.accessToken);
};
```
### Decoding the ID Token
Use the [`decodeIdToken(...)`](../../sdks/capacitor/oauth.md#decodeidtoken) method to read the user's profile claims from the ID token:
```typescript
import { Oauth } from '@capawesome-team/capacitor-oauth';
const decodeIdToken = async () => {
const result = await Oauth.decodeIdToken({
token: 'YOUR_ID_TOKEN',
});
console.log('Name:', result.payload.name);
console.log('Email:', result.payload.email);
};
```
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
End the session with the [`logout(...)`](../../sdks/capacitor/oauth.md#logout) method:
```typescript
import { Oauth } from '@capawesome-team/capacitor-oauth';
const logout = async () => {
await Oauth.logout({
issuerUrl: 'https://{domain}',
idToken: 'YOUR_ID_TOKEN',
postLogoutRedirectUrl: 'com.example.app://oauth/logout',
});
};
```
## Fetching the User Profile
To fetch the authenticated user's profile from Auth0, you can call the `/userinfo` endpoint using the access token:
```typescript
import { Oauth } from '@capawesome-team/capacitor-oauth';
const login = async () => {
const result = await Oauth.login({
issuerUrl: 'https://{domain}',
clientId: '{client-id}',
redirectUrl: 'com.example.app://oauth/callback',
scopes: ['openid', 'profile', 'email', 'offline_access'],
});
const response = await fetch('https://{domain}/userinfo', {
headers: {
Authorization: `Bearer ${result.accessToken}`,
},
});
const user = await response.json();
console.log('Name:', user.name);
console.log('Email:', user.email);
};
```
## FAQ
### Which platforms does this work on?
The [Capacitor OAuth plugin](../../sdks/capacitor/oauth.md) runs the Authorization Code flow with PKCE on Android, iOS, and the web from a single codebase. On Android and iOS the flow completes natively; on the web you finish it by calling [`handleRedirectCallback()`](../../sdks/capacitor/oauth.md#handleredirectcallback) on page load.
### Do I need an Auth0 client secret?
No. You register your app as a **Native** application, which is a public client that authenticates with PKCE instead of a secret. That's exactly why PKCE exists — a client secret can't be kept safe inside a mobile app, so none is stored there.
### How do I keep the user signed in after they close the app?
Include the `offline_access` scope in [`login(...)`](../../sdks/capacitor/oauth.md#login) to receive a refresh token, then store it securely — for example with the [Capacitor Secure Preferences plugin](../../sdks/capacitor/secure-preferences.md) — and exchange it for a new access token when the old one expires. See [Refreshing the Access Token](#refreshing-the-access-token).
### Can I use the same approach for other identity providers?
Yes. Because the plugin speaks standard OpenID Connect, the same flow works with any compliant provider. We have dedicated guides for [Microsoft Entra ID](./how-to-sign-in-with-azure-entra-id-using-capacitor.md) and [Okta](./how-to-sign-in-with-okta-using-capacitor.md), and for provider-specific SDKs there's [Google Sign-In](./how-to-sign-in-with-google-using-capacitor.md) and [Apple Sign-In](./how-to-sign-in-with-apple-using-capacitor.md).
## Related Posts
- [Alternative to the Ionic Auth Connect Plugin](./alternative-to-ionic-auth-connect-plugin.md)
- [Announcing the Capacitor OAuth Plugin](./announcing-the-capacitor-oauth-plugin.md)
- [How to Sign In with Apple Using Capacitor](./how-to-sign-in-with-apple-using-capacitor.md)
- [How to Sign In with Azure Entra ID Using Capacitor](./how-to-sign-in-with-azure-entra-id-using-capacitor.md)
## Conclusion
In this guide, we covered how to set up Auth0 authentication in a Capacitor app using the [Capacitor OAuth plugin](../../sdks/capacitor/oauth.md). 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](../../sdks/capacitor/oauth.md#api) to see all available methods and options. If you're using Okta instead, check out [How to Sign In with Okta Using Capacitor](./how-to-sign-in-with-okta-using-capacitor.md). Have suggestions or questions? [Create an issue](https://github.com/capawesome-team/capacitor-plugins/issues/new/choose){:target="_blank"} in our [GitHub repository](https://github.com/capawesome-team/capacitor-plugins){:target="_blank"}.
Stay connected with us on [X](https://x.com/capawesomeio){:target="_blank"} and subscribe to our [newsletter](/newsletter/){:target="_blank"} for the latest updates.
