Ionic4 Capacitor React integration

Hi fellas,

Writing this topic because of missing any guidelines for Ionic Capacitor Auth0 integration.

The only topic that I found partially useful for my case was this one: Auth0 Ionic & Capacitor (Angular) SDK Quickstarts: Login
On the other hand, it is for the Cordova (which I think Capacitor can work with docs. ), but it’s specifically for the Angular app and forcing me to do some Angular specific stuff or updated to the webpack file which I won’t be able to do.

Ok, closer to the problem - I’m using auth0-lock for my web/PWA version of the app (config provided below). Also worth mentioning that I’m using Ionic React, not the Angular version.
I have added capacitor://localhost to the Allowed Web Origins to prevent the CORS issue but having failing code on TypeError: null is not an object (evaluating 't.protocol') from

// auth0.min.esm.js:1185
  getOriginFromUrl: function getOriginFromUrl(url) {
    if (url) {
      var parsed = getLocationFromUrl(url),
          origin = parsed.protocol + "//" + parsed.hostname;
      return parsed.port && (origin += ":" + parsed.port), origin;
    }
  },

I assume that it doesn’t work because of deprecation for Cordova.

So, I need to raise several questions here:

  1. Is there is a way to use an embedded lock for Cordova/Capacitor app?
  2. If there is no way to use an embedded lock, what is the proper way to setup Auth0 login flow for both web/PWA and Ionic Capacitor/Cordova environments for the Universal login (but not being Angular specific)?
private lock = new Auth0Lock(
    environment.AUTH0_CLIENT_ID,
    environment.AUTH0_DOMAIN,
    {
      allowForgotPassword: true,
      allowSignUp: false,
      allowedConnections: ['Username-Password-Authentication', 'google-oauth2', 'windowslive'],
      auth: {
        audience: environment.AUTH0_AUDIENCE,
        redirectUrl: 'capacitor://localhost/callback',
        responseType: 'token',
        sso: true
      },
      autoclose: true,
      closable: false,
      configurationBaseUrl: 'https://cdn.eu.auth0.com',
      container: 'auth0-lock-container',
    }
  );
4 Likes

We you able to find a fix or a way around this issue?

1 Like

Tried to follow comments from here, but didn’t really worked out