Getting "Type Error" on IOS

[awolfson1987]

Hi,

I'm trying to work with WebAuthn for the first time. Everything works well on Android and Windows, however on IOS, I'm getting TypeError: Type Error when calling navigator.credentials.create or navigator.credentials.get.

Here is an example screen shot of the publicKey I'm using on create:

My JavaScript looks pretty much the same as in your demo code.

Tried with Safari and Chrome, on IOS versions 15.5 and 16.3, on all I get the same error.

Any help would be appreciated.

[Regenhardt]

Same error for both browsers makes sense, since chrome on iOS is actually also Safari in secret.

Can you share the whole error message? Does it say exactly which property has the wrong type?

In case you have the same problem I had when I started:
When you get the options object options, don't use it like credentials.create(options), but wrap it in another object instead:
navigator.credentials.create({ publicKey: options })

[awolfson1987]

Same error for both browsers makes sense, since chrome on iOS is actually also Safari in secret.

Can you share the whole error message? Does it say exactly which property has the wrong type?

In case you have the same problem I had when I started: When you get the options object options, don't use it like credentials.create(options), but wrap it in another object instead: navigator.credentials.create({ publicKey: options })

That is all I'm getting in the error.

Already using as object:

try {
        newCredential = await navigator.credentials.create({
            publicKey: makeCredentialOptions
        });
    }
    catch (e) {
        alert(e.toString());
        return;
    }

[Regenhardt]

If e.toString() only gives you this small error message, and you can't debug into this code to look at the whole thing, you could output the whole object:

alert(JSON.stringify(e));

[awolfson1987]

tried what you suggested, now it only shows {} in the alert.

[awolfson1987]

I found the solution, so apparently when calling RequestNewCredential or GetAssertionOptions to create the options (I'm using .NET framework and not .NET core), with the most basic settings, it returns objects for attestation and userVerification, instead of just strings, which fails on IOS. Added 2 lines to overwrite it on JavaScript:

makeCredentialOptions.attestation = "none";

try {
    credential = await navigator.credentials.create({ publicKey: makeCredentialOptions });
}
catch (e) {
    
}

makeAssertionOptions.userVerification = "discouraged";

try {
    credential = await navigator.credentials.get({ publicKey: makeAssertionOptions });
}
catch (e) {
    
}

[Regenhardt]

Doesn't userVerification = "discouraged" mean you don't want to actively request an authentication device from the user though?

[awolfson1987]

Doesn't userVerification = "discouraged" mean you don't want to actively request an authentication device from the user though?

Thank you for that, I will probably change that, I just wanted to add the solution to the main problem, the value can be changed as preferred.

[Simonl9l]

@awolfson1987 I've has a lot of success using the simplewebauthn/browser npm package, and seem to work well on all platforms.