docs(sdk): React native passkeys tutorial #663

yagopv · 2024-12-18T15:01:15Z

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:

github-actions · 2024-12-18T15:01:31Z

Branch preview

✅ Deployed successfully in branch deployment:

https://react_native_passkeys--docs.review.5afe.dev

github-actions · 2024-12-18T15:01:34Z

Overall readability score: 30.91 (🟢 +0.12)

File	Readability
react-native.mdx	64.19 (-)

View detailed metrics

🟢 - Shows an increase in readability
🔴 - Shows a decrease in readability

File	Readability	FRE	GF	ARI	CLI	DCRS
react-native.mdx	64.19	54.52	9.96	11	10.9	7.18
	-	-	-	-	-	-

Averages:

	Readability	FRE	GF	ARI	CLI	DCRS
Average	30.91	26.94	13.63	17.74	15.81	8.96
	🟢 +0.12	🟢 +0.1	🟢 +0.01	🟢 +0.02	🟢 +0.02	🟢 +0.01

View metric targets

Metric	Range	Ideal score
Flesch Reading Ease	100 (very easy read) to 0 (extremely difficult read)	60
Gunning Fog	6 (very easy read) to 17 (extremely difficult read)	8 or less
Auto. Read. Index	6 (very easy read) to 14 (extremely difficult read)	8 or less
Coleman Liau Index	6 (very easy read) to 17 (extremely difficult read)	8 or less
Dale-Chall Readability	4.9 (very easy read) to 9.9 (extremely difficult read)	6.9 or less

louis-md

Strong work! 💪 A few small remarks to help the user get to the end of the tutorial

pages/advanced/passkeys/tutorials/react-native.mdx

valle-xyz

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.

pages/advanced/passkeys/tutorials/react-native.mdx

valle-xyz

This review includes the first comments after testing. It worked on iOS and did not work on Android (yet).

pages/advanced/passkeys/tutorials/react-native.mdx

valle-xyz · 2025-01-15T15:37:49Z

examples/react-native-passkeys/lib/safe.ts

