docs(sdk): React native passkeys tutorial #663
Conversation
Branch preview✅ Deployed successfully in branch deployment: |
|
Overall readability score: 30.91 (🟢 +0.11)
View detailed metrics🟢 - Shows an increase in readability
Averages:
View metric targets
|
yagopv
changed the title
There was a problem hiding this comment.
Hey, this is a great tutorial and a great use case. It was "relatively" easy to follow along, given the complexity of developing and running a mobile app.
However, the last step needs rework. It is important to handhold the developer, and to distuingish between iOS and Android (for example with Tabs). So we really need to be cristal clear and provide good guidance (better guidance than Apple and Google). I was unfortunately not able to add a passkey to the Safe on an Android Emulator. The Safe got deployed, though.
Additional to that, I would like to see some explanatory comments in the code, to guide the developer on what to look out for (as I mentioned in a comment).
When this is added, we need to retest it on Android and on iOS.
| Run the following command to add the project dependencies: | ||
|
|
||
| ```bash | ||
| npm install @safe-global/protocol-kit react-native-passkeys react-native-base64 @react-native-async-storage/async-storage react-native-prompt-android expo-build-properties |
There was a problem hiding this comment.
you need to change directory first, which should be added even if it is self-explanatory.
| Create a file named `.env` in the root of your project and add the following keys: | ||
|
|
||
| ```bash | ||
| # Add the Safe account owners. |
There was a problem hiding this comment.
Add comment that the developer should add one (or more) public addresses.
| - [**Android Studio Emulator**](https://docs.expo.dev/get-started/set-up-your-environment/?platform=android&device=simulated&mode=development-build) | ||
| - [**iOS Simulator**](https://docs.expo.dev/get-started/set-up-your-environment/?platform=ios&device=simulated&mode=development-build) | ||
|
|
||
| **⚠️ An important consideration is that the selected Android emulator must be compatible with Google Play Services to store the passkeys in the Android keystore. When [creating the emulator](https://docs.expo.dev/get-started/set-up-your-environment/?platform=android&device=simulated&mode=development-build#set-up-an-emulator) using Android Studio Device Manager, ensure that you include one with Play Store services.** |
There was a problem hiding this comment.
I'm not 100% sure, but what do you think? As most new Android Devices have this, I think a sentence somewhere in the text above would be enough. Like "Make sure the device has access to the Play Store, as this is required for passkeys". By this, we could be a little bit more cautious with warnings.
| # The private key of the Safe account owner that will be used to deploy the Safe or execute transactions. Should have some test Sepolia ETH. | ||
| EXPO_PUBLIC_SAFE_SIGNER_PK=add_your_private_key_here | ||
| # Sepolia RPC URL you want to use | ||
| EXPO_PUBLIC_RPC_URL=https://... |
There was a problem hiding this comment.
You can add a free one like https://eth-sepolia.public.blastapi.io or so.
| EXPO_PUBLIC_RPC_URL=https://... | ||
| ``` | ||
|
|
||
| Remember to add the .env file to your `.gitignore` file to avoid committing sensitive information. |
There was a problem hiding this comment.
It looks like this is automatically done by expo when creating a project. From my side this could be removed, but sure, it's always good to remind the developers about security.
| After completing all these configurations 🙃, you can finally run the local development build of the app on the emulators (Emulators should be running) by using the following commands: | ||
|
|
||
| ```bash | ||
| npx expo run:android |
There was a problem hiding this comment.
For Android, this command would not work because I don't have the Java runtime installed. The command npx expo start worked. I had to manually copy the address, which could be documented.
|
|
||
| Add the following code to the `storage.ts` file: | ||
|
|
||
| ```tsx |
There was a problem hiding this comment.
In these files, add a little bit more explanatory comments. They should introduce concepts, instead of documenting code. As ELI5 as possible. :)
|
|
||
| ## 7. Setup and host `AASA` and `assetslinks.json` files | ||
|
|
||
| To use passkeys in the app, you need to complete some additional setup in the Android and iOS projects. The steps are outlined in the `README.md` file of the [react-native-passkeys](https://github.com/peterferguson/react-native-passkeys) repository. Please follow the instructions for each platform you want to test. Basically you need to: |
There was a problem hiding this comment.
These steps should be outlined and explained in this tutorials. You can use tabs to differentiate between iOS and Android.
| npm start | ||
| ``` | ||
|
|
||
| Once you have it running, you need a public domain secured with SSL to test the passkeys (`localhost` is not valid). You can use a service like [ngrok](https://download.ngrok.com/mac-os) to create a tunnel to your local server. |
There was a problem hiding this comment.
Wow ok, this is a requirement that we should list at the beginning :D This whole step is a big one and has too little space for how much work this actually takes.
|
|
||
| ```bash | ||
| git clone https://github.com/5afe/aasa-server.git | ||
| npm install |
There was a problem hiding this comment.
Should change directory before.
Context
This PR adds a new tutorial to the advanced passkeys guides, teaching Safe developers how to work with React Native and Safe contracts, as well as how to add passkeys signers.
As a companion to this tutorial, we are introducing two new repositories: