CORS issues on Hybrid apps using capacitor

Hello i’m having CORS errors when trying to login users using the passwordless auth0 lock widget on hybrid apps with Capacitor (http://capacitor.ionicframework.com) .
I’m sharing the same codebase between mobile and web and in the android version i’m not able to authenticate users.

I have set Allowed Web Origins on my Auth0 application to:
http://localhost

this is my Lock widget configuration :

lock = new Auth0LockPasswordless(config.auth0.clientId, config.auth0.domain, {
autoclose: true,
allowedConnections: [‘sms’],
passwordlessMethod: ‘code’,
auth: {
redirectUrl: config.auth0.callbackUrl,
responseType: ‘token id_token’,
params: {
scope: ‘openid profile email phone’,
audience: config.auth0.audience
},
}
});

logs with the failed login attempt

Summary
Occurred 2 minutes agoat 2019-04-18 13:31:57.664 UTC
Type Failed cross origin authentication
Description Wrong phone number or verification code.
Connection
Application
User

{
“date”: “2019-04-18T13:31:57.664Z”,
“type”: “fcoa”,
“description”: “Wrong phone number or verification code.“,
“connection_id”: “”,
“ip”: “xxxxxxx”,
“user_agent”: “Mozilla/5.0 (Linux; Android 9; Android SDK built for x86 Build/PSR1.180720.075; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/73.0.3683.90 Mobile Safari/537.36",
“details”: {
“body”: {
“client_id”: “xxxxxxxxxxx”,
“username”: “xxxxxxxx”,
“otp”: “940940",
“realm”: “sms”,
“credential_type”: “http://auth0.com/oauth/grant-type/passwordless/otp”
},
“qs”: {},
“connection”: “sms”,
“error”: {
“message”: “Wrong phone number or verification code.“,
“oauthError”: “Wrong phone number or verification code.“,
“type”: “access_denied”,
“uri”: null
}
},
“hostname”: “xxxxxxx.eu.auth0.com”,
“auth0_client”: {
“name”: “lock.js”,
“version”: “11.15.0",
“env”: {
“auth0-js”: “9.10.2”
}
},
“log_id”: “90020190418133157665557656113268763764825518909677371394”
}

Hey there @idhard, I’d be happy to help. When working with with setting up your Allowed Web Origins have you specified the port you are leveraging when running your app locally? If you direct message me your tenant name, I would be happy to take a deeper look at what may be occurring as well. Please let me know if you have any additional questions as well. Thanks!

Just for a reference I have linked a Ionic 3 Quick Start guide as well below:
https://auth0.com/docs/quickstart/native/ionic3/01-login

Hey James thanks for your assistance , I don’t set the port as I’m delivering the build of the app directly inside the android app, by default Capacitor set the hostname to http://localhost. I will look at the docs you suggested, though I really think there is a bug on auth0 lock widget when running on hybrid apps, the error message itself wasn’t clear enough , I had to check at the Auth0 logs to know it was a cors problem.

@idhard can you share more details on your setup and how I might be able to replicate the issue on my side? What browser are you using? The exact error that you are receiving? Are you using using universal or embedded login? Thanks in advance for the added information as we work on narrowing this down!

@James.Morrison sure , i will try to set up a repo with basic setup, in the meantime i’m currently using React bootstrapped with create-react-app CLI + Capacitor for mobile development , nothing out of the standar.
I have implemented auth0 embedded passwordless login with Lock v11.

regarding your questions

  • What browser are you using?
    the issue only happen on mobile, on web everything seems correct using any browser, from the logs you could get the browser used when failing on mobile
  • The exact error that you are receiving?
    the logs i have attached in the issue.
    in the login form i only get “we are sorry something went wrong” after submitting the security code
    Screenshot 2019-04-23 at 10...
    Are you using using universal or embedded login?
    embedded login with auth0-lock@11.15.0

thanks!

@James.Morrison would mind to confirm me that embedded passwordless login with Auth0 Lock should work on mobile environments ? i believe the main issue is CORS conflicts on mobile as no header nor domain are set . Thanks

No worries, I am able to confirm that @idhard.

Lock Passwordless is an embeddable widget that encapsulates the best practices for authentication with SMS and Email for Desktop, Tablet, and Mobile Devices.
Passwordless Authentication | Okta
Passwordless Connections

alright finally managed to run the embedded login on hybrid mobile app but now i’m not able to login anymore from Safari !

getting this error in the console :

[Error] Failed to load resource: the server responded with a status of 401 () (verify, line 0) https://TENANT.eu.auth0.com/co/verify

no error logs … and same generic UI error “WE’RE SORRY, SOMETHING WENT WRONG”

this is really frustrating

I sent you a direct message requesting a bit of sensitive information. When you get a minute can give it a look and shoot me a response? Thanks in advance!

i confirm the it was a CORS issue , we have implemented custom domain and now seems to work in safari

1 Like

I’m glad to hear you were able to solve the challenge with enabling a custom domain! I will continue to investigate the CORS challenge and see if there is something we can build out a FAQ for for the future.

1 Like

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.