library reports lack of support to webauthn in mobile chrome but webauthn seems to work if using reference site

joaomelo commented 9 months ago

Describe the issue

When using the browser functions startAuthentication and startRegistration in mobile Chrome, an error message appears: "WebAuthn is not supported in this browser. " However, if the site webauthn.io is accessed in the same browser, the site register and authenticate buttons function properly.

Reproduction Steps

Go to the local dev site (HTTP://192...***) and let it request authentication options to the server for registration

The server responds with:

{
"registrationOptions": {
    "challenge": "EHCstpt0528iVDP7kbsWQ3YOAF-XjjPyJk3WocsyLBQ",
    "rp": {
        "name": "localhost",
        "id": "localhost"
    },
    "user": {
        "id": "364dd403-7c50-43ca-a654-92394f56f634",
        "name": "joao.melo@email.com",
        "displayName": "joao.melo@email.com"
    },
    "pubKeyCredParams": [
        {
            "alg": -8,
            "type": "public-key"
        },
        {
            "alg": -7,
            "type": "public-key"
        },
        {
            "alg": -257,
            "type": "public-key"
        }
    ],
    "timeout": 60000,
    "attestation": "none",
    "excludeCredentials": [],
    "authenticatorSelection": {
        "residentKey": "preferred",
        "userVerification": "preferred",
        "requireResidentKey": false
    },
    "extensions": {
        "credProps": true
    }
},
"conta": { /* ...*/ },
"expiracao": "2024-02-16T20:50:33.000Z"
}

Attempt to call start startRegistration with the provided options
See the error in the console: "WebAuthn is not supported in this browser. "

I've tried registering on the desktop beforehand and only doing startAuthetication in the mobile environment. It still throws the same web auth not supported error with startAuthentication.

Expected behavior

Since the webauthn.io site works, I expected the browser authenticator dialog would open for user interaction. When I use the system in the desktop browser, it works as expected.

Code Samples + WebAuthn Options and Responses

This is the code that calls startRegistration:

    async handleRegister () {
      const authenticationResponse = await startRegistration(this.webAuthnRegistrationOptions);
      this.verifyRegistration(authenticationResponse);
    }

Here an image capturing the call stack

If I click on the index.js link beside startRegistration, it jumps to this point in the the lib code:

async function startRegistration(creationOptionsJSON) {
    if (!browserSupportsWebAuthn()) {
        throw new Error('WebAuthn is not supported in this browser');
    }

The webtuhn.io site prints data in the console when the authenticate button is pressed. I don't know if it is useful, but here it is:

Setting up Conditional UI (index):638 AUTHENTICATION OPTIONS (index):639 { "challenge": "Go6DqtLzqu555FuCi6evBkkLUxM7KjI8bpqODvqgOO6oOD1Rvbk2R9kRfbq-8WBNGvM9BWZoPca_CHPORukz0Q", "timeout": 60000, "rpId": "webauthn.io", "allowCredentials": [], "userVerification": "preferred" } (index):638 AUTHENTICATION OPTIONS (index):639 { "challenge": "kjgrKrnwd-sMjxeNkDe-6L0GGzwGydLPHQc3qnhmcbXnUibpUedKQxT-eP2Uti6qb0kuVF3W-RHI6e_y9CTujg", "timeout": 60000, "rpId": "webauthn.io", "allowCredentials": [], "userVerification": "preferred" } (index):428 Conditional UI request was aborted

Dependencies

OS: Operating System Android 10; SM-N9600 Build/QP1A.190711.020
Browser: Chrome mobile version: 121.0.6167.178
Authenticator: I'm sorry, but I don't know for sure. I believe the authenticator is decided to some default options decided by the browser or OS itself

SimpleWebAuthn Libraries

client is using: "@simplewebauthn/browser": "^9.0.1" and backend uses: @simplewebauthn/server": "8.3.5"

More Context

The server system is running on a local development machine. The local dev machine OS is Windows 11, but the system runs in the Ubuntu WSL2 environment. It is composed of multiple docker containers coordinated by docker-compose. The relevant services are an nginx entry point that proxies calls between the web server (single SPA Vue 2 app) or the authenticator backend microservice (NodeJS).

The nginx entry point answers at the HTTP://localhost address (no ports are required). Everything works as expected if we use the system from this same desktop machine.

To access the system from a phone, I opened my cell phone, connected it to the same Wi-Fi as the desktop machine, and typed the desktop IP address HTTP://192. .... The system is accessed, and I can navigate the first login steps normally. The error occurs in the step that startAuthentication is called.

MasterKale commented 9 months ago

Hello @joaomelo, can you provide a couple more bits of info to help diagnose this?

What is your local development URL?
Can you provide the full error stack trace you're seeing in the console? There should also be a cause property on errors raised within startAuthentication() that will be any error raised by the navigator.credentials.get() call

joaomelo commented 9 months ago

Hi @MasterKale.

Thank you very much for quickly responding; I updated the issue with more context. I hope I was as able to provide the information you requested.

Best regards. JM

MasterKale commented 9 months ago

Go to the local dev site (HTTP://192...***)

I'll bet this is the problem. WebAuthn can only be called from secure contexts which include:

A site at https:// with a valid TLS certificate
A site at http://localhost[:port]

Unfortunately you'll need to figure out how to get your dev instance available at one of those two forms of valid URLs - accessing it via IP address won't support use of WebAuthn.

joaomelo commented 9 months ago

ok @MasterKale. I will try to think of a way to overcome this use of the IP. thank you very much.

spendres commented 9 months ago

@joaomelo You can try ngrok for dev which will give you a valid https url and tunnel to your dev machine.

joaomelo commented 9 months ago

@joaomelo You can try ngrok for dev which will give you a valid https url and tunnel to your dev machine.

sure will @spendres, thank you.

joaomelo commented 9 months ago

For the record, I couldn't make it work with ngrok, but when I did a full publish to an internet environment, both registration and authentication went fine. Thanks again.

MasterKale commented 9 months ago

Closing this out as it seems resolved.

MasterKale / SimpleWebAuthn