Sign up for an{" "}
Auth0 account
{" "}
or{" "}
console.log("log in")}>
log in
{" "}
to your existing account to integrate directly with your own tenant.
;
};
export const sections = [{
id: "getting-started",
title: "Getting started"
}, {
id: "configure-auth0",
title: "Configure Auth0"
}, {
id: "install-the-auth0-react-sdk",
title: "Install the Auth0 React SDK"
}, {
id: "configure-the-auth0provider-component",
title: "Configure the Auth0Provider component"
}, {
id: "add-login-to-your-application",
title: "Add login to your application"
}, {
id: "handle-the-login-callback",
title: "Handle the login callback"
}, {
id: "add-logout-to-your-application",
title: "Add logout to your application"
}, {
id: "show-the-user-profile",
title: "Show the user profile"
}];
Auth0 allows you to quickly add authentication and gain access to user profile information in your application.
This guide demonstrates how to integrate Auth0 with an Ionic (React) & Capacitor application using the [Auth0 React SDK](https://github.com/auth0/auth0-react).
This quickstart assumes you already have an [Ionic](https://ionicframework.com/) application up and running with [Capacitor](https://capacitorjs.com/). If not, check out the [Using
Capacitor with Ionic Framework guide](https://capacitorjs.com/docs/getting-started/with-ionic) to get started with a simple app, or clone [our sample
apps](https://github.com/auth0-samples/auth0-ionic-samples).
You should also be familiar with the [Capacitor development workflow](https://capacitorjs.com/docs/basics/workflow).
To use Auth0 services, you need to have an application set up in the Auth0 Dashboard. The Auth0 application is
where you will configure how you want authentication to work for your project.
Throughout this article, `YOUR_PACKAGE_ID` is your application's package ID. This can be
found and configured in the `appId` field in your `capacitor.config.ts` file. See
[Capacitor's Config schema](https://capacitorjs.com/docs/config#schema) for more info.
### Configure an application
Use the interactive selector to create a new Auth0 application or select an existing application that represents
the project you want to integrate with. Every application in Auth0 is assigned an alphanumeric, unique client ID
that your application code will use to call Auth0 APIs through the SDK.
Any settings you configure using this quickstart will automatically update for your application in the [Dashboard](https://manage.auth0.com/#/), which is where you
can manage your applications in the future.
If you would rather explore a complete configuration, you can view a sample application instead.
### Configure Callback URLs
A callback URL is a URL in your application that you would like Auth0 to redirect users to after they have
authenticated. If not set, users will not be returned to your application after they log in.
If you are following along with our sample project, set this to:
`YOUR_PACKAGE_ID://{yourTenant}.auth0.com/capacitor/YOUR_PACKAGE_ID/callback`
### Configure Logout URLs
A logout URL is a URL in your application that you would like Auth0 to redirect users to after they have logged
out. If not set, users will not be able to log out from your application and will receive an error.
If you are following along with our sample project, set this to:
`YOUR_PACKAGE_ID://{yourTenant}.auth0.com/capacitor/YOUR_PACKAGE_ID/callback`.
### Configure Allowed Origins
To be able to make requests from your native application to Auth0, set the following **Allowed Origins** in
your [Application Settings](https://manage.auth0.com/dashboard/#/applications/\{yourClientId}/settings).
If you are following along with our sample project, set this to
`capacitor://localhost, http://localhost` for iOS and Android respectively.
Lastly, be sure that the **Application Type** for your application is set to **Native** in the [Application Settings](https://manage.auth0.com/dashboard/#/applications/\{yourClientId}/settings).
Run the following command within your project directory to install the Auth0 React SDK:
```bash
npm install @auth0/auth0-react
```
The SDK exposes methods and variables that help you integrate Auth0 with your React application idiomatically
using [React
Hooks](https://reactjs.org/docs/hooks-overview.html) or [Higher-Order Components](https://reactjs.org/docs/higher-order-components.html).
### Install Capacitor plugins
This quickstart and sample make use of some of Capacitor's official plugins. Install these into your app using
the following command:
```bash
npm install @capacitor/browser @capacitor/app
```
* [@capacitor/browser](https://capacitorjs.com/docs/apis/browser): Allows you to interact with the device's
system browser and is used to open the URL to Auth0's authorization endpoint.
* [@capacitor/app](https://capacitorjs.com/docs/apis/app): Allows you to subscribe to high-level app events,
useful for handling callbacks from Auth0.
Capacitor's Browser plugin on iOS uses [SFSafariViewController](https://developer.apple.com/documentation/safariservices/sfsafariviewcontroller), which on iOS 11+ does not share
cookies with Safari on the device. This means that SSO will not work on those devices. If you need
SSO, please instead use a compatible plugin that uses [ASWebAuthenticationSession](https://developer.apple.com/documentation/authenticationservices/aswebauthenticationsession).
Under the hood, the Auth0 React SDK uses [React Context](https://reactjs.org/docs/context.html) to manage the authentication state of your users. One way to
integrate Auth0 with your React app is to wrap your root component with an `Auth0Provider` you can
import from the SDK.
The `Auth0Provider` component takes the following props:
* `domain`: The `domain`value present under the \*\*Settings \*\*of the application you
created in your Auth0 Dashboard, or your custom domain if using Auth0's Custom Domains feature.
* `clientId`: The Client ID value present under the \*\*Settings \*\*of the application you created
in your Auth0 Dashboard.
* `useRefreshTokens`: To use auth0-react with Ionic on Android and iOS, it's required to enable
refresh tokens.
* `useRefreshTokensFallback`: To use auth0-react with Ionic on Android and iOS, it's required to
disable the iframe fallback.
* `authorizationParams.redirect_uri`: The URL to where you'd like to redirect your users after they
authenticate with Auth0.
To persist authentication after closing and reopening the application, you may want to set
`cacheLocation` to `localstorage` when configuring the SDK, but please be aware of
[the risks of
storing tokens in localstorage](/docs/libraries/auth0-single-page-app-sdk#change-storage-options). Also, localstorage should be treated as **transient** in
Capacitor app as the data might be recovered unexpectedly in certain circumstances. Please read the [guidance on storage in the Capacitor docs](https://capacitorjs.com/docs/guides/storage#why-cant-i-just-use-localstorage-or-indexeddb).
Additionally, the SDK has the ability to [use a custom cache implementation](https://github.com/auth0/auth0-spa-js/blob/master/EXAMPLES.md#creating-a-custom-cache) to store tokens, if
you have a requirement to use a more secure and persistent storage mechanism.
**Note** that we recommend **against** using [Capacitor's Storage plugin](https://capacitorjs.com/docs/apis/storage) to store tokens, as this is
backed by [UserDefaults](https://developer.apple.com/documentation/foundation/userdefaults) and [SharedPreferences](https://developer.android.com/reference/android/content/SharedPreferences) on iOS and Android respectively. Data stored using
these APIs is not encrypted, not secure, and could also be synced to the cloud.
##### Checkpoint
Add the `Auth0Provider` component in a way that wraps your `App` component, then
run your application to verify that the SDK is initializing correctly and your application is not throwing
any errors related to Auth0.
In a Capacitor application, the [Capacitor's Browser plugin](https://capacitorjs.com/docs/apis/browser) performs a redirect to the Auth0 [Universal Login Page](https://auth0.com/universal-login). Set the `openUrl`
parameter on the `loginWithRedirect` function to use `Browser.open` so that the URL is
opened using the device's system browser component ([SFSafariViewController](https://developer.apple.com/documentation/safariservices/sfsafariviewcontroller) on iOS, and [Chrome
Custom Tabs](https://developer.chrome.com/docs/android/custom-tabs) on Android).
By default, the SDK's `loginWithRedirect` method uses `window.location.href` to
navigate to the login page in the default browser application on the user's device rather than the
system browser component appropriate for the platform. The user would leave your application to
authenticate and could make for a suboptimal user experience.
##### Checkpoint
The `loginWithRedirect` function tells the SDK to initiate the login flow, using the
`Browser.open` function to open the login URL with the platform's system browser component by
setting the `openUrl` parameter. This provides a way for your user to log in to your
application. Users redirect to the login page at Auth0 and do not receive any errors.
Once users logs in with the Universal Login Page, they redirect back to your app via a URL with a custom URL
scheme. The `appUrlOpen` event must be handled within your app. You can call the
`handleRedirectCallback` method from the Auth0 SDK to initialize the authentication state.
You can only use this method on a redirect from Auth0. To verify success, check for the presence of the
`code` and `state` parameters in the URL.
The `Browser.close()` method should close the browser when this event is raised.
This article assumes you will be using Custom URL Schemes to handle the callback within your
application. To do this, register your `YOUR_PACKAGE_ID` as a URL scheme for your chosen
platform. To learn more, read [Defining a Custom URL Scheme](https://developer.apple.com/documentation/xcode/defining-a-custom-url-scheme-for-your-app) for iOS, or [Create Deep Links to App Content](https://developer.android.com/training/app-links/deep-linking) for Android.
##### Checkpoint
Add the `appUrlOpen` to your application's `App` component and log in. The browser
window should close once the user authenticates and logs in to your app.
Now that users can log in, you need to configure [a way to log out](https://auth0.com/docs/logout/guides/logout-auth0). Users must redirect to the Auth0 logout endpoint in the browser to clear
their browser session. Again, Capacitor's Browser plugin should perform this redirect so that the user does not
leave your app and receive a suboptimal experience.
To achieve this with Ionic and Capacitor in conjunction with the Auth0 SDK:
* Construct the URL for your app Auth0 should use to redirect to after logout. This is a URL that uses your
registered custom scheme and Auth0 domain. Add it to your \*\*Allowed Logout URLs \*\*configuration in the
Auth0 Dashboard
* Logout from the SDK by calling `logout`, and pass your redirect URL back as the
`logoutParams.returnTo` parameter.
* Set the `openUrl` parameter to a callback that uses the Capacitor browser plugin to open the URL
using `Browser.open`.
Similar to the login step, if you do not set `openUrl` when calling `logout`, the
SDK redirects the user to the logout URL using the default browser application on the device, which
provides a suboptimal user experience.
##### Checkpoint
Provide a way for your users to log out of your application. Verify that you redirect to Auth0 and then
to the address you specified in the `returnTo` parameter. Check that you are no longer logged
in to your application.
The Auth0 React SDK retrieves the user's profile
associated with logged-in users in whatever component you need, such as their name or profile picture, to
personalize the user interface. The profile information is available through the `user` property
exposed by the `useAuth0()` hook.
Initializing the SDK is asynchronous, and you should guard the user profile by checking the
`isLoading` and `user` properties. Once `isLoading` is `false` and
`user` has a value, the user profile can be used.
##### Checkpoint
Provide a way for your users to see their user profile details within the app and verify you are able to
retrieve and see your profile information on screen once you have logged in.
## Next Steps
Excellent work! If you made it this far, you should now have login, logout, and user profile information running in your application.
This concludes our quickstart tutorial, but there is so much more to explore. To learn more about what you can do with Auth0, check out:
* [Auth0 Dashboard](https://manage.auth0.com/dashboard/us/dev-gja8kxz4ndtex3rq) - Learn how to configure and manage your Auth0 tenant and applications
* [Auth0 Marketplace](https://marketplace.auth0.com/) - Discover integrations you can enable to extend Auth0’s functionality
```tsx index.tsx lines
import React from 'react';
import { createRoot } from 'react-dom/client';
import { Auth0Provider } from '@auth0/auth0-react';
import App from './App';
const root = createRoot(document.getElementById('root'));
root.render(
);
```
```tsx login-button.tsx lines
import { useAuth0 } from '@auth0/auth0-react';
import { Browser } from '@capacitor/browser';
import { IonButton } from '@ionic/react';
const LoginButton: React.FC = () => {
const { loginWithRedirect } = useAuth0();
const login = async () => {
await loginWithRedirect({
async openUrl(url) {
// Redirect using Capacitor's Browser plugin
await Browser.open({
url,
windowName: "_self"
});
}
});
};
return Log in;
};
export default LoginButton;
```
```tsx logout-button.tsx lines
import { useAuth0 } from '@auth0/auth0-react';
import { Browser } from '@capacitor/browser';
import { IonButton } from '@ionic/react';
// This should reflect the URL added earlier to your "Allowed Logout URLs" setting
// in the Auth0 dashboard.
const logoutUri = 'YOUR_PACKAGE_ID://dev-gja8kxz4ndtex3rq.us.auth0.com/capacitor/YOUR_PACKAGE_ID/callback';
const LogoutButton: React.FC = () => {
const { logout } = useAuth0();
const doLogout = async () => {
await logout({
logoutParams: {
returnTo: logoutUri
},
async openUrl(url) {
// Redirect using Capacitor's Browser plugin
await Browser.open({
url,
windowName: "_self"
});
}
});
};
return Log out;
};
export default LogoutButton;
```
```tsx app.tsx lines
// Import Capacitor's app and browser plugins, giving us access to `addListener` and `appUrlOpen`,
// as well as the bits needed for Auth0 and React
import { App as CapApp } from '@capacitor/app';
import { Browser } from '@capacitor/browser';
import { useEffect } from 'react';
import { useAuth0 } from '@auth0/auth0-react';
// ...
const App: React.FC = () => {
// Get the callback handler from the Auth0 React hook
const { handleRedirectCallback } = useAuth0();
useEffect(() => {
// Handle the 'appUrlOpen' event and call `handleRedirectCallback`
CapApp.addListener('appUrlOpen', async ({ url }) => {
if (url.includes('state') && (url.includes('code') || url.includes('error'))) {
await handleRedirectCallback(url);
}
// No-op on Android
await Browser.close();
});
}, [handleRedirectCallback]);
// ..
};// Import Capacitor's app and browser plugins, giving us access to `addListener` and `appUrlOpen`,
// as well as the bits needed for Auth0 and React
import { App as CapApp } from '@capacitor/app';
import { Browser } from '@capacitor/browser';
import { useEffect } from 'react';
import { useAuth0 } from '@auth0/auth0-react';
// ...
const App: React.FC = () => {
// Get the callback handler from the Auth0 React hook
const { handleRedirectCallback } = useAuth0();
useEffect(() => {
// Handle the 'appUrlOpen' event and call `handleRedirectCallback`
CapApp.addListener('appUrlOpen', async ({ url }) => {
if (url.includes('state') && (url.includes('code') || url.includes('error'))) {
await handleRedirectCallback(url);
}
// No-op on Android
await Browser.close();
});
}, [handleRedirectCallback]);
// ..
};
```
```tsx user-profile.tsx lines
import { useAuth0 } from '@auth0/auth0-react';
const Profile: React.FC = () => {
const { user, isLoading } = useAuth0();
// If the SDK is not ready, or a user is not authenticated, exit.
if (isLoading || !user) return null;
return (
{user.name}
{user.email}
);
};
export default Profile;
```
```tsx login-button.tsx lines
import { useAuth0 } from '@auth0/auth0-react';
import { Browser } from '@capacitor/browser';
import { IonButton } from '@ionic/react';
const LoginButton: React.FC = () => {
const { loginWithRedirect } = useAuth0();
const login = async () => {
await loginWithRedirect({
async openUrl(url) {
// Redirect using Capacitor's Browser plugin
await Browser.open({
url,
windowName: "_self"
});
}
});
};
return Log in;
};
export default LoginButton;
```
```tsx index.tsx lines
import React from 'react';
import { createRoot } from 'react-dom/client';
import { Auth0Provider } from '@auth0/auth0-react';
import App from './App';
const root = createRoot(document.getElementById('root'));
root.render(
);
```
```tsx logout-button.tsx lines
import { useAuth0 } from '@auth0/auth0-react';
import { Browser } from '@capacitor/browser';
import { IonButton } from '@ionic/react';
// This should reflect the URL added earlier to your "Allowed Logout URLs" setting
// in the Auth0 dashboard.
const logoutUri = 'YOUR_PACKAGE_ID://dev-gja8kxz4ndtex3rq.us.auth0.com/capacitor/YOUR_PACKAGE_ID/callback';
const LogoutButton: React.FC = () => {
const { logout } = useAuth0();
const doLogout = async () => {
await logout({
logoutParams: {
returnTo: logoutUri
},
async openUrl(url) {
// Redirect using Capacitor's Browser plugin
await Browser.open({
url,
windowName: "_self"
});
}
});
};
return Log out;
};
export default LogoutButton;
```
```tsx app.tsx lines
// Import Capacitor's app and browser plugins, giving us access to `addListener` and `appUrlOpen`,
// as well as the bits needed for Auth0 and React
import { App as CapApp } from '@capacitor/app';
import { Browser } from '@capacitor/browser';
import { useEffect } from 'react';
import { useAuth0 } from '@auth0/auth0-react';
// ...
const App: React.FC = () => {
// Get the callback handler from the Auth0 React hook
const { handleRedirectCallback } = useAuth0();
useEffect(() => {
// Handle the 'appUrlOpen' event and call `handleRedirectCallback`
CapApp.addListener('appUrlOpen', async ({ url }) => {
if (url.includes('state') && (url.includes('code') || url.includes('error'))) {
await handleRedirectCallback(url);
}
// No-op on Android
await Browser.close();
});
}, [handleRedirectCallback]);
// ..
};// Import Capacitor's app and browser plugins, giving us access to `addListener` and `appUrlOpen`,
// as well as the bits needed for Auth0 and React
import { App as CapApp } from '@capacitor/app';
import { Browser } from '@capacitor/browser';
import { useEffect } from 'react';
import { useAuth0 } from '@auth0/auth0-react';
// ...
const App: React.FC = () => {
// Get the callback handler from the Auth0 React hook
const { handleRedirectCallback } = useAuth0();
useEffect(() => {
// Handle the 'appUrlOpen' event and call `handleRedirectCallback`
CapApp.addListener('appUrlOpen', async ({ url }) => {
if (url.includes('state') && (url.includes('code') || url.includes('error'))) {
await handleRedirectCallback(url);
}
// No-op on Android
await Browser.close();
});
}, [handleRedirectCallback]);
// ..
};
```
```tsx user-profile.tsx lines
import { useAuth0 } from '@auth0/auth0-react';
const Profile: React.FC = () => {
const { user, isLoading } = useAuth0();
// If the SDK is not ready, or a user is not authenticated, exit.
if (isLoading || !user) return null;
return (
{user.name}
{user.email}
);
};
export default Profile;
```
```tsx app.tsx lines
// Import Capacitor's app and browser plugins, giving us access to `addListener` and `appUrlOpen`,
// as well as the bits needed for Auth0 and React
import { App as CapApp } from '@capacitor/app';
import { Browser } from '@capacitor/browser';
import { useEffect } from 'react';
import { useAuth0 } from '@auth0/auth0-react';
// ...
const App: React.FC = () => {
// Get the callback handler from the Auth0 React hook
const { handleRedirectCallback } = useAuth0();
useEffect(() => {
// Handle the 'appUrlOpen' event and call `handleRedirectCallback`
CapApp.addListener('appUrlOpen', async ({ url }) => {
if (url.includes('state') && (url.includes('code') || url.includes('error'))) {
await handleRedirectCallback(url);
}
// No-op on Android
await Browser.close();
});
}, [handleRedirectCallback]);
// ..
};// Import Capacitor's app and browser plugins, giving us access to `addListener` and `appUrlOpen`,
// as well as the bits needed for Auth0 and React
import { App as CapApp } from '@capacitor/app';
import { Browser } from '@capacitor/browser';
import { useEffect } from 'react';
import { useAuth0 } from '@auth0/auth0-react';
// ...
const App: React.FC = () => {
// Get the callback handler from the Auth0 React hook
const { handleRedirectCallback } = useAuth0();
useEffect(() => {
// Handle the 'appUrlOpen' event and call `handleRedirectCallback`
CapApp.addListener('appUrlOpen', async ({ url }) => {
if (url.includes('state') && (url.includes('code') || url.includes('error'))) {
await handleRedirectCallback(url);
}
// No-op on Android
await Browser.close();
});
}, [handleRedirectCallback]);
// ..
};
```
```tsx index.tsx lines
import React from 'react';
import { createRoot } from 'react-dom/client';
import { Auth0Provider } from '@auth0/auth0-react';
import App from './App';
const root = createRoot(document.getElementById('root'));
root.render(
);
```
```tsx login-button.tsx lines
import { useAuth0 } from '@auth0/auth0-react';
import { Browser } from '@capacitor/browser';
import { IonButton } from '@ionic/react';
const LoginButton: React.FC = () => {
const { loginWithRedirect } = useAuth0();
const login = async () => {
await loginWithRedirect({
async openUrl(url) {
// Redirect using Capacitor's Browser plugin
await Browser.open({
url,
windowName: "_self"
});
}
});
};
return Log in;
};
export default LoginButton;
```
```tsx logout-button.tsx lines
import { useAuth0 } from '@auth0/auth0-react';
import { Browser } from '@capacitor/browser';
import { IonButton } from '@ionic/react';
// This should reflect the URL added earlier to your "Allowed Logout URLs" setting
// in the Auth0 dashboard.
const logoutUri = 'YOUR_PACKAGE_ID://dev-gja8kxz4ndtex3rq.us.auth0.com/capacitor/YOUR_PACKAGE_ID/callback';
const LogoutButton: React.FC = () => {
const { logout } = useAuth0();
const doLogout = async () => {
await logout({
logoutParams: {
returnTo: logoutUri
},
async openUrl(url) {
// Redirect using Capacitor's Browser plugin
await Browser.open({
url,
windowName: "_self"
});
}
});
};
return Log out;
};
export default LogoutButton;
```
```tsx user-profile.tsx lines
import { useAuth0 } from '@auth0/auth0-react';
const Profile: React.FC = () => {
const { user, isLoading } = useAuth0();
// If the SDK is not ready, or a user is not authenticated, exit.
if (isLoading || !user) return null;
return (
{user.name}
{user.email}
);
};
export default Profile;
```
```tsx logout-button.tsx lines
import { useAuth0 } from '@auth0/auth0-react';
import { Browser } from '@capacitor/browser';
import { IonButton } from '@ionic/react';
// This should reflect the URL added earlier to your "Allowed Logout URLs" setting
// in the Auth0 dashboard.
const logoutUri = 'YOUR_PACKAGE_ID://dev-gja8kxz4ndtex3rq.us.auth0.com/capacitor/YOUR_PACKAGE_ID/callback';
const LogoutButton: React.FC = () => {
const { logout } = useAuth0();
const doLogout = async () => {
await logout({
logoutParams: {
returnTo: logoutUri
},
async openUrl(url) {
// Redirect using Capacitor's Browser plugin
await Browser.open({
url,
windowName: "_self"
});
}
});
};
return Log out;
};
export default LogoutButton;
```
```tsx index.tsx lines
import React from 'react';
import { createRoot } from 'react-dom/client';
import { Auth0Provider } from '@auth0/auth0-react';
import App from './App';
const root = createRoot(document.getElementById('root'));
root.render(
);
```
```tsx login-button.tsx lines
import { useAuth0 } from '@auth0/auth0-react';
import { Browser } from '@capacitor/browser';
import { IonButton } from '@ionic/react';
const LoginButton: React.FC = () => {
const { loginWithRedirect } = useAuth0();
const login = async () => {
await loginWithRedirect({
async openUrl(url) {
// Redirect using Capacitor's Browser plugin
await Browser.open({
url,
windowName: "_self"
});
}
});
};
return Log in;
};
export default LoginButton;
```
```tsx app.tsx lines
// Import Capacitor's app and browser plugins, giving us access to `addListener` and `appUrlOpen`,
// as well as the bits needed for Auth0 and React
import { App as CapApp } from '@capacitor/app';
import { Browser } from '@capacitor/browser';
import { useEffect } from 'react';
import { useAuth0 } from '@auth0/auth0-react';
// ...
const App: React.FC = () => {
// Get the callback handler from the Auth0 React hook
const { handleRedirectCallback } = useAuth0();
useEffect(() => {
// Handle the 'appUrlOpen' event and call `handleRedirectCallback`
CapApp.addListener('appUrlOpen', async ({ url }) => {
if (url.includes('state') && (url.includes('code') || url.includes('error'))) {
await handleRedirectCallback(url);
}
// No-op on Android
await Browser.close();
});
}, [handleRedirectCallback]);
// ..
};// Import Capacitor's app and browser plugins, giving us access to `addListener` and `appUrlOpen`,
// as well as the bits needed for Auth0 and React
import { App as CapApp } from '@capacitor/app';
import { Browser } from '@capacitor/browser';
import { useEffect } from 'react';
import { useAuth0 } from '@auth0/auth0-react';
// ...
const App: React.FC = () => {
// Get the callback handler from the Auth0 React hook
const { handleRedirectCallback } = useAuth0();
useEffect(() => {
// Handle the 'appUrlOpen' event and call `handleRedirectCallback`
CapApp.addListener('appUrlOpen', async ({ url }) => {
if (url.includes('state') && (url.includes('code') || url.includes('error'))) {
await handleRedirectCallback(url);
}
// No-op on Android
await Browser.close();
});
}, [handleRedirectCallback]);
// ..
};
```
```tsx user-profile.tsx lines
import { useAuth0 } from '@auth0/auth0-react';
const Profile: React.FC = () => {
const { user, isLoading } = useAuth0();
// If the SDK is not ready, or a user is not authenticated, exit.
if (isLoading || !user) return null;
return (
{user.name}
{user.email}
);
};
export default Profile;
```
```tsx user-profile.tsx lines
import { useAuth0 } from '@auth0/auth0-react';
const Profile: React.FC = () => {
const { user, isLoading } = useAuth0();
// If the SDK is not ready, or a user is not authenticated, exit.
if (isLoading || !user) return null;
return (
{user.name}
{user.email}
);
};
export default Profile;
```
```tsx index.tsx lines
import React from 'react';
import { createRoot } from 'react-dom/client';
import { Auth0Provider } from '@auth0/auth0-react';
import App from './App';
const root = createRoot(document.getElementById('root'));
root.render(
);
```
```tsx login-button.tsx lines
import { useAuth0 } from '@auth0/auth0-react';
import { Browser } from '@capacitor/browser';
import { IonButton } from '@ionic/react';
const LoginButton: React.FC = () => {
const { loginWithRedirect } = useAuth0();
const login = async () => {
await loginWithRedirect({
async openUrl(url) {
// Redirect using Capacitor's Browser plugin
await Browser.open({
url,
windowName: "_self"
});
}
});
};
return Log in;
};
export default LoginButton;
```
```tsx logout-button.tsx lines
import { useAuth0 } from '@auth0/auth0-react';
import { Browser } from '@capacitor/browser';
import { IonButton } from '@ionic/react';
// This should reflect the URL added earlier to your "Allowed Logout URLs" setting
// in the Auth0 dashboard.
const logoutUri = 'YOUR_PACKAGE_ID://dev-gja8kxz4ndtex3rq.us.auth0.com/capacitor/YOUR_PACKAGE_ID/callback';
const LogoutButton: React.FC = () => {
const { logout } = useAuth0();
const doLogout = async () => {
await logout({
logoutParams: {
returnTo: logoutUri
},
async openUrl(url) {
// Redirect using Capacitor's Browser plugin
await Browser.open({
url,
windowName: "_self"
});
}
});
};
return Log out;
};
export default LogoutButton;
```
```tsx app.tsx lines
// Import Capacitor's app and browser plugins, giving us access to `addListener` and `appUrlOpen`,
// as well as the bits needed for Auth0 and React
import { App as CapApp } from '@capacitor/app';
import { Browser } from '@capacitor/browser';
import { useEffect } from 'react';
import { useAuth0 } from '@auth0/auth0-react';
// ...
const App: React.FC = () => {
// Get the callback handler from the Auth0 React hook
const { handleRedirectCallback } = useAuth0();
useEffect(() => {
// Handle the 'appUrlOpen' event and call `handleRedirectCallback`
CapApp.addListener('appUrlOpen', async ({ url }) => {
if (url.includes('state') && (url.includes('code') || url.includes('error'))) {
await handleRedirectCallback(url);
}
// No-op on Android
await Browser.close();
});
}, [handleRedirectCallback]);
// ..
};// Import Capacitor's app and browser plugins, giving us access to `addListener` and `appUrlOpen`,
// as well as the bits needed for Auth0 and React
import { App as CapApp } from '@capacitor/app';
import { Browser } from '@capacitor/browser';
import { useEffect } from 'react';
import { useAuth0 } from '@auth0/auth0-react';
// ...
const App: React.FC = () => {
// Get the callback handler from the Auth0 React hook
const { handleRedirectCallback } = useAuth0();
useEffect(() => {
// Handle the 'appUrlOpen' event and call `handleRedirectCallback`
CapApp.addListener('appUrlOpen', async ({ url }) => {
if (url.includes('state') && (url.includes('code') || url.includes('error'))) {
await handleRedirectCallback(url);
}
// No-op on Android
await Browser.close();
});
}, [handleRedirectCallback]);
// ..
};
```
Sign up for an{" "}
Auth0 account
{" "}
or{" "}
console.log("log in")}>
log in
{" "}
to your existing account to integrate directly with your own tenant.