Ml/link web3 with xmtp profile (#1617)

Author: technoplato

App.tsx

@@ -43,7 +43,7 @@ import { preventSplashScreenAutoHide } from "./utils/splash/splash";
 import { setupStreamingSubscriptions } from "@/features/streams/streams";
 import { useInitializeMultiInboxClient } from "@/features/multi-inbox/multi-inbox.client";
 import logger from "./utils/logger";
-import { AuthenticateWithPasskeyProvider } from "@/features/onboarding/contexts/signup-with-passkey.context";
+import { AuthenticateWithPasskeyProvider } from "@/features/authentication/authenticate-with-passkey.context";
 import { PrivyPlaygroundLandingScreen } from "@/features/privy-playground/privy-playground-landing.screen";
 import { useLogoutOnJwtRefreshError } from "@/features/authentication/use-logout-on-jwt-refresh-error";
 import { useMonitorNetworkConnectivity } from "./dependencies/NetworkMonitor/use-monitor-network-connectivity";

SlimApp.tsx

@@ -12,15 +12,15 @@ import { useCoinbaseWalletListener } from "@utils/coinbaseWallet";
 import { converseEventEmitter } from "@utils/events";
 import "expo-dev-client";
 import React, { useCallback, useEffect, useMemo, useRef } from "react";
-import { Text, useColorScheme } from "react-native";
+import { SafeAreaView, Text, useColorScheme } from "react-native";
 import { GestureHandlerRootView } from "react-native-gesture-handler";
 import { KeyboardProvider } from "react-native-keyboard-controller";
 import { Provider as PaperProvider } from "react-native-paper";
 import { config } from "@/config";
 import { useInitializeMultiInboxClient } from "./features/multi-inbox/multi-inbox.client";
 import { PrivyProvider } from "@privy-io/expo";
 import { ThirdwebProvider } from "thirdweb/react";
-import { AuthenticateWithPasskeyProvider } from "./features/onboarding/contexts/signup-with-passkey.context";
+import { AuthenticateWithPasskeyProvider } from "./features/authentication/authenticate-with-passkey.context";
 import { PrivyPlaygroundLandingScreen } from "./features/privy-playground/privy-playground-landing.screen";
 import { DevToolsBubble } from "react-native-react-query-devtools";
 import * as Clipboard from "expo-clipboard";
@@ -37,6 +37,9 @@ export function SlimApp() {
   useInitializeMultiInboxClient();
   useReactQueryDevTools(queryClient);
   useMonitorNetworkConnectivity();
+  useEffect(() => {
+    setupAppAttest();
+  }, []);
 
   const { themeScheme, setThemeContextOverride, ThemeProvider } =
     useThemeProvider();
@@ -63,9 +66,11 @@ export function SlimApp() {
                 <PaperProvider theme={paperTheme}>
                   <GestureHandlerRootView style={{ flex: 1 }}>
                     <BottomSheetModalProvider>
-                      <AuthenticateWithPasskeyProvider>
-                        <PrivyPlaygroundLandingScreen />
-                      </AuthenticateWithPasskeyProvider>
+                      <SafeAreaView style={{ flex: 1 }}>
+                        <AuthenticateWithPasskeyProvider>
+                          <PrivyPlaygroundLandingScreen />
+                        </AuthenticateWithPasskeyProvider>
+                      </SafeAreaView>
                       {__DEV__ && <DevToolsBubble onCopy={onCopy} />}
                       <Snackbars />
                     </BottomSheetModalProvider>

components/DebugButton.tsx

@@ -14,7 +14,7 @@ import * as Updates from "expo-updates";
 import { forwardRef, useImperativeHandle } from "react";
 import { Alert, Platform } from "react-native";
 import { showActionSheetWithOptions } from "./StateHandlers/ActionSheetStateHandler";
-import { useLogout } from "@/utils/logout";
+import { useLogout } from "@/features/authentication/use-logout.hook";
 
 export const DebugButton = forwardRef((props, ref) => {
   const { logout } = useLogout();

config/development.ts

@@ -14,12 +14,9 @@ export const developmentConfig: IConfig = {
   ),
   appCheckDebugToken:
     Platform.OS === "android"
-      ? // @ts-expect-error todo fixme
-        process.env.EXPO_PUBLIC_FIREBASE_APP_CHECK_DEBUG_TOKEN_ANDROID
-      : // @ts-expect-error todo fixme
-        process.env.EXPO_PUBLIC_FIREBASE_APP_CHECK_DEBUG_TOKEN_IOS,
+      ? process.env.EXPO_PUBLIC_FIREBASE_APP_CHECK_DEBUG_TOKEN_ANDROID
+      : process.env.EXPO_PUBLIC_FIREBASE_APP_CHECK_DEBUG_TOKEN_IOS,
   evm: {
-    // @ts-expect-error todo fixme
     rpcEndpoint: process.env.EXPO_PUBLIC_EVM_RPC_ENDPOINT,
     transactionChainId: "0x14a34", // Base Sepolia
     USDC: {
@@ -29,4 +26,6 @@ export const developmentConfig: IConfig = {
       decimals: 6,
     },
   },
+  reactQueryEncryptionKey:
+    process.env.EXPO_PUBLIC_SECURE_REACT_QUERY_ENCRYPTION_KEY || "",
 } as const;

features/onboarding/contexts/signup-with-passkey.context.tsx features/authentication/authenticate-with-passkey.context.tsx

@@ -174,22 +174,23 @@ export const AuthenticateWithPasskeyProvider = ({
           "[passkey onboarding context] smart contract wallet address",
           smartContractWalletAddress
         );
-        const user = await createUser({
-          privyUserId: privyUser!.id,
-          smartContractWalletAddress,
-          inboxId,
-          profile: {
-            name: `Test User ${Math.random()}`,
-            // avatar: privyUser!.imageUrl,
-          },
-        });
-        logger.debug(
-          "[passkey onboarding context] created user",
-          JSON.stringify(user, null, 2)
-        );
+        // const user = await createUser({
+        //   privyUserId: privyUser!.id,
+        //   smartContractWalletAddress,
+        //   inboxId,
+        //   profile: {
+        //     name: `Test User ${Math.random()}`,
+        //     // avatar: privyUser!.imageUrl,
+        //   },
+        // });
+        // logger.debug(
+        //   "[passkey onboarding context] created user",
+        //   JSON.stringify(user, null, 2)
+        // );
         logger.debug(
           "[passkey onboarding context] signing up and created a new inbox successfully in useXmtpFromPrivySmartWalletClientSigner"
         );
+        useAccountsStore.getState().setAuthStatus(AuthStatuses.signingUp);
       } catch (error) {
         logger.error(
           "[passkey onboarding context] Error creating user:",

features/authentication/authentication.api.ts

@@ -1,28 +1,31 @@
 import { buildDeviceMetadata } from "@/utils/device-metadata";
 import { api } from "@/utils/api/api";
 import { z } from "zod";
+import { logger } from "@/utils/logger";
 
 const deviceOSEnum = z.enum(["android", "ios", "web"]);
 
-const createUserResponseSchema = z.object({
-  id: z.string(),
-  privyUserId: z.string(),
-  device: z.object({
+const createUserResponseSchema = z
+  .object({
     id: z.string(),
-    os: deviceOSEnum,
-    name: z.string().nullable(),
-  }),
-  identity: z.object({
-    id: z.string(),
-    privyAddress: z.string(),
-    xmtpId: z.string(),
-  }),
-  profile: z.object({
-    id: z.string(),
-    name: z.string(),
-    description: z.string().nullable(),
-  }),
-});
+    privyUserId: z.string(),
+    device: z.object({
+      id: z.string(),
+      os: deviceOSEnum,
+      name: z.string().nullable(),
+    }),
+    identity: z.object({
+      id: z.string(),
+      privyAddress: z.string(),
+      xmtpId: z.string(),
+    }),
+    profile: z.object({
+      id: z.string(),
+      name: z.string(),
+      description: z.string().nullable(),
+    }),
+  })
+  .strict();
 
 export type CreateUserResponse = z.infer<typeof createUserResponseSchema>;
 
@@ -51,20 +54,33 @@ export const createUser = async (args: {
     "/api/v1/users",
     requestData
   );
+  logger.debug(
+    `[createUser] Response from /api/v1/users: ${JSON.stringify(
+      response.data,
+      null,
+      2
+    )}`
+  );
   return createUserResponseSchema.parse(response.data);
 };
 
 const fetchJwtResponseSchema = z.object({
-  jwt: z.string(),
+  token: z.string(),
 });
 
 type FetchJwtResponse = z.infer<typeof fetchJwtResponseSchema>;
 
 export async function fetchJwt() {
-  // todo(lustig) look at the endpoint this actually is
-  // const response = await api.post<FetchJwtResponse>("/api/v1/authenticate");
-  // return fetchJwtResponseSchema.parse(response.data);
-  // https://xmtp-labs.slack.com/archives/C07NSHXK693/p1739877738959529
-  const dummyJwtUntilJwtBackendWorks = "dummyJwtUntilJwtBackendWorks";
-  return dummyJwtUntilJwtBackendWorks;
+  logger.debug(`[fetchJwt] Fetching JWT token`);
+  const response = await api.post<FetchJwtResponse>("/api/v1/authenticate");
+  logger.debug(
+    `[fetchJwt] Response from /api/v1/authenticate: ${JSON.stringify(
+      response.data,
+      null,
+      2
+    )}`
+  );
+  const parsedResponse = fetchJwtResponseSchema.parse(response.data);
+  logger.debug(`[fetchJwt] Successfully fetched JWT token`);
+  return parsedResponse;
 }

features/authentication/authentication.headers.ts

@@ -9,10 +9,13 @@ import { toHex } from "viem";
 import { ensureJwtQueryData } from "./jwt.query";
 import { AuthenticationError } from "@/utils/error";
 
+// used for requests that are creating an authentication token
 export const XMTP_INSTALLATION_ID_HEADER_KEY = "X-XMTP-InstallationId";
 export const XMTP_INBOX_ID_HEADER_KEY = "X-XMTP-InboxId";
 export const FIREBASE_APP_CHECK_HEADER_KEY = "X-Firebase-AppCheck";
 export const XMTP_SIGNATURE_HEADER_KEY = "X-XMTP-Signature";
+
+// used for authenticated requests
 export const CONVOS_AUTH_TOKEN_HEADER_KEY = "X-Convos-AuthToken";
 
 export type XmtpApiHeaders = {
@@ -34,39 +37,67 @@ export type XmtpApiHeaders = {
  * Note: We don't use refresh tokens since users are already authenticated via
  * Privy passkeys. See authentication.readme.md for more details.
  */
+import { logger } from "@/utils/logger";
+
 export async function getConvosAuthenticationHeaders(): Promise<XmtpApiHeaders> {
+  logger.debug(
+    "[getConvosAuthenticationHeaders] Starting to get authentication headers"
+  );
+
   const currentEthereumAddress = getSafeCurrentSender().ethereumAddress;
+  logger.debug(
+    `[getConvosAuthenticationHeaders] Current ethereum address: ${currentEthereumAddress}`
+  );
+
   const areInboxesRestored =
     useAccountsStore.getState().multiInboxClientRestorationState ===
-    MultiInboxClientRestorationStates.idle;
+    MultiInboxClientRestorationStates.restored;
+  logger.debug(
+    `[getConvosAuthenticationHeaders] Are inboxes restored: ${
+      useAccountsStore.getState().multiInboxClientRestorationState
+    }`
+  );
   const appCheckToken = await tryGetAppCheckToken();
   const inboxClient = MultiInboxClient.instance.getInboxClientForAddress({
     ethereumAddress: currentEthereumAddress,
   });
 
   if (!appCheckToken) {
+    logger.error(
+      "[getConvosAuthenticationHeaders] No App Check Token Available"
+    );
     throw new AuthenticationError(
       "No App Check Token Available. This indicates that we believe the app is not running on an authentic build of our application on a device that has not been tampered with."
     );
   }
 
   if (!areInboxesRestored) {
+    logger.error("[getConvosAuthenticationHeaders] Inboxes not restored");
     throw new AuthenticationError(
       "[getConvosAuthenticationHeaders] Inboxes not restored; cannot create headers"
     );
   }
 
   if (!inboxClient) {
+    logger.error(
+      "[getConvosAuthenticationHeaders] No inbox client found for account"
+    );
     throw new AuthenticationError(
       "[getConvosAuthenticationHeaders] No inbox client found for account"
     );
   }
 
+  logger.debug(
+    "[getConvosAuthenticationHeaders] Signing app check token with installation key"
+  );
   const rawAppCheckTokenSignature = await inboxClient.signWithInstallationKey(
     appCheckToken
   );
   const appCheckTokenSignatureHexString = toHex(rawAppCheckTokenSignature);
 
+  logger.debug(
+    "[getConvosAuthenticationHeaders] Successfully created authentication headers"
+  );
   return {
     [XMTP_INSTALLATION_ID_HEADER_KEY]: inboxClient.installationId,
     [XMTP_INBOX_ID_HEADER_KEY]: inboxClient.inboxId,

features/authentication/interceptor.headers.ts

@@ -4,6 +4,7 @@ import {
   getConvosAuthenticatedHeaders,
 } from "@/features/authentication/authentication.headers";
 import { AuthenticationError } from "../../utils/error";
+import { logger } from "@/utils/logger";
 
 /**
  * These routes are special because they need to be called before we have a JWT.
@@ -19,26 +20,41 @@ import { AuthenticationError } from "../../utils/error";
  * See authentication.readme.md for more details on the authentication flow
  * and how these headers are used to establish trust before issuing a JWT.
  */
-const AuthenticationRoutes = ["/api/v1/users", "/api/v1/authenticate"] as const;
+const AuthenticationRoutes = ["/api/v1/authenticate"] as const;
 
 export const headersInterceptor = async (config: AxiosRequestConfig) => {
   const url = config.url;
 
   if (!url) {
+    logger.error("[headersInterceptor] No URL provided in request config");
     throw new AuthenticationError("No URL provided in request config");
   }
 
+  logger.debug(`[headersInterceptor] Processing request for URL: ${url}`);
+
   const needsAuthenticationHeaders = AuthenticationRoutes.some((route) =>
     url.includes(route)
   );
+  logger.debug(
+    `[headersInterceptor] Needs authentication headers: ${needsAuthenticationHeaders}`
+  );
+  let headers;
+  try {
+    headers = needsAuthenticationHeaders
+      ? await getConvosAuthenticationHeaders()
+      : await getConvosAuthenticatedHeaders();
 
-  const isJwtSetupOnBackend = /** not prioritized for March launch */ false;
-
-  const shouldUseJwtHeaders = isJwtSetupOnBackend && needsAuthenticationHeaders;
-
-  const headers = shouldUseJwtHeaders
-    ? await getConvosAuthenticationHeaders()
-    : await getConvosAuthenticatedHeaders();
+    logger.debug(
+      `[headersInterceptor] Headers generated successfully, ${JSON.stringify(
+        headers,
+        null,
+        2
+      )}`
+    );
+  } catch (error) {
+    logger.error(`[headersInterceptor] Failed to generate headers: ${error}`);
+    throw error;
+  }
 
   config.headers = {
     ...config.headers,