Getting error while tryin to create passkey

[armanmamyan]

Hi @r-n-o. First of all, thank you for your commitment and this lib.

I'm a bit new in the React Native world, and while I was trying to use the code that you built, I was facing an error with no normal explanation of what was going on. I've read the readmes and docs that you wrote and followed the steps to be able to launch the project. However, when the createPassKey method has been called, it throws an error (see the screenshot) and says {"error": "Native error", "message": "The"}.

For the sake of testing, I've created this public app. can someone take a look and tell me what exactly is wrong with the code ?

https://github.com/armanmamyan/passkeyapp

[r-n-o]

Hey @armanmamyan! Thanks for reaching out, and thanks for posting a link to your project, super helpful!

The error you encountered ({"error": "Native error", "message": "The"}) looks familiar, it's also something I had to resolve. Looking back at the README (https://github.com/r-n-o/passkeyapp?tab=readme-ov-file#error-native-error-message-the) it seems like the solution (in my case at least) was to add react-native-passkey (the library) to the project's package.json. But clearly you already have this there so it must be something else! I see you've deleted the package-lock.json file in favor of yarn.lock. Could that be part of the issue here? How are you building / running your application for testing? (looks like iOS simulator via Expo? Do you mind sharing the exact command you're using?)

Something that might help debug the issue: are you able to sign up with passkeys from inside your simulator's Safari browser at https://webauthn.io/? I remember running into things that prevented passkey usage inside simulators (I believe I had to sign into my iCloud from within the simulator and toggle "enroll face ID" in the simulator options iirc.

[armanmamyan]

Hey @r-n-o thank you very much for the quick reply.

I'm running the App via expo. npx expo run: ios choosing a device: iPhone 15 Pro mainly

1. I've added a package-lock.json and got rid of the yarn file, but still getting an issue
2. It could also be the react-native versioning issue (previously it was 0.73.6). I did the downgrade but the issue still exists. I locked version to 2.1.1 for react-native-passkey and 0.73.4 for react-native.
3. I've added a react-native-passkey as a peer dependency, but even that didn't help.
4. The face ID has been enrolled. However, despite that, I couldn't open a https://webauthn.io/
5. Coming back to my setup, I did everything that you described.

[armanmamyan]

@r-n-o I've been reading the react-native-passkey lib and found out that since 2 years people are struggling with this issue and it's because of Expo Go SDK and their custom native code. Here is the PR So the best shot to switch to bare workflow

[armanmamyan]

@r-n-o after building and running in the following order, now I'm getting the error that you mentioned on Readme.

[AuthenticationServices] ASAuthorizationController credential request failed with error: Error Domain=com.apple.AuthenticationServices.AuthorizationError Code=1004 "(null)"
 ERROR  {"error": "RequestFailed", "message": "The request failed. No Credentials were returned."}

However, my question is: What exactly do I need to use for the sake of testing in the local environment?

[r-n-o]

@armanmamyan ah interesting! So now you have a different error, which is good!

App signing (with a valid Apple provisioning profile) is important for passkeys to work correctly. I think this app signing is necessary for the associatedDomains capability to be active (configured here).

So, for local development I don't think you'll be able to iterate on passkey functionality with the usual expo "live reload" setup: I've had to recompile / reinstall the app unfortunately, to make sure it's signed correctly each time. Here's the command I use:

eas build --platform ios --local --profile preview

This prompts for apple credentials and handles app signing, the --local flag skips the remote expo build and does it all locally (but I think you could just as well send it to remote CI and install the app with a QR code if you wanted)

That being said, I'd still recommend expo's live reload setup to iterate on non-passkey features (UI elements and flows other than passkey creation). It's much better than having to recompile/resign the app each time.

[armanmamyan]

I'm facing a verification issue while trying to run the app on my phone. I guess it's related with certificates and stuff like this

[armanmamyan]

@r-n-o I started to face the same error even in the TesFlight build. I even changed it to bare react-native, but even that didn't work. I have some doubts that it might be related with associated domains capability. Can you tell me, please do I need associated domains to be configured if it's just a build deployed to TestFlight only ? And if so, what should be my domain, as this projects is purely for testing purposes and there is not domain or smth for it

[r-n-o]

@armanmamyan yep, associated domains need to be configured properly for passkeys to work at all. This means:

• configure the app capabilities and sign it with a valid provisioning profile (I think you've done this already?)
• reference the app from the domain's AASA file ("apple-app-site-association"). Unfortunately this is required even for testing purposes. What I've done personally is registering a new domain name so I control DNS and can host whatever is needed. And when the app isn't in TestFlight you can switch the associated domains to your production domain instead of using your test domain. In the case of iOS you need a file hosted at /.well-known/apple-app-site-association: example

[armanmamyan]

@r-n-o Yup, I did set up everything from scratch. I bought a completely new domain, did a setup following all guides, and yet faced the same issue over and over. Any chance we can take a look at this together? I believe a 30-minute call will help me a lot, and after identifying the issue, we'll update the documentation with exact solutions for such cases. I have a feeling that I'm missing something always

[armanmamyan]

Here's the complete new passkey-app setup https://github.com/armanmamyan/passkeyappv2

[r-n-o]

@armanmamyan yeah let's do a 30min call/pairing, it'll be easier than going back and forth on Github! Sent you an email just now.

Hopefully we can get to the bottom of it and document the problem+solution!

[armanmamyan]

After spending a decent amount of time investigating and debugging the app, I found the solution, and the solution actually was there all this time, all you need to do is play with parameters a bit to make sure that it's working.

Here are couple of hints, that may help you to solve the issue

1. It is more than important to have a proper setup in your domain. Generally impossible to have passkey without it
2. Be 100% sure that in your hosting you created a folder with the right chars. .well_known instead of .well-known. In my case after renaming the folder, Apple started to show me a gree checkmark in terms of domain setup :/
3. For you own safety, always add both applinks and webcredentials, make sure that bundleIdentifier name comes first
4. As a top seasoning, I've changed the apple-app-site-association. Now it looks like this

{ "applinks": { "apps": [], "details": [ { "appIDs": ["XXXXXXX.XX.XXXX.BID"], "paths": [ "*" ] } ] }, "webcredentials": { "apps": ["XXXXXXX.XX.XXXX.BID"] }, "appclips": {} }

[r-n-o]

@armanmamyan thank you for digging into this and writing down the solution! When you say "Apple started to show me a green checkmark in terms of domain setup", where did you see this? I wasn't aware that there was a tool apple had to check domain setup! (and if this is the case I'll update the README to link to it!)

[armanmamyan]

You can use branch as an example