Ionic React and Auth0 — Config

What is Auth0

I came across Auth0 in my current position as Frontend developer as a cool way to have all available social login possibilities as well as old fashioned email/password login, and all of that without anything on your FE or BE side. These possibilities are great if you are just exploring what your customers would like to see as a Login options.Integration with existing FE and BE is seamless and they provide you with good documentation for all major platforms. Why then I am writing this then? Well, we had very exotic setup on our side, at least on Frontend side. We are using combination of Ionic and React and all of that using capacitor. But more on that later.

Client Setup

As said we are using Ionic + React and all that without cordova and with capacitor instead. This Capacitor thing does not pose a problem because you can still use Cordova plugins within it. This thing is that documentation for Ionic on Auth0 is available only for Angular and this created a bit of a issue within our team. But, after careful investigation (try and error phase) we concluded that you can use all of the Angular plugins with some of the React tweaks.

Auth0 Configuration

When you signup for Auth0 a new application will be created for you, or you can do the same at any time. Once you do that you will get all application details for your new application. Those details we will use later when we are setting up our login setup. For now make sure you get two things:

• Domain
• Client ID

First thing you need to configure on your end is callback URL. This will have following format:

# replace YOUR_PACKAGE_ID with your app package ID YOUR_PACKAGE_ID://YOUR_DOMAIN/cordova/YOUR_PACKAGE_ID/callback

Domain you have from your application data and package id is your package id :).

Now, the next step is always configuring CORS on Auth0, but you can see this already in their documentation for Angular for example. Add at least localhost to your CORS setting within Auth0:

http://localhost, ionic://localhost, http://localhost:8100

React Implementation

After this you’ll need to add necessary libraries. We are using npm so the command would look like this:

npm install auth0-js @auth0/cordova @ionic/storage --save

But I guess that installing using yarn would not be that much different.

Next thing to add are cordova plugins, and this would require a bit of tweaking because instead of Cordova we are using Capacitor

npm install --save @ionic-native/safari-view-controller
npm install --save cordova-plugin-customurlscheme

This cordova-plugin-customurlscheme is responsible for adding custom url scheme in your project but as we are not using Cordova we have to do by ourselves. On iOS you need to go to Xcode and open you project in there, and add in info.plist something like this:

<dict>
  <key>CFBundleURLSchemes</key>
  <array>
    <string>YOUR_PACKAGE_ID</string>
  </array>
</dict>

Also, you need to enable the app ability to be opened by following URL in AppDelegate.swift:

func application(_ application: UIApplication, continue userActivity: NSUserActivity, restorationHandler: @escaping ([UIUserActivityRestoring]?) -> Void) -> Bool {
  // Called when the app was launched with an activity, including      Universal Links.
  // Feel free to add additional processing here, but if you want the App API to support
  // tracking app url opens, make sure to keep this call
  return CAPBridge.handleContinueActivity(userActivity, restorationHandler)
}

So, as you can see, not that much work. I am dealing only with iOS here, but Android is not my thing anyway.

Now we are getting to the part where we have to create our code in Ionic itself. First of all we need to create a React component that will handle the URL redirects. We did this by adding AppUrlListener:

This will enable you app to continue the login process once your callback URL is called by Auth0. AppUrlListener must be invoked in App.tsx as a standalone tag.

After this you need to add Auth0 configuration variables:

Now you are ready to add your Login service, or component. We are using this React way, so once the page is loaded it will directly redirect to Auth0 Login page and start login process. This way customers have one less item to click and the Login process is seamless.

I have omitted some of the implementation specifics but even without this it is clear how is this used in React component. We are using useEffect to run this when the page is loaded. And this is all that is to have Auth0 running on React. As said it is rather easy to have it implemented this way. The only thing missing is sign out but this is even easier: