Add login to your Ionic React with Capacitor app
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.
This quickstart assumes you already have an Ionic application up and running with Capacitor. If not, check out the Using Capacitor with Ionic Framework guide to get started with a simple app, or clone our sample apps.
You should also be familiar with the Capacitor development 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.
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, 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.
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.
Configure Allowed Origins
To be able to make requests from your native application to Auth0, set the following Allowed Origins in your Application Settings.
Lastly, be sure that the Application Type for your application is set to Native in the Application Settings.
Run the following command within your project directory to install the Auth0 React SDK:
npm install @auth0/auth0-reactWas this helpful?
The SDK exposes methods and variables that help you integrate Auth0 with your React application idiomatically using React Hooks or Higher-Order Components.
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:
npm install @capacitor/browser @capacitor/appWas this helpful?
@capacitor/browser- allows you to interact with the device's system browser and is used to open the URL to Auth0's authorizaction endpoint@capacitor/app- allows you to subscribe to high-level app events, useful for handling callbacks from Auth0
Under the hood, the Auth0 React SDK uses React Context 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: Thedomainvalue 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.
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 performs a redirect to the Auth0 Universal Login Page. 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 on iOS, and Chrome Custom Tabs on Android).
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.
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. 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 thelogoutParams.returnToparameter. - Set the
openUrlparameter to a callback that uses the Capacitor browser plugin to open the URL usingBrowser.open.
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 - Learn how to configure and manage your Auth0 tenant and applications
- Auth0 Marketplace - Discover integrations you can enable to extend Auth0’s functionality
Sign up for an or to your existing account to integrate directly with your own tenant.