+
+  const txResult = await protocolKit.executeTransaction(signedAddOwnerTx);
+
+  const receipt = await waitForTransactionReceipt(client, {


this client is undefined, right? It seems that the function holds here and the app shows a loading spinner for ever.

When I log it I have:

pages/advanced/passkeys/tutorials/react-native.mdx

yagopv · 2025-01-16T08:27:15Z

pages/advanced/passkeys/tutorials/react-native.mdx

+
+We will use emulators and development builds in this tutorial, so please refer to the relevant sections in the Expo documentation for proper configuration. If you know how to do that or want to use a physical device, you can skip these steps. If you only want to test one platform, that's fine too, you only need to follow one of the steps below:
+
+- [**Android Studio Emulator**](https://docs.expo.dev/get-started/set-up-your-environment/?platform=android&device=simulated&mode=development-build)


We can mention that the steps to “Create a development build” using expo are optional as we are executing the app locally in both Android and iOS setups

Yes, you say on line 69 that we can skip these steps if we know what we do ;)

pages/advanced/passkeys/tutorials/react-native.mdx

yagopv · 2025-01-16T08:37:17Z

It's mandatory to add the plugins section in the app.json

    "plugins": [
      [
        "expo-build-properties",
        {
          "ios": {
            "deploymentTarget": "15.1"
          },
          "android": {
            "compileSdkVersion": 34
          }
        }
      ]
    ]

This is not reflected in any place

valle-xyz

Hey, I went through it again, and still could not get the passkey working on Android.

I added two comments.

pages/advanced/passkeys/tutorials/react-native.mdx

valle-xyz · 2025-01-16T13:51:35Z

pages/advanced/passkeys/tutorials/react-native.mdx

+- Have enrolled to the [Apple Developer Program](https://developer.apple.com/programs/enroll/) and installed [Xcode](https://developer.apple.com/xcode/) (if you want to test the app on iOS)
+- Have downloaded and installed [Android Studio](https://developer.android.com/studio) and have a Google account connected to your emulator (if you want to test the app on Android)
+- Have a [ngrok](https://ngrok.com/) account to create an HTTPS tunnel to your server.
+


Add the requirement, that the local java version should be 17.

It's mentioned on l.74, do you want to add another one here?

* chore(sdk): Update passkeys documentation (#649) * docs(sdk): React native passkeys tutorial (#663) * Write tutorial * Upload GIF * Some improvements * Update image * Vale * Some improvements * Some improvements * Some fixes and improvements * Update pages/advanced/passkeys/tutorials/react-native.mdx * Update pages/advanced/passkeys/tutorials/react-native.mdx * Update pages/advanced/passkeys/tutorials/react-native.mdx * Update pages/advanced/passkeys/tutorials/react-native.mdx * Update pages/advanced/passkeys/tutorials/react-native.mdx * Update pages/advanced/passkeys/tutorials/react-native.mdx * Update pages/advanced/passkeys/tutorials/react-native.mdx * Add react-native-passkeys tutorial to generateCodeExamples.js script * Switch generateCodeExamples.js to TypeScript * Run generateCodeExamples.ts * Add Xcode to Vale whitelist * Import style changes from tutorial repo * Implement requested changes * Implement requested changes * Fix vale errors * Revert requested change l.93 and fix formatting issue * Fix instructions for iOS * Reupload iOS assets * Fix typo * Add app.json to the code examples * Streamline iOS flow; implement requested changes * Fix typo --------- Co-authored-by: louis-md <[email protected]> --------- Co-authored-by: Yago Pérez Vázquez <[email protected]>

yagopv added 7 commits December 16, 2024 16:03

Write tutorial

4467844

Upload GIF

be30a6c

Some improvements

ddc795c

Update image

9c87607

Vale

962404b

Some improvements

dd6d97c

Some improvements

6597d7a

yagopv requested a review from germartinez December 18, 2024 15:01

yagopv changed the title ~~React native passkeys tutorial~~ docs(sdk): React native passkeys tutorial Dec 18, 2024

yagopv linked an issue Dec 18, 2024 that may be closed by this pull request

[React Native] Create guide in docs safe-global/safe-core-sdk#1066

Closed

Some fixes and improvements

febbe81

yagopv requested a review from louis-md December 20, 2024 12:35

louis-md requested changes Jan 8, 2025

View reviewed changes

louis-md added 12 commits January 8, 2025 17:29

Update pages/advanced/passkeys/tutorials/react-native.mdx

a548ee7

Update pages/advanced/passkeys/tutorials/react-native.mdx

93a9f8b

Update pages/advanced/passkeys/tutorials/react-native.mdx

5731def

Update pages/advanced/passkeys/tutorials/react-native.mdx

7d68adb

Update pages/advanced/passkeys/tutorials/react-native.mdx

2b5d635

Update pages/advanced/passkeys/tutorials/react-native.mdx

6a1b6c5

Update pages/advanced/passkeys/tutorials/react-native.mdx

d3de03b

Add react-native-passkeys tutorial to generateCodeExamples.js script

91ca284

Switch generateCodeExamples.js to TypeScript

60203ee

Run generateCodeExamples.ts

778707f

Add Xcode to Vale whitelist

2a3b97e

Import style changes from tutorial repo

15311c2

valle-xyz requested changes Jan 10, 2025

View reviewed changes

louis-md added 2 commits January 13, 2025 18:01

Implement requested changes

54199ed

Implement requested changes

5728b6e

Fix vale errors

b56c384

louis-md requested a review from valle-xyz January 13, 2025 17:05

Revert requested change l.93 and fix formatting issue

d00e013

valle-xyz requested changes Jan 15, 2025

View reviewed changes

louis-md added 3 commits January 15, 2025 18:03

Fix instructions for iOS

e4db3c6

Reupload iOS assets

8c5916e

Fix typo

2c2e2a1

yagopv commented Jan 16, 2025

View reviewed changes

pages/advanced/passkeys/tutorials/react-native.mdx Outdated Show resolved Hide resolved

yagopv commented Jan 16, 2025

View reviewed changes

pages/advanced/passkeys/tutorials/react-native.mdx Outdated Show resolved Hide resolved

yagopv commented Jan 16, 2025

View reviewed changes

pages/advanced/passkeys/tutorials/react-native.mdx Outdated Show resolved Hide resolved

yagopv commented Jan 16, 2025

View reviewed changes

pages/advanced/passkeys/tutorials/react-native.mdx Outdated Show resolved Hide resolved

valle-xyz requested changes Jan 16, 2025

View reviewed changes

louis-md added 2 commits January 16, 2025 16:05

Add app.json to the code examples

8e2e3b8

Streamline iOS flow; implement requested changes

250f762

louis-md self-requested a review January 16, 2025 15:26

louis-md approved these changes Jan 16, 2025

View reviewed changes

Fix typo

5f91cd7

louis-md merged commit 95f09c0 into development Jan 16, 2025
3 checks passed

louis-md deleted the react-native-passkeys branch January 16, 2025 16:16

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

docs(sdk): React native passkeys tutorial #663

docs(sdk): React native passkeys tutorial #663

yagopv commented Dec 18, 2024

github-actions bot commented Dec 18, 2024 •

edited

Loading

github-actions bot commented Dec 18, 2024 •

edited

Loading

louis-md left a comment

valle-xyz left a comment

valle-xyz left a comment

valle-xyz Jan 15, 2025

louis-md Jan 16, 2025

yagopv Jan 16, 2025

louis-md Jan 16, 2025

yagopv commented Jan 16, 2025

valle-xyz left a comment

valle-xyz Jan 16, 2025

louis-md Jan 16, 2025


		const txResult = await protocolKit.executeTransaction(signedAddOwnerTx);

		const receipt = await waitForTransactionReceipt(client, {


		We will use emulators and development builds in this tutorial, so please refer to the relevant sections in the Expo documentation for proper configuration. If you know how to do that or want to use a physical device, you can skip these steps. If you only want to test one platform, that's fine too, you only need to follow one of the steps below:

		- [Android Studio Emulator](https://docs.expo.dev/get-started/set-up-your-environment/?platform=android&device=simulated&mode=development-build)

docs(sdk): React native passkeys tutorial #663

docs(sdk): React native passkeys tutorial #663

Conversation

yagopv commented Dec 18, 2024

Context

github-actions bot commented Dec 18, 2024 • edited Loading

Branch preview

github-actions bot commented Dec 18, 2024 • edited Loading

louis-md left a comment

Choose a reason for hiding this comment

valle-xyz left a comment

Choose a reason for hiding this comment

valle-xyz left a comment

Choose a reason for hiding this comment

valle-xyz Jan 15, 2025

Choose a reason for hiding this comment

louis-md Jan 16, 2025

Choose a reason for hiding this comment

yagopv Jan 16, 2025

Choose a reason for hiding this comment

louis-md Jan 16, 2025

Choose a reason for hiding this comment

yagopv commented Jan 16, 2025

valle-xyz left a comment

Choose a reason for hiding this comment

valle-xyz Jan 16, 2025

Choose a reason for hiding this comment

louis-md Jan 16, 2025

Choose a reason for hiding this comment

github-actions bot commented Dec 18, 2024 •

edited

Loading

github-actions bot commented Dec 18, 2024 •

edited

Loading