Error: WebAuthn not supported in this browser

[KannuSingh]

I'm encountering a strange issue: when running my application on localhost using an Android mobile device with browsers like Brave, Chrome, and Samsung Internet, I'm getting the error message 'Error: WebAuthn not supported in this browser.' It's worth noting that all of these browsers are up to date.

The peculiar part is that when I deploy my React app and access it through these browsers on the same mobile device, everything works fine. The error only occurs when I'm running the application locally and accessing it through these mobile browsers.

[MasterKale]

Hmm, at what URL are you hosting your site locally during development? Specifically, when you're "...running my application on localhost." And in the same vein, at what URL is your site hosted at when you deploy your React app? Sites that use WebAuthn must be hosted from a "secure context", which means either at http://localhost[:port] or https://example.com with a fully-functional TLS connection. A "broken" https:// connection (e.g. "https://localhost:3000") often results in the browser disabling access to WebAuthn.

[MasterKale]

For a bit more context:

https://developer.mozilla.org/en-US/docs/Web/Security/Secure_Contexts

[KannuSingh]

when testing locally on mobile, I am using http://[system_ip]:3000 to access the application

[KannuSingh]

Thanks, I think I got it now. bc I am acessing the app via system_ip it is considered not secure, so browser disable the access to WebAuthn.

[MasterKale]

Thanks, I think I got it now. bc I am acessing the app via system_ip it is considered not secure, so browser disable the access to WebAuthn.

Yeah, unfortunately this is the likely the culprit. One thing you can try is to set up a subdomain that's an A record to your intranet address. Get your server set up with valid TLS certs for that subdomain, then your mobile devices at home can reach your dev instance over a valid https:// connection. This is what's worked for me anyway 😄