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:
- Is there is a way to use an embedded lock for Cordova/Capacitor app?
- 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',
}
);