Skip to content

Commit

Permalink
feat(expo-passkeys):move example project of expo passkeys to playgrou…
Browse files Browse the repository at this point in the history
…nd (#4533)
AlexNti authored Nov 11, 2024
1 parent 7dbad4c commit cc94fe0
Showing 12 changed files with 54 additions and 13,666 deletions.
2 changes: 2 additions & 0 deletions .changeset/sixty-ghosts-attend.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
---
---
13,634 changes: 0 additions & 13,634 deletions packages/expo-passkeys/example/package-lock.json

This file was deleted.

File renamed without changes.
Original file line number Diff line number Diff line change
@@ -37,4 +37,5 @@ yarn-error.*
.env
.yalc
ios
android
android
app.json
File renamed without changes.
Original file line number Diff line number Diff line change
@@ -6,53 +6,72 @@

## Steps

### 1. Install Project Dependencies

### Initiate project
In the project root, run:

```bash
npm run yalc:add
npm install
```

### 2. Navigate to the Example Folder

```bash
cd example
cp app.json.example app.json
```

### 3. Set Up Environment Variables
### Configure app.json

Add the `EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY` to the `.env`.
Replace the following placeholder with your configs

### 4. Configure Associated Domains for iOS
- ${YOUR_BUNDLE_IDENTIFIER}
- ${PACKAGE_NAME}

1. Log into your Clerk Dashboard, open the iOS Application tab, and, for testing purposes, consider using a development instance.
2. Set up your Associated Domains. To do this, you'll need:
- An Apple Developer account
- Your App ID Prefix and Bundle ID, available at Apple's Developer portal
3. In `app.json`, replace the `associatedDomains` entry with the front-end API domain provided by Clerk (e.g., `coyote-6.clerk.accounts.dev`).
4. Also update the `bundleIdentifier` in `app.json` to match your Bundle ID from the Apple Developer portal.
If you don't want to test passkeys remove the `associatedDomains` and `intentFilters`.

### 5. Install Example Dependencies

Run `npm install` within the example folder.
### Set Up Environment Variables

Add the `EXPO_PUBLIC_CLERK_PUBLISHABLE_KEY` to the `.env`.

### 6. Prebuild the Project

### Prebuild the Project

```bash
npx expo prebuild --clean
```

### 7. Run the Project on iOS
### Run the Project

```bash
npm run ios
```

Or

```bash
npm run android
```

### Troubleshooting

If you get the following error `Error: TreeFS: Could not add directory node_modules`,
terminate the ios or android emulator and run again `npm i`

## Testing the Passkey Feature

### Configure Associated Domains for iOS

1. Log into your Clerk Dashboard, open the Native applications, and, for testing purposes, consider using a development instance.
2. Set up your Associated Domains. To do this, you'll need:
- An Apple Developer account
- Your App ID Prefix and Bundle ID, available at Apple's Developer portal
3. In `app.json`, replace the `associatedDomains` entry with the front-end API domain provided by Clerk (e.g., `coyote-6.clerk.accounts.dev`).
4. Also update the `bundleIdentifier` in `app.json` to match your Bundle ID from the Apple Developer portal.

### How to use the passkeys

1. Go to your Clerk Dashboard and enable Passkeys in the Email, Phone, Username settings.
2. Create a user in the Users tab on the dashboard, using email and password as the authentication attributes.
3. Open the app on your device or simulator, sign in with the user you just created.
4. After signing in, select the option to Create a Passkey and follow the prompts to register your passkey.
5. Sign out, and on the login screen, choose the Sign in with Passkey option to test the feature.


File renamed without changes.
File renamed without changes.
File renamed without changes.
Original file line number Diff line number Diff line change
@@ -7,7 +7,9 @@
"android": "expo run:android",
"ios": "expo run:ios",
"start": "expo start",
"web": "expo start --web"
"web": "expo start --web",
"yalc": "yalc add @clerk/clerk-expo @clerk/clerk-js @clerk/clerk-react @clerk/types @clerk/shared @clerk/types @clerk/expo-passkeys",
"expo:update": "npx expo install --fix"
},
"dependencies": {
"@clerk/clerk-expo": "file:.yalc/@clerk/clerk-expo",
@@ -17,24 +19,22 @@
"@clerk/shared": "file:.yalc/@clerk/shared",
"@clerk/types": "file:.yalc/@clerk/types",
"@expo/metro-runtime": "~3.2.3",
"@react-native-async-storage/async-storage": "^1.24.0",
"expo": "~51.0.24",
"@react-native-async-storage/async-storage": "1.23.1",
"expo": "~51.0.39",
"expo-auth-session": "^5.5.2",
"expo-build-properties": "^0.12.5",
"expo-secure-store": "^13.0.2",
"expo-web-browser": "^13.0.3",
"react": "18.2.0",
"react-native": "0.74.3",
"react-native-web": "~0.19.10"
"react": "18.3.1",
"react-native": "~0.75.0",
"react-native-web": "~0.19.10",
"react-native-reanimated": "~3.15.0",
"react-native-gesture-handler": "~2.18.1",
"react-native-screens": "~3.34.0"
},
"devDependencies": {
"@babel/core": "^7.20.0",
"@types/react": "~18.2.45",
"typescript": "^5.6.3"
},
"expo": {
"autolinking": {
"nativeModulesDir": ".."
}
"typescript": "~5.3.3"
}
}
File renamed without changes.
File renamed without changes.

0 comments on commit cc94fe0

Please sign in to comment.