├── hooks
    ├── useColorScheme.ts
    ├── useColorScheme.web.ts
    └── useThemeColor.ts
├── assets
    └── images
    │   ├── icon.png
    │   ├── favicon.png
    │   ├── splash.png
    │   └── adaptive-icon.png
├── expo-env.d.ts
├── babel.config.js
├── entrypoint.js
├── tsconfig.json
├── .gitignore
├── metro.config.js
├── components
    ├── login
    │   ├── PrivyUI.tsx
    │   ├── PasskeyLogin.tsx
    │   ├── OAuth.tsx
    │   └── SMS.tsx
    ├── LoginScreen.tsx
    ├── walletActions
    │   ├── EVMWalletActions.tsx
    │   └── SolanaWalletActions.tsx
    ├── userManagement
    │   ├── Wallets.tsx
    │   ├── UnlinkAccounts.tsx
    │   └── LinkAccounts.tsx
    └── UserScreen.tsx
├── app
    ├── _layout.tsx
    └── index.tsx
├── constants
    └── Colors.ts
├── app.json
├── README.md
├── package.json
└── scripts
    └── reset-project.js


/hooks/useColorScheme.ts:
--------------------------------------------------------------------------------
1 | export { useColorScheme } from 'react-native';
2 | 


--------------------------------------------------------------------------------
/assets/images/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/privy-io/expo-starter/HEAD/assets/images/icon.png


--------------------------------------------------------------------------------
/assets/images/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/privy-io/expo-starter/HEAD/assets/images/favicon.png


--------------------------------------------------------------------------------
/assets/images/splash.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/privy-io/expo-starter/HEAD/assets/images/splash.png


--------------------------------------------------------------------------------
/assets/images/adaptive-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/privy-io/expo-starter/HEAD/assets/images/adaptive-icon.png


--------------------------------------------------------------------------------
/expo-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="expo/types" />
2 | 
3 | // NOTE: This file should not be edited and should be in your git ignore


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = function (api) {
2 |   api.cache(true);
3 |   return {
4 |     presets: ['babel-preset-expo'],
5 |   };
6 | };
7 | 


--------------------------------------------------------------------------------
/entrypoint.js:
--------------------------------------------------------------------------------
 1 | // entrypoint.js
 2 | 
 3 | // Import required polyfills first
 4 | // IMPORTANT: These polyfills must be installed in this order
 5 | import "react-native-get-random-values";
 6 | import "@ethersproject/shims";
 7 | import { Buffer } from "buffer";
 8 | global.Buffer = Buffer;
 9 | // Then import the expo router
10 | import "expo-router/entry";
11 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "expo/tsconfig.base",
 3 |   "compilerOptions": {
 4 |     "strict": true,
 5 |     // Allows us to use conditional/deep imports on published packages
 6 |     "moduleResolution": "Bundler",
 7 |     "paths": {
 8 |       "@/*": [
 9 |         "./*"
10 |       ]
11 |     }
12 |   },
13 |   "include": [
14 |     "**/*.ts",
15 |     "**/*.tsx",
16 |     ".expo/types/**/*.ts",
17 |     "expo-env.d.ts"
18 | , "app/index.js"  ]
19 | }
20 | 


--------------------------------------------------------------------------------
/hooks/useColorScheme.web.ts:
--------------------------------------------------------------------------------
1 | // NOTE: The default React Native styling doesn't support server rendering.
2 | // Server rendered styles should not change between the first render of the HTML
3 | // and the first render on the client. Typically, web developers will use CSS media queries
4 | // to render different styles on the client and server, these aren't directly supported in React Native
5 | // but can be achieved using a styling library like Nativewind.
6 | export function useColorScheme() {
7 |   return 'light';
8 | }
9 | 


--------------------------------------------------------------------------------
/hooks/useThemeColor.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Learn more about light and dark modes:
 3 |  * https://docs.expo.dev/guides/color-schemes/
 4 |  */
 5 | 
 6 | import { useColorScheme } from 'react-native';
 7 | 
 8 | import { Colors } from '@/constants/Colors';
 9 | 
10 | export function useThemeColor(
11 |   props: { light?: string; dark?: string },
12 |   colorName: keyof typeof Colors.light & keyof typeof Colors.dark
13 | ) {
14 |   const theme = useColorScheme() ?? 'light';
15 |   const colorFromProps = props[theme];
16 | 
17 |   if (colorFromProps) {
18 |     return colorFromProps;
19 |   } else {
20 |     return Colors[theme][colorName];
21 |   }
22 | }
23 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files
 2 | 
 3 | # dependencies
 4 | node_modules/
 5 | 
 6 | # Expo
 7 | .expo/
 8 | dist/
 9 | web-build/
10 | 
11 | # Native
12 | *.orig.*
13 | *.jks
14 | *.p8
15 | *.p12
16 | *.key
17 | *.mobileprovision
18 | 
19 | # Metro
20 | .metro-health-check*
21 | 
22 | # debug
23 | npm-debug.*
24 | yarn-debug.*
25 | yarn-error.*
26 | 
27 | # macOS
28 | .DS_Store
29 | *.pem
30 | 
31 | # local env files
32 | .env*.local
33 | 
34 | # builds
35 | android/
36 | ios/
37 | 
38 | # typescript
39 | *.tsbuildinfo
40 | # @generated expo-cli sync-2b81b286409207a5da26e14c78851eb30d8ccbdb
41 | # The following patterns were generated by expo-cli
42 | 
43 | expo-env.d.ts
44 | # @end expo-cli


--------------------------------------------------------------------------------
/metro.config.js:
--------------------------------------------------------------------------------
 1 | // Learn more https://docs.expo.io/guides/customizing-metro
 2 | const { getDefaultConfig } = require("expo/metro-config");
 3 | 
 4 | /** @type {import('expo/metro-config').MetroConfig} */
 5 | const config = getDefaultConfig(__dirname);
 6 | 
 7 | const resolveRequestWithPackageExports = (context, moduleName, platform) => {
 8 |   // Package exports in `jose` are incorrect, so we need to force the browser version
 9 |   if (moduleName === "jose") {
10 |     const ctx = {
11 |       ...context,
12 |       unstable_conditionNames: ["browser"],
13 |     };
14 |     return ctx.resolveRequest(ctx, moduleName, platform);
15 |   }
16 | 
17 |   return context.resolveRequest(context, moduleName, platform);
18 | };
19 | 
20 | config.resolver.resolveRequest = resolveRequestWithPackageExports;
21 | 
22 | module.exports = config;
23 | 


--------------------------------------------------------------------------------
/components/login/PrivyUI.tsx:
--------------------------------------------------------------------------------
 1 | import { useLogin } from "@privy-io/expo/ui";
 2 | import { Button, View, Text } from "react-native";
 3 | import { useState } from "react";
 4 | 
 5 | export default function PrivyUI() {
 6 |   const [error, setError] = useState("");
 7 | 
 8 |   const { login } = useLogin();
 9 |   return (
10 |     <View>
11 |       <Button
12 |         title="Login with Privy UIs"
13 |         onPress={() => {
14 |           login({ loginMethods: ["email"] })
15 |             .then((session) => {
16 |               console.log("User logged in", session.user);
17 |             })
18 |             .catch((err) => {
19 |               setError(JSON.stringify(err.error) as string);
20 |             });
21 |         }}
22 |       />
23 |       {error && <Text style={{ color: "red" }}>Error: {error}</Text>}
24 |     </View>
25 |   );
26 | }
27 | 


--------------------------------------------------------------------------------
/app/_layout.tsx:
--------------------------------------------------------------------------------
 1 | import Constants from "expo-constants";
 2 | import { Stack } from "expo-router";
 3 | import { PrivyProvider } from "@privy-io/expo";
 4 | import { PrivyElements } from "@privy-io/expo/ui";
 5 | import {
 6 |   Inter_400Regular,
 7 |   Inter_500Medium,
 8 |   Inter_600SemiBold,
 9 | } from "@expo-google-fonts/inter";
10 | import { useFonts } from "expo-font";
11 | 
12 | export default function RootLayout() {
13 |   useFonts({
14 |     Inter_400Regular,
15 |     Inter_500Medium,
16 |     Inter_600SemiBold,
17 |   });
18 |   return (
19 |     <PrivyProvider
20 |       appId={Constants.expoConfig?.extra?.privyAppId}
21 |       clientId={Constants.expoConfig?.extra?.privyClientId}
22 |     >
23 |       <Stack>
24 |         <Stack.Screen name="index" />
25 |       </Stack>
26 |       <PrivyElements />
27 |     </PrivyProvider>
28 |   );
29 | }
30 | 


--------------------------------------------------------------------------------
/constants/Colors.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Below are the colors that are used in the app. The colors are defined in the light and dark mode.
 3 |  * There are many other ways to style your app. For example, [Nativewind](https://www.nativewind.dev/), [Tamagui](https://tamagui.dev/), [unistyles](https://reactnativeunistyles.vercel.app), etc.
 4 |  */
 5 | 
 6 | const tintColorLight = '#0a7ea4';
 7 | const tintColorDark = '#fff';
 8 | 
 9 | export const Colors = {
10 |   light: {
11 |     text: '#11181C',
12 |     background: '#fff',
13 |     tint: tintColorLight,
14 |     icon: '#687076',
15 |     tabIconDefault: '#687076',
16 |     tabIconSelected: tintColorLight,
17 |   },
18 |   dark: {
19 |     text: '#ECEDEE',
20 |     background: '#151718',
21 |     tint: tintColorDark,
22 |     icon: '#9BA1A6',
23 |     tabIconDefault: '#9BA1A6',
24 |     tabIconSelected: tintColorDark,
25 |   },
26 | };
27 | 


--------------------------------------------------------------------------------
/components/login/PasskeyLogin.tsx:
--------------------------------------------------------------------------------
 1 | import Constants from "expo-constants";
 2 | import { useState } from "react";
 3 | import { Button, Text } from "react-native";
 4 | 
 5 | import { useLoginWithPasskey } from "@privy-io/expo/passkey";
 6 | 
 7 | export default function PasskeyLogin() {
 8 |   const [error, setError] = useState("");
 9 |   const { loginWithPasskey } = useLoginWithPasskey({
10 |     onError: (err) => {
11 |       console.log(err);
12 |       setError(JSON.stringify(err.message));
13 |     },
14 |   });
15 |   return (
16 |     <>
17 |       <Button
18 |         title="Login using Passkey"
19 |         onPress={() =>
20 |           loginWithPasskey({
21 |             relyingParty: Constants.expoConfig?.extra?.passkeyAssociatedDomain,
22 |           })
23 |         }
24 |       />
25 |       {error && <Text style={{ color: "red" }}>Error: {error}</Text>}
26 |     </>
27 |   );
28 | }
29 | 


--------------------------------------------------------------------------------
/app/index.tsx:
--------------------------------------------------------------------------------
 1 | import { SafeAreaView, Text, View } from "react-native";
 2 | import Constants from "expo-constants";
 3 | import LoginScreen from "@/components/LoginScreen";
 4 | import { usePrivy } from "@privy-io/expo";
 5 | import { UserScreen } from "@/components/UserScreen";
 6 | 
 7 | export default function Index() {
 8 |   const { user } = usePrivy();
 9 |   if ((Constants.expoConfig?.extra?.privyAppId as string).length !== 25) {
10 |     return (
11 |       <SafeAreaView>
12 |         <View
13 |           style={{
14 |             display: "flex",
15 |             alignItems: "center",
16 |             justifyContent: "center",
17 |           }}
18 |         >
19 |           <Text>You have not set a valid `privyAppId` in app.json</Text>
20 |         </View>
21 |       </SafeAreaView>
22 |     );
23 |   }
24 |   if (
25 |     !(Constants.expoConfig?.extra?.privyClientId as string).startsWith(
26 |       "client-"
27 |     )
28 |   ) {
29 |     return (
30 |       <SafeAreaView>
31 |         <View
32 |           style={{
33 |             display: "flex",
34 |             alignItems: "center",
35 |             justifyContent: "center",
36 |           }}
37 |         >
38 |           <Text>You have not set a valid `privyClientId` in app.json</Text>
39 |         </View>
40 |       </SafeAreaView>
41 |     );
42 |   }
43 |   return !user ? <LoginScreen /> : <UserScreen />;
44 | }
45 | 


--------------------------------------------------------------------------------
/components/login/OAuth.tsx:
--------------------------------------------------------------------------------
 1 | import { useState } from "react";
 2 | import { View, Button, Text } from "react-native";
 3 | import { useLoginWithOAuth } from "@privy-io/expo";
 4 | import { LoginWithOAuthInput } from "@privy-io/expo";
 5 | 
 6 | export default function OAuth() {
 7 |   const [error, setError] = useState("");
 8 |   const oauth = useLoginWithOAuth({
 9 |     onError: (err) => {
10 |       console.log(err);
11 |       setError(JSON.stringify(err.message));
12 |     },
13 |   });
14 |   return (
15 |     <View>
16 |       <View
17 |         style={{
18 |           display: "flex",
19 |           flexDirection: "row",
20 |           flexWrap: "wrap",
21 |           justifyContent: "center",
22 |           alignItems: "center",
23 |           gap: 5,
24 |           margin: 10,
25 |         }}
26 |       >
27 |         {[
28 |           "github",
29 |           "google",
30 |           "discord",
31 |           "apple",
32 |           "twitter",
33 |           "tiktok",
34 |           "spotify",
35 |           "instagram",
36 |           "linkedin",
37 |           "line",
38 |         ].map((provider) => (
39 |           <View key={provider}>
40 |             <Button
41 |               title={`Login with ${provider}`}
42 |               disabled={oauth.state.status === "loading"}
43 |               onPress={() => oauth.login({ provider } as LoginWithOAuthInput)}
44 |             ></Button>
45 |           </View>
46 |         ))}
47 |       </View>
48 |       {error && <Text style={{ color: "red" }}>Error: {error}</Text>}
49 |     </View>
50 |   );
51 | }
52 | 


--------------------------------------------------------------------------------
/app.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "expo": {
 3 |     "name": "@privy-io/expo-starter",
 4 |     "slug": "expo-starter",
 5 |     "version": "1.0.0",
 6 |     "orientation": "portrait",
 7 |     "icon": "./assets/images/icon.png",
 8 |     "scheme": "myapp",
 9 |     "userInterfaceStyle": "automatic",
10 |     "splash": {
11 |       "image": "./assets/images/splash.png",
12 |       "resizeMode": "contain",
13 |       "backgroundColor": "#ffffff"
14 |     },
15 |     "ios": {
16 |       "usesAppleSignIn": true,
17 |       "supportsTablet": true,
18 |       "bundleIdentifier": "dev.privy.example",
19 |       "associatedDomains": ["webcredentials:<your-associated-domain>"],
20 |       "infoPlist": {
21 |         "NSAppTransportSecurity": {
22 |           "NSAllowsArbitraryLoads": true
23 |         }
24 |       }
25 |     },
26 |     "android": {
27 |       "adaptiveIcon": {
28 |         "foregroundImage": "./assets/images/adaptive-icon.png",
29 |         "backgroundColor": "#ffffff"
30 |       },
31 |       "package": "dev.privy.example"
32 |     },
33 |     "extra": {
34 |       "privyAppId": "<your-privy-app-id>",
35 |       "privyClientId": "<your-privy-app-client-id>",
36 |       "passkeyAssociatedDomain": "https://<your-associated-domain>"
37 |     },
38 |     "plugins": [
39 |       "expo-router",
40 |       "expo-secure-store",
41 |       "expo-apple-authentication",
42 |       [
43 |         "expo-build-properties",
44 |         {
45 |           "ios": {
46 |             "deploymentTarget": "17.5"
47 |           },
48 |           "android": {
49 |             "compileSdkVersion": 35
50 |           }
51 |         }
52 |       ],
53 |       "expo-font"
54 |     ],
55 |     "experiments": {
56 |       "typedRoutes": true
57 |     }
58 |   }
59 | }
60 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Privy Expo Starter
 2 | 
 3 | This demonstrates a minimal working installation of the privy sdk in a fresh expo app. We recommend reading the [documentation](https://docs.privy.io/guide/expo/dashboard) for a more detailed guide.
 4 | 
 5 | ## Setup
 6 | 
 7 | 1. Install dependencies
 8 | 
 9 |    ```sh
10 |    yarn
11 |    ```
12 | 
13 | 2. Configure an app client in your [Dashboard](https://dashboard.privy.io/apps?page=settings&setting=clients), and add your Privy app ID and app client ID in `app.json`
14 | 
15 |    ```json
16 |    ...
17 |     "extra": {
18 |       "privyAppId": "<your-app-id>",
19 |       "privyClientId": "<your-client-id>"
20 |     }
21 |    ...
22 |    ```
23 | 
24 |    If you are using Expo go, be sure to add `host.exp.Exponent` to Allowed app identifiers under app clients in your [Dashboard]('https://dashboard.privy.io/apps?page=settings&setting=clients')
25 | 
26 | 3. Configure your application identifier in `app.json`. This should match the bundle identifier for your app in the app store.
27 | 
28 |    ```json
29 |    ...
30 |     "ios": {
31 |       "bundleIdentifier": "com.example.myapp"
32 |     },
33 |     "android": {
34 |       "package": "com.example.myapp"
35 |     }
36 |    ...
37 |    ```
38 | 
39 | 4. If you are making use of passkeys, ensure that you have an [associated website](https://docs.privy.io/guide/expo/setup/passkey#_3-update-native-app-settings) for your application. Once you have this your `app.json` should be updated as follows:
40 | 
41 |    ```json
42 |    ...
43 |    "associatedDomains": ["webcredentials:<your-associated-domain>"],
44 |    ...
45 |    "extra": {
46 |       ...
47 |       "passkeyAssociatedDomain": "https://<your-associated-domain>"
48 |     },
49 |    ...
50 |    ```
51 | 
52 | ## Run the app
53 | 
54 | ```sh
55 | # expo go
56 | yarn run start
57 | 
58 | # ios
59 | yarn run ios
60 | 
61 | # android
62 | yarn run android
63 | ```
64 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "expo-starter",
 3 |   "main": "entrypoint.js",
 4 |   "version": "1.0.0",
 5 |   "scripts": {
 6 |     "start": "expo start --dev-client",
 7 |     "android": "expo run:android",
 8 |     "ios": "expo run:ios",
 9 |     "lint": "expo lint"
10 |   },
11 |   "dependencies": {
12 |     "@ethersproject/shims": "^5.8.0",
13 |     "@expo-google-fonts/inter": "^0.3.0",
14 |     "@expo/vector-icons": "^14.1.0",
15 |     "@privy-io/expo": "^0.58.1",
16 |     "@privy-io/expo-native-extensions": "^0.0.5",
17 |     "@react-navigation/native": "^7.1.6",
18 |     "@solana/web3.js": "^1.98.4",
19 |     "buffer": "^6.0.3",
20 |     "expo": "~53.0.9",
21 |     "expo-apple-authentication": "~7.2.4",
22 |     "expo-application": "~6.1.4",
23 |     "expo-build-properties": "~0.14.6",
24 |     "expo-clipboard": "~7.1.4",
25 |     "expo-constants": "~17.1.6",
26 |     "expo-crypto": "~14.1.4",
27 |     "expo-font": "~13.3.1",
28 |     "expo-linking": "~7.1.4",
29 |     "expo-router": "~5.0.6",
30 |     "expo-secure-store": "~14.2.3",
31 |     "expo-splash-screen": "~0.30.8",
32 |     "expo-status-bar": "~2.2.3",
33 |     "expo-system-ui": "~5.0.7",
34 |     "expo-web-browser": "~14.1.6",
35 |     "react": "19.0.0",
36 |     "react-dom": "19.0.0",
37 |     "react-native": "0.79.2",
38 |     "react-native-gesture-handler": "~2.24.0",
39 |     "react-native-get-random-values": "^1.11.0",
40 |     "react-native-passkeys": "^0.3.3",
41 |     "react-native-qrcode-styled": "^0.3.3",
42 |     "react-native-reanimated": "~3.17.4",
43 |     "react-native-safe-area-context": "5.4.0",
44 |     "react-native-screens": "~4.10.0",
45 |     "react-native-svg": "15.11.2",
46 |     "react-native-webview": "13.13.5",
47 |     "viem": "^2.31.6"
48 |   },
49 |   "resolutions": {
50 |     "viem": "2.32.0"
51 |   },
52 |   "devDependencies": {
53 |     "@babel/core": "^7.25.2",
54 |     "@types/react": "~19.0.10",
55 |     "eslint": "^9.25.0",
56 |     "eslint-config-expo": "~9.2.0",
57 |     "typescript": "~5.8.3"
58 |   },
59 |   "private": true
60 | }
61 | 


--------------------------------------------------------------------------------
/components/login/SMS.tsx:
--------------------------------------------------------------------------------
 1 | import { useState } from "react";
 2 | import { useLoginWithSMS } from "@privy-io/expo";
 3 | import { Button, Text, TextInput, View } from "react-native";
 4 | 
 5 | export default function SMSLogin() {
 6 |   const [phone, setPhone] = useState("");
 7 |   const [code, setCode] = useState("");
 8 |   const { sendCode, loginWithCode } = useLoginWithSMS();
 9 | 
10 |   return (
11 |     <View
12 |       style={{
13 |         display: "flex",
14 |         flexDirection: "column",
15 |         gap: 10,
16 |         margin: 10,
17 |         borderWidth: 1,
18 |         borderColor: "black",
19 |       }}
20 |     >
21 |       <Text>SMS Login</Text>
22 |       <View
23 |         style={{
24 |           display: "flex",
25 |           flexDirection: "row",
26 |           gap: 10,
27 |           justifyContent: "center",
28 |           alignItems: "center",
29 |         }}
30 |       >
31 |         <TextInput
32 |           value={phone}
33 |           onChangeText={setPhone}
34 |           placeholder="Phone"
35 |           inputMode="tel"
36 |           style={{
37 |             borderWidth: 1,
38 |             borderColor: "black",
39 |             padding: 10,
40 |             margin: 10,
41 |             color: "black",
42 |           }}
43 |         />
44 |         <Button onPress={() => sendCode({ phone })} title="Send Code" />
45 |       </View>
46 | 
47 |       <View
48 |         style={{
49 |           display: "flex",
50 |           flexDirection: "row",
51 |           gap: 10,
52 | 
53 |           justifyContent: "center",
54 |           alignItems: "center",
55 |         }}
56 |       >
57 |         <TextInput
58 |           value={code}
59 |           onChangeText={setCode}
60 |           placeholder="Code"
61 |           inputMode="numeric"
62 |           style={{
63 |             borderWidth: 1,
64 |             borderColor: "black",
65 |             padding: 10,
66 |             margin: 10,
67 |             color: "black",
68 |           }}
69 |         />
70 |         <Button onPress={() => loginWithCode({ code, phone })} title="Login" />
71 |       </View>
72 |     </View>
73 |   );
74 | }
75 | 


--------------------------------------------------------------------------------
/components/LoginScreen.tsx:
--------------------------------------------------------------------------------
 1 | import { Linking, Text, View } from "react-native";
 2 | import Constants from "expo-constants";
 3 | import * as Application from "expo-application";
 4 | import PasskeyLogin from "./login/PasskeyLogin";
 5 | import OAuth from "./login/OAuth";
 6 | import PrivyUI from "./login/PrivyUI";
 7 | import SMSLogin from "./login/SMS";
 8 | 
 9 | export default function LoginScreen() {
10 |   return (
11 |     <View
12 |       style={{
13 |         flex: 1,
14 |         justifyContent: "center",
15 |         alignItems: "center",
16 |         gap: 10,
17 |         marginHorizontal: 10,
18 |       }}
19 |     >
20 |       <Text>Privy App ID:</Text>
21 |       <Text style={{ fontSize: 10 }}>
22 |         {Constants.expoConfig?.extra?.privyAppId}
23 |       </Text>
24 |       <Text>Privy Client ID:</Text>
25 |       <Text style={{ fontSize: 10 }}>
26 |         {Constants.expoConfig?.extra?.privyClientId}
27 |       </Text>
28 |       <Text>
29 |         Navigate to your{" "}
30 |         <Text
31 |           onPress={() =>
32 |             Linking.openURL(
33 |               `https://dashboard.privy.io/apps/${Constants.expoConfig?.extra?.privyAppId}/settings?setting=clients`
34 |             )
35 |           }
36 |         >
37 |           dashboard
38 |         </Text>{" "}
39 |         and ensure the following Expo Application ID is listed as an `Allowed
40 |         app identifier`:
41 |       </Text>
42 |       <Text style={{ fontSize: 10 }}>{Application.applicationId}</Text>
43 |       <Text>
44 |         Navigate to your{" "}
45 |         <Text
46 |           onPress={() =>
47 |             Linking.openURL(
48 |               `https://dashboard.privy.io/apps/${Constants.expoConfig?.extra?.privyAppId}/settings?setting=clients`
49 |             )
50 |           }
51 |         >
52 |           dashboard
53 |         </Text>{" "}
54 |         and ensure the following value is listed as an `Allowed app URL scheme`:
55 |       </Text>
56 |       <Text style={{ fontSize: 10 }}>
57 |         {Application.applicationId === "host.exp.Exponent"
58 |           ? "exp"
59 |           : Constants.expoConfig?.scheme}
60 |       </Text>
61 | 
62 |       <PrivyUI />
63 |       <SMSLogin />
64 |       <PasskeyLogin />
65 |       <OAuth />
66 |     </View>
67 |   );
68 | }
69 | 


--------------------------------------------------------------------------------
/components/walletActions/EVMWalletActions.tsx:
--------------------------------------------------------------------------------
 1 | import { useEmbeddedEthereumWallet } from "@privy-io/expo";
 2 | import { useState } from "react";
 3 | import { View, Text, Button } from "react-native";
 4 | 
 5 | export default function EVMWalletActions() {
 6 |   const [result, setResult] = useState<string | null>(null);
 7 |   const { wallets } = useEmbeddedEthereumWallet();
 8 |   const wallet = wallets?.[0];
 9 | 
10 |   const signMessage = async () => {
11 |     const provider = await wallet?.getProvider?.();
12 |     if (!provider) return;
13 | 
14 |     const message = "Hello World";
15 |     const signature = await provider.request({
16 |       method: "personal_sign",
17 |       params: [message, wallet?.address],
18 |     });
19 |     setResult(signature);
20 |   };
21 |   const signTransaction = async () => {
22 |     const provider = await wallet?.getProvider?.();
23 |     if (!provider) return;
24 | 
25 |     // Sign transaction (will be signed and populated)
26 |     try {
27 |       const { signature } = await provider.request({
28 |         method: "eth_signTransaction",
29 |         params: [
30 |           {
31 |             from: wallet.address,
32 |             to: "0x0000000000000000000000000000000000000000",
33 |             value: "1",
34 |           },
35 |         ],
36 |       });
37 |       setResult(signature);
38 |     } catch (error) {
39 |       setResult(JSON.stringify(error));
40 |     }
41 |   };
42 |   const signAndSendTransaction = async () => {
43 |     const provider = await wallet?.getProvider?.();
44 |     if (!provider) return;
45 |     const response = await provider.request({
46 |       method: "eth_sendTransaction",
47 |       params: [
48 |         {
49 |           from: wallet.address,
50 |           to: "0x0000000000000000000000000000000000000000",
51 |           value: "1",
52 |         },
53 |       ],
54 |     });
55 |     setResult(JSON.stringify(response));
56 |   };
57 |   return (
58 |     <View>
59 |       <Text>EVM Wallet Actions</Text>
60 |       <Button title="Sign Message" onPress={signMessage} />
61 |       <Button title="Sign Transaction" onPress={signTransaction} />
62 |       <Button
63 |         title="Sign And Send Transaction"
64 |         onPress={signAndSendTransaction}
65 |       />
66 |       {result && <Text>{result}</Text>}
67 |     </View>
68 |   );
69 | }
70 | 


--------------------------------------------------------------------------------
/scripts/reset-project.js:
--------------------------------------------------------------------------------
 1 | #!/usr/bin/env node
 2 | 
 3 | /**
 4 |  * This script is used to reset the project to a blank state.
 5 |  * It moves the /app directory to /app-example and creates a new /app directory with an index.tsx and _layout.tsx file.
 6 |  * You can remove the `reset-project` script from package.json and safely delete this file after running it.
 7 |  */
 8 | 
 9 | const fs = require('fs');
10 | const path = require('path');
11 | 
12 | const root = process.cwd();
13 | const oldDirPath = path.join(root, 'app');
14 | const newDirPath = path.join(root, 'app-example');
15 | const newAppDirPath = path.join(root, 'app');
16 | 
17 | const indexContent = `import { Text, View } from "react-native";
18 | 
19 | export default function Index() {
20 |   return (
21 |     <View
22 |       style={{
23 |         flex: 1,
24 |         justifyContent: "center",
25 |         alignItems: "center",
26 |       }}
27 |     >
28 |       <Text>Edit app/index.tsx to edit this screen.</Text>
29 |     </View>
30 |   );
31 | }
32 | `;
33 | 
34 | const layoutContent = `import { Stack } from "expo-router";
35 | 
36 | export default function RootLayout() {
37 |   return (
38 |     <Stack>
39 |       <Stack.Screen name="index" />
40 |     </Stack>
41 |   );
42 | }
43 | `;
44 | 
45 | fs.rename(oldDirPath, newDirPath, (error) => {
46 |   if (error) {
47 |     return console.error(`Error renaming directory: ${error}`);
48 |   }
49 |   console.log('/app moved to /app-example.');
50 | 
51 |   fs.mkdir(newAppDirPath, { recursive: true }, (error) => {
52 |     if (error) {
53 |       return console.error(`Error creating new app directory: ${error}`);
54 |     }
55 |     console.log('New /app directory created.');
56 | 
57 |     const indexPath = path.join(newAppDirPath, 'index.tsx');
58 |     fs.writeFile(indexPath, indexContent, (error) => {
59 |       if (error) {
60 |         return console.error(`Error creating index.tsx: ${error}`);
61 |       }
62 |       console.log('app/index.tsx created.');
63 | 
64 |       const layoutPath = path.join(newAppDirPath, '_layout.tsx');
65 |       fs.writeFile(layoutPath, layoutContent, (error) => {
66 |         if (error) {
67 |           return console.error(`Error creating _layout.tsx: ${error}`);
68 |         }
69 |         console.log('app/_layout.tsx created.');
70 |       });
71 |     });
72 |   });
73 | });
74 | 


--------------------------------------------------------------------------------
/components/userManagement/Wallets.tsx:
--------------------------------------------------------------------------------
 1 | import {
 2 |   useEmbeddedEthereumWallet,
 3 |   useEmbeddedSolanaWallet,
 4 |   usePrivy,
 5 | } from "@privy-io/expo";
 6 | import { useCreateWallet } from "@privy-io/expo/extended-chains";
 7 | import { View, Text, Button } from "react-native";
 8 | import { useState } from "react";
 9 | 
10 | export default function Wallets() {
11 |   const [error, setError] = useState<string | null>(null);
12 |   const { user } = usePrivy();
13 |   const { create: createEthereumWallet } = useEmbeddedEthereumWallet();
14 |   const { create: createSolanaWallet } = useEmbeddedSolanaWallet();
15 |   const { createWallet } = useCreateWallet();
16 |   const wallets = user?.linked_accounts.filter(
17 |     (account) => account.type === "wallet",
18 |   );
19 | 
20 |   type ExtendedChainType =
21 |     | "bitcoin-segwit"
22 |     | "stellar"
23 |     | "cosmos"
24 |     | "sui"
25 |     | "tron"
26 |     | "near"
27 |     | "ton"
28 |     | "spark";
29 |   type chainTypes = "ethereum" | "solana" | ExtendedChainType;
30 | 
31 |   const ALL_CHAIN_TYPES: chainTypes[] = [
32 |     "ethereum",
33 |     "solana",
34 |     "bitcoin-segwit",
35 |     "stellar",
36 |     "cosmos",
37 |     "sui",
38 |     "tron",
39 |     "near",
40 |     "ton",
41 |     "spark",
42 |   ];
43 | 
44 |   const createWallets = (chainType: chainTypes) => {
45 |     switch (chainType) {
46 |       case "ethereum":
47 |         return createEthereumWallet({ createAdditional: true });
48 |       case "solana":
49 |         return createSolanaWallet?.({
50 |           createAdditional: true,
51 |           recoveryMethod: "privy",
52 |         });
53 | 
54 |       default:
55 |         return createWallet({
56 |           chainType: chainType as ExtendedChainType,
57 |         }).catch((err: any) => {
58 |           console.log(err);
59 |           setError(err?.message ? String(err.message) : String(err));
60 |         });
61 |     }
62 |   };
63 |   return (
64 |     <View
65 |       style={{
66 |         display: "flex",
67 |         flexDirection: "column",
68 |         gap: 10,
69 |         borderWidth: 1,
70 |         borderColor: "black",
71 |         padding: 10,
72 |       }}
73 |     >
74 |       <Text>Wallets</Text>
75 | 
76 |       <View
77 |         style={{
78 |           display: "flex",
79 |           flexDirection: "row",
80 |           gap: 10,
81 |           flexWrap: "wrap",
82 |         }}
83 |       >
84 |         {ALL_CHAIN_TYPES.map((chainType, i) => (
85 |           <Button
86 |             key={`create-wallet-${chainType}-${i}`}
87 |             title={`Create ${chainType} Wallet`}
88 |             onPress={() => createWallets(chainType)}
89 |           />
90 |         ))}
91 |       </View>
92 |       {error && <Text style={{ color: "red" }}>{error}</Text>}
93 |     </View>
94 |   );
95 | }
96 | 


--------------------------------------------------------------------------------
/components/userManagement/UnlinkAccounts.tsx:
--------------------------------------------------------------------------------
 1 | import Constants from "expo-constants";
 2 | import { useState } from "react";
 3 | import { View, Text, Button } from "react-native";
 4 | 
 5 | import { usePrivy, useUnlinkOAuth, useUnlinkFarcaster } from "@privy-io/expo";
 6 | export default function UnlinkAccounts() {
 7 |   const [error, setError] = useState("");
 8 |   const { user } = usePrivy();
 9 |   const { unlinkFarcaster } = useUnlinkFarcaster({
10 |     onError: (err) => {
11 |       console.log(err);
12 |       setError(JSON.stringify(err.message));
13 |     },
14 |     onSuccess: () => {
15 |       console.log("Unlink Farcaster success");
16 |     },
17 |   });
18 |   const oauth = useUnlinkOAuth({
19 |     onError: (err) => {
20 |       console.log(err);
21 |       setError(JSON.stringify(err.message));
22 |     },
23 |   });
24 | 
25 |   return (
26 |     <View>
27 |       {/* Links Accounts */}
28 |       <Text>Unlink Accounts</Text>
29 | 
30 |       <View
31 |         style={{
32 |           display: "flex",
33 |           flexDirection: "row",
34 |           margin: 10,
35 |           flexWrap: "wrap",
36 |         }}
37 |       >
38 |         {(
39 |           [
40 |             "github",
41 |             "google",
42 |             "discord",
43 |             "apple",
44 |             "twitter",
45 |             "spotify",
46 |             "instagram",
47 |             "tiktok",
48 |             "linkedin",
49 |             "line",
50 |           ] as const
51 |         ).map((provider) => (
52 |           <View key={provider}>
53 |             <Button
54 |               title={`Unlink ${provider}`}
55 |               onPress={() =>
56 |                 oauth.unlinkOAuth({
57 |                   provider,
58 |                   subject: (
59 |                     user?.linked_accounts.find(
60 |                       (account) => (account as any).type === `${provider}_oauth`
61 |                     ) as any
62 |                   )?.subject,
63 |                 })
64 |               }
65 |               disabled={
66 |                 user?.linked_accounts.find(
67 |                   (account) => (account as any).type === `${provider}_oauth`
68 |                 ) === undefined
69 |               }
70 |             ></Button>
71 |           </View>
72 |         ))}
73 |       </View>
74 |       <Button
75 |         title="Unlink Farcaster"
76 |         disabled={
77 |           user?.linked_accounts.find(
78 |             (account) => (account as any).type === "farcaster"
79 |           ) === undefined
80 |         }
81 |         onPress={() => {
82 |           const farcasterAccount = user?.linked_accounts.find(
83 |             (account) => (account as any).type === "farcaster"
84 |           ) as any | undefined;
85 |           if (!farcasterAccount) return;
86 |           unlinkFarcaster({ fid: farcasterAccount.fid });
87 |         }}
88 |       />
89 |       {error && <Text style={{ color: "red" }}>Error: {error}</Text>}
90 |     </View>
91 |   );
92 | }
93 | 


--------------------------------------------------------------------------------
/components/walletActions/SolanaWalletActions.tsx:
--------------------------------------------------------------------------------
  1 | import { useEmbeddedSolanaWallet } from "@privy-io/expo";
  2 | import { View, Text, Button } from "react-native";
  3 | import { useState } from "react";
  4 | 
  5 | import {
  6 |   Connection,
  7 |   PublicKey,
  8 |   SystemProgram,
  9 |   Transaction,
 10 | } from "@solana/web3.js";
 11 | 
 12 | export default function SolanaWalletActions() {
 13 |   const { wallets } = useEmbeddedSolanaWallet();
 14 |   const wallet = wallets?.[0];
 15 |   const [result, setResult] = useState<string | null>(null);
 16 | 
 17 |   const signMessage = async () => {
 18 |     try {
 19 |       if (!wallet?.getProvider) return;
 20 |       const provider = await wallet.getProvider?.();
 21 |       if (!provider) return;
 22 |       const message = "Hello world";
 23 |       const { signature } = await provider.request({
 24 |         method: "signMessage",
 25 |         params: { message },
 26 |       });
 27 |       setResult(signature);
 28 |     } catch (err: any) {
 29 |       setResult(err?.message ?? String(err));
 30 |     }
 31 |   };
 32 | 
 33 |   const signTransaction = async () => {
 34 |     try {
 35 |       if (!wallet?.getProvider) return;
 36 |       const provider = await wallet.getProvider?.();
 37 |       if (!provider) return;
 38 | 
 39 |       const transaction = new Transaction();
 40 |       const connection = new Connection("https://api.mainnet-beta.solana.com");
 41 |       transaction.recentBlockhash = (
 42 |         await connection.getLatestBlockhash("finalized")
 43 |       ).blockhash;
 44 |       transaction.feePayer = new PublicKey(wallet.publicKey);
 45 |       transaction.add(
 46 |         SystemProgram.transfer({
 47 |           fromPubkey: new PublicKey(wallet.publicKey),
 48 |           toPubkey: new PublicKey(
 49 |             "So11111111111111111111111111111111111111112", // Replace with a valid recipient address
 50 |           ),
 51 |           lamports: 1000, // Amount in lamports (1 SOL = 1,000,000,000 lamports)
 52 |         }),
 53 |       );
 54 |       // Sign the transaction
 55 |       const { signedTransaction } = await provider.request({
 56 |         method: "signTransaction",
 57 |         params: { transaction },
 58 |       });
 59 |       setResult(JSON.stringify(signedTransaction));
 60 |     } catch (err: any) {
 61 |       setResult(err?.message ?? String(err));
 62 |     }
 63 |   };
 64 | 
 65 |   const signAndSendTransaction = async () => {
 66 |     try {
 67 |       if (!wallet?.getProvider) return;
 68 |       const provider = await wallet.getProvider?.();
 69 |       if (!provider) return;
 70 |       const transaction = new Transaction();
 71 |       const connection = new Connection("https://api.mainnet-beta.solana.com");
 72 |       transaction.recentBlockhash = (
 73 |         await connection.getLatestBlockhash("finalized")
 74 |       ).blockhash;
 75 |       transaction.feePayer = new PublicKey(wallet.publicKey);
 76 |       transaction.add(
 77 |         SystemProgram.transfer({
 78 |           fromPubkey: new PublicKey(wallet.publicKey),
 79 |           toPubkey: new PublicKey(
 80 |             "So11111111111111111111111111111111111111112", // Replace with a valid recipient address
 81 |           ),
 82 |           lamports: 1000, // Amount in lamports (1 SOL = 1,000,000,000 lamports)
 83 |         }),
 84 |       );
 85 |       const { signature } = await provider.request({
 86 |         method: "signAndSendTransaction",
 87 |         params: {
 88 |           transaction: transaction,
 89 |           connection: connection,
 90 |         },
 91 |       });
 92 |       setResult(signature);
 93 |     } catch (err: any) {
 94 |       setResult(err?.message ?? String(err));
 95 |     }
 96 |   };
 97 |   return (
 98 |     <View>
 99 |       <Text>Solana Wallet Actions</Text>
100 |       <Button title="Sign Message" onPress={signMessage} />
101 |       <Button title="Sign Transaction" onPress={signTransaction} />
102 |       <Button
103 |         title="Sign And Send Transaction"
104 |         onPress={signAndSendTransaction}
105 |       />
106 |       {result && <Text>{result}</Text>}
107 |     </View>
108 |   );
109 | }
110 | 


--------------------------------------------------------------------------------
/components/UserScreen.tsx:
--------------------------------------------------------------------------------
  1 | import React, { useState, useCallback } from "react";
  2 | import { Text, TextInput, View, Button, ScrollView } from "react-native";
  3 | 
  4 | import {
  5 |   usePrivy,
  6 |   useEmbeddedEthereumWallet,
  7 |   getUserEmbeddedEthereumWallet,
  8 |   PrivyEmbeddedWalletProvider,
  9 |   useLinkWithOAuth,
 10 | } from "@privy-io/expo";
 11 | import Constants from "expo-constants";
 12 | import { useLinkWithPasskey } from "@privy-io/expo/passkey";
 13 | import { PrivyUser, WalletAddress } from "@privy-io/public-api";
 14 | import LinkAccounts from "./userManagement/LinkAccounts";
 15 | import UnlinkAccounts from "./userManagement/UnlinkAccounts";
 16 | import Wallets from "./userManagement/Wallets";
 17 | import SolanaWalletActions from "./walletActions/SolanaWalletActions";
 18 | import EVMWalletActions from "./walletActions/EVMWalletActions";
 19 | 
 20 | const toMainIdentifier = (x: PrivyUser["linked_accounts"][number]) => {
 21 |   if (x.type === "phone") {
 22 |     return x.phoneNumber;
 23 |   }
 24 |   if (x.type === "email" || x.type === "wallet") {
 25 |     return x.address;
 26 |   }
 27 | 
 28 |   if (x.type === "twitter_oauth" || x.type === "tiktok_oauth") {
 29 |     return x.username;
 30 |   }
 31 | 
 32 |   if (x.type === "custom_auth") {
 33 |     return x.custom_user_id;
 34 |   }
 35 | 
 36 |   return x.type;
 37 | };
 38 | 
 39 | export const UserScreen = () => {
 40 |   const [chainId, setChainId] = useState("1");
 41 |   const [signedMessages, setSignedMessages] = useState<string[]>([]);
 42 | 
 43 |   const { logout, user } = usePrivy();
 44 |   const { linkWithPasskey } = useLinkWithPasskey();
 45 |   const oauth = useLinkWithOAuth();
 46 |   const { wallets, create } = useEmbeddedEthereumWallet();
 47 |   const account = getUserEmbeddedEthereumWallet(user);
 48 | 
 49 |   const signMessage = useCallback(
 50 |     async (provider: PrivyEmbeddedWalletProvider) => {
 51 |       try {
 52 |         const message = await provider.request({
 53 |           method: "personal_sign",
 54 |           params: [`0x0${Date.now()}`, account?.address],
 55 |         });
 56 |         if (message) {
 57 |           setSignedMessages((prev) => prev.concat(message));
 58 |         }
 59 |       } catch (e) {
 60 |         console.error(e);
 61 |       }
 62 |     },
 63 |     [account?.address]
 64 |   );
 65 | 
 66 |   const switchChain = useCallback(
 67 |     async (provider: PrivyEmbeddedWalletProvider, id: string) => {
 68 |       try {
 69 |         await provider.request({
 70 |           method: "wallet_switchEthereumChain",
 71 |           params: [{ chainId: id }],
 72 |         });
 73 |         alert(`Chain switched to ${id} successfully`);
 74 |       } catch (e) {
 75 |         console.error(e);
 76 |       }
 77 |     },
 78 |     [account?.address]
 79 |   );
 80 | 
 81 |   if (!user) {
 82 |     return null;
 83 |   }
 84 | 
 85 |   return (
 86 |     <ScrollView>
 87 |       <LinkAccounts />
 88 |       <UnlinkAccounts />
 89 |       <Wallets />
 90 |       <ScrollView style={{ borderColor: "rgba(0,0,0,0.1)", borderWidth: 1 }}>
 91 |         <View
 92 |           style={{
 93 |             padding: 20,
 94 |             display: "flex",
 95 |             flexDirection: "column",
 96 |             gap: 10,
 97 |           }}
 98 |         >
 99 |           <View>
100 |             <Text style={{ fontWeight: "bold" }}>User ID</Text>
101 |             <Text>{user.id}</Text>
102 |           </View>
103 | 
104 |           <View>
105 |             <Text style={{ fontWeight: "bold" }}>Linked accounts</Text>
106 |             {user?.linked_accounts.length ? (
107 |               <View style={{ display: "flex", flexDirection: "column" }}>
108 |                 {user?.linked_accounts?.map((m, index) => (
109 |                   <Text
110 |                     key={`linked-account-${m.type}-${m.verified_at}-${index}`}
111 |                     style={{
112 |                       color: "rgba(0,0,0,0.5)",
113 |                       fontSize: 12,
114 |                       fontStyle: "italic",
115 |                     }}
116 |                   >
117 |                     {m.type}: {toMainIdentifier(m)}
118 |                   </Text>
119 |                 ))}
120 |               </View>
121 |             ) : null}
122 |           </View>
123 | 
124 |           <View>
125 |             {account?.address && (
126 |               <>
127 |                 <Text style={{ fontWeight: "bold" }}>Embedded Wallet</Text>
128 |                 <Text>{account?.address}</Text>
129 |               </>
130 |             )}
131 | 
132 |             <>
133 |               <Text>Chain ID to set to:</Text>
134 |               <TextInput
135 |                 value={chainId}
136 |                 onChangeText={setChainId}
137 |                 placeholder="Chain Id"
138 |               />
139 |               <Button
140 |                 title="Switch Chain"
141 |                 onPress={async () =>
142 |                   switchChain(await wallets[0].getProvider(), chainId)
143 |                 }
144 |               />
145 |             </>
146 |           </View>
147 | 
148 |           <SolanaWalletActions />
149 |           <EVMWalletActions />
150 |           <Button title="Logout" onPress={logout} />
151 |         </View>
152 |       </ScrollView>
153 |     </ScrollView>
154 |   );
155 | };
156 | 


--------------------------------------------------------------------------------
/components/userManagement/LinkAccounts.tsx:
--------------------------------------------------------------------------------
  1 | import Constants from "expo-constants";
  2 | import { useState } from "react";
  3 | 
  4 | import { View, Text, Button, TextInput } from "react-native";
  5 | import { useLinkWithPasskey } from "@privy-io/expo/passkey";
  6 | import {
  7 |   useLinkWithOAuth,
  8 |   useLinkEmail,
  9 |   useLinkSMS,
 10 |   useLinkWithFarcaster,
 11 | } from "@privy-io/expo";
 12 | export default function LinkAccounts() {
 13 |   const [error, setError] = useState("");
 14 |   const [email, setEmail] = useState("");
 15 |   const [phone, setPhone] = useState("");
 16 |   const [emailCode, setEmailCode] = useState("");
 17 |   const [smsCode, setSmsCode] = useState("");
 18 |   const { linkWithFarcaster } = useLinkWithFarcaster({
 19 |     onSuccess: () => {
 20 |       console.log("Link Farcaster success");
 21 |     },
 22 |     onError: (err) => {
 23 |       console.log(err);
 24 |       setError(JSON.stringify(err.message));
 25 |     },
 26 |   });
 27 |   const { sendCode: sendCodeEmail, linkWithCode: linkWithCodeEmail } =
 28 |     useLinkEmail({
 29 |       onError: (err) => {
 30 |         console.log(err);
 31 |         setError(JSON.stringify(err.message));
 32 |       },
 33 |       onLinkSuccess: () => {
 34 |         console.log("Link Email success");
 35 |       },
 36 |       onSendCodeSuccess: () => {
 37 |         console.log("Link Email success");
 38 |       },
 39 |     });
 40 |   const { sendCode: sendCodeSMS, linkWithCode: linkWithCodeSMS } = useLinkSMS({
 41 |     onError: (err) => {
 42 |       console.log(err);
 43 |       setError(JSON.stringify(err.message));
 44 |     },
 45 |     onLinkSuccess: () => {
 46 |       console.log("Link SMS success");
 47 |     },
 48 |     onSendCodeSuccess: () => {
 49 |       console.log("Link SMS success");
 50 |     },
 51 |   });
 52 | 
 53 |   const { linkWithPasskey } = useLinkWithPasskey({
 54 |     onError: (err) => {
 55 |       console.log(err);
 56 |       setError(JSON.stringify(err.message));
 57 |     },
 58 |   });
 59 |   const oauth = useLinkWithOAuth({
 60 |     onError: (err) => {
 61 |       console.log(err);
 62 |       setError(JSON.stringify(err.message));
 63 |     },
 64 |   });
 65 |   return (
 66 |     <View>
 67 |       {/* Links Accounts */}
 68 |       <Text>Link Accounts</Text>
 69 | 
 70 |       <View
 71 |         style={{
 72 |           display: "flex",
 73 |           flexDirection: "row",
 74 |           margin: 10,
 75 |           flexWrap: "wrap",
 76 |         }}
 77 |       >
 78 |         {(
 79 |           [
 80 |             "github",
 81 |             "google",
 82 |             "discord",
 83 |             "apple",
 84 |             "twitter",
 85 |             "spotify",
 86 |             "instagram",
 87 |             "tiktok",
 88 |             "linkedin",
 89 |             "line",
 90 |           ] as const
 91 |         ).map((provider) => (
 92 |           <View key={provider}>
 93 |             <Button
 94 |               title={`Link ${provider}`}
 95 |               disabled={oauth.state.status === "loading"}
 96 |               onPress={() => oauth.link({ provider })}
 97 |             ></Button>
 98 |           </View>
 99 |         ))}
100 |       </View>
101 |       <Button
102 |         title="Link Passkey"
103 |         onPress={() =>
104 |           linkWithPasskey({
105 |             relyingParty: Constants.expoConfig?.extra?.passkeyAssociatedDomain,
106 |           })
107 |         }
108 |       />
109 |       <View
110 |         style={{
111 |           display: "flex",
112 |           flexDirection: "column",
113 |           gap: 10,
114 |           borderBlockColor: "black",
115 |           borderWidth: 1,
116 |           padding: 10,
117 |         }}
118 |       >
119 |         <Text>Link Email</Text>
120 |         <View style={{ display: "flex", flexDirection: "row", gap: 10 }}>
121 |           {" "}
122 |           <TextInput
123 |             value={email}
124 |             onChangeText={setEmail}
125 |             placeholder="Email"
126 |             style={{
127 |               borderWidth: 1,
128 |               borderColor: "black",
129 |               padding: 10,
130 |               margin: 10,
131 |               color: "black",
132 |             }}
133 |           />
134 |           <Button title="Get Code" onPress={() => sendCodeEmail({ email })} />
135 |         </View>
136 |         <View style={{ display: "flex", flexDirection: "row", gap: 10 }}>
137 |           <TextInput
138 |             value={emailCode}
139 |             onChangeText={setEmailCode}
140 |             placeholder="Code"
141 |             inputMode="numeric"
142 |             style={{
143 |               borderWidth: 1,
144 |               borderColor: "black",
145 |               padding: 10,
146 |               margin: 10,
147 |               color: "black",
148 |             }}
149 |           />
150 |           <Button
151 |             title="Link email"
152 |             onPress={() => linkWithCodeEmail({ code: emailCode, email })}
153 |           />
154 |         </View>
155 |       </View>
156 |       <View
157 |         style={{
158 |           display: "flex",
159 |           flexDirection: "column",
160 |           gap: 10,
161 |           borderBlockColor: "black",
162 |           borderWidth: 1,
163 |           padding: 10,
164 |         }}
165 |       >
166 |         <Text>Link SMS</Text>
167 |         <View style={{ display: "flex", flexDirection: "row", gap: 10 }}>
168 |           <TextInput
169 |             value={phone}
170 |             onChangeText={setPhone}
171 |             placeholder="Phone"
172 |             style={{
173 |               borderWidth: 1,
174 |               borderColor: "black",
175 |               padding: 10,
176 |               margin: 10,
177 |               color: "black",
178 |             }}
179 |           />
180 |           <Button title="Link SMS" onPress={() => sendCodeSMS({ phone })} />
181 |         </View>
182 |         <View style={{ display: "flex", flexDirection: "row", gap: 10 }}>
183 |           <TextInput
184 |             value={smsCode}
185 |             onChangeText={setSmsCode}
186 |             placeholder="Code"
187 |             inputMode="numeric"
188 |             style={{
189 |               borderWidth: 1,
190 |               borderColor: "black",
191 |               padding: 10,
192 |               margin: 10,
193 |               color: "black",
194 |             }}
195 |           />
196 |           <Button
197 |             title="Link Code"
198 |             onPress={() => linkWithCodeSMS({ code: smsCode, phone })}
199 |           />
200 |         </View>{" "}
201 |       </View>
202 |       <Button title="Link Farcaster" onPress={() => linkWithFarcaster({})} />
203 |       {error && <Text style={{ color: "red" }}>Error: {error}</Text>}
204 |     </View>
205 |   );
206 | }
207 | 


--------------------------------------------------------------------------------