Overview

Auth0 is a highly adaptable authentication and authorization platform. Median's Auth0 Native Plugin implements the Auth0 iOS and Android SDK into your app.

The Auth0 integration allows you to request a login token from Auth0 using Universal Login and a native login UI. And optionally to store a refresh token to the secure device storage so that future logins are seamless using Face ID / Touch ID and Android Biometric. This biometric functionality is similar to our Face ID / Touch ID Android Biometric Native Plugin.

👍

Developer Demo

Display our demo page in your app to test during development https://median.dev/auth0

Auth0 and App Configuration

Auth0 Configuration

❗️

Configuration Disclaimer

Please be aware that the following steps provide a sample implementation to demonstrate the configuration for the Developer Demo. Auth0 is a highly customizable authentication and authorization service and the configuration below may not be suitable for your production environment. We strongly recommend consulting with Auth0 experts to review and tailor your production configuration to your needs.

Additional information on the Auth0 Universal Login configuration for mobile applications can be found here: Auth0 Native App Quickstart Guide

Auth0 Application Type

Regardless of your existing Applications, Universal Login will require a new Native or Singe Page Web Application, as the Auth0 Quickstart Guide outlines. Once created please confirm that the Application Authentication in credentials is set to None.

Auth0 Application URIs

As a next step after creating the application, you will need to configure the callback URIs for your Auth0 application. The configuration requires you to set up at minimum the Allowed Callback URLs and Allowed Logout URLs.

For our example configuration, we assume the following values:

Based on the parameters above we can add the following three URLs to the Auth0 application configuration as allowed Callback URLs and Allowed Logout URLs:

demo://dev-tax7avdd0xmeaavx.us.auth0.com/android/co.median.android.lempza/callback,
https://dev-tax7avdd0xmeaavx.us.auth0.com/ios/co.median.ios.lempza/callback,
co.median.ios.lempza://dev-tax7avdd0xmeaavx.us.auth0.com/ios/co.median.ios.lempza/callback

You can learn more about the application URLs for your target platform (iOS and/or Android) in the respective Auth0 Native App Quickstart Guide.

App Configuration

Link Handling

Link Handling

Please verify the link Handling rules for links to your Auth0 Domain. You can learn more about Link Handling in our Link Behavior article.

Universal Deep Links

Please verify that Deep Linking is configured properly for all domains listed under Universal Links / Deep Links.

URL Scheme Protocol

Please verify a URL Scheme Protocol is specified for your app. The URL Scheme and all other values including Package Name and Bundle ID must match the parameters set in your Auth0 tenant.

Auth0 Plugin Configuration

The Auth0 Native Plugin requires several parameters to be set in the App Studio, on the Native Plugins tab under "Advanced Mode". Sample parameters are as follows:

{
  "domain": "dev-tax7avdd0xmeaavx.us.auth0.com", 
  "clientId": "wTD****************KBwV", 
  "scheme": "demo", // Based on the URL scheme of your Android Callback URLs
  "audience":"https://median-test.auth0.com/api/v2/" // Optional based on Auth0 tenant config
}

🚧

JSON Validation

In order to save your Auth0 plugin configuration you will have to remove the comments that have been added to the sample above.

These parameters should match the Application Settings on your Auth0 Dashboard.

Implementation Guide

Login using Universal Login

Launch Universal Login via the JavaScript Bridge. Upon completion of Universal Login flow focus is returned to the app webview and a promise/callback function is invoked with the tokens as parameters.

↔️Median JavaScript Bridge

To prompt Universal Login and retrieve a token:

JavaScript

const credentials = await median.auth0.login(
  {
    scope: "email profile offline_access" // optionally pass a scope
  }
);

// credentials object will have the following structure
{
  accessToken: STRING,
  idToken: STRING,
  scope: STRING,
  error: STRING, // if an error occurred,
  refreshToken: STRING // with 'offline_access' scope configured
}

Logout

↔️Median JavaScript Bridge

To logout:

JavaScript

median.auth0.logout.then(function(){
  error: STRING // if an error occurred
}

Support for Face ID / Touch ID / Android Biometrics

↔️Median JavaScript Bridge

JavaScript

// you can enable support for Face ID / Touch ID / Android Biometrics when logging in.

median.auth0.login({
  enableBiometrics: true,
  callback: median_auth0_post_login
});


// To find out if biometrics were enabled upon login
const auth0Status = await median.auth0.status();

// status object will have the following structure

{
  biometryAvailable: boolean,
  biometryType: 'touchId' | 'faceId' | 'none',
  hasValidCredentials: boolean
}

Get saved credentials

Credentials are saved in the secure storage and can be retrieved in later sessions. This will automatically renew the credentials using the refreshToken already saved from prior successful login

↔️Median JavaScript Bridge

To get credentials saved in secure storage

JavaScript

const credentials = await median.auth0.getCredentials();

// credentials object will have the following structure
{
  accessToken: STRING,
  idToken: STRING,
  scope: STRING,
  error: STRING, // if an error occurred,
  refreshToken: STRING
}

Renew

Retrieving the credentials gets you renewed credentials if existing ones are expired but you can also request to renew the credentials manually as well.

You can optionally pass a refresh token to be used. By default, it will use the one saved in the credentials.

↔️Median JavaScript Bridge

To logout:

JavaScript

const credentials median.auth0.renew({
  // optionally pass a refresh token
  refreshToken?: string 
});

Auth0 Plugin Demo

The following demo outlines the expected JSON responses for each JavaScript Bridge function based on the configuration and setup above.

Frequently Asked Questions

Why should I implement Auth0 Universal Login rather than using a Webview?

Mobile security policies typically require that user login, particularly for an SSO Single Sign On provider, be facilitated in the native app and not in an app webview. This is primarily because if the app or website is compromised a bad actor can potentially extract the credentials entered in the login form. Google Sign-in, Facebook Login, and Auth0 hosted Universal login make this mandatory, e.g.:

• https://developers.googleblog.com/en/upcoming-security-changes-to-googles-oauth-20-authorization-endpoint-in-embedded-webviews/
• https://developers.facebook.com/blog/post/2021/06/28/deprecating-support-fb-login-authentication-android-embedded-browsers/

While it might be possible to circumvent these requirements and get login to work within the app webview comparable to a standard browser Median cannot provide any support or assistance for this use case. Our Social Login and Auth0 plugins are the recommended solutions as they offer native SDKs to meet security policies and the requirements of the vendors.