Upgrade RN to 0.81.5 and prepare for WebCrypto pollyfill POC integration

e2e/apps/react-native-oidc/app.config.ts

@@ -1,21 +1,34 @@
-import { ConfigContext } from 'expo/config';
-import envModule from '@repo/env';
-
+import { ConfigContext } from "expo/config";
+import envModule from "@repo/env";
 
 envModule.setEnvironmentVarsFromTestEnv(__dirname);
 const env: any = {};
 // List of environment variables made available to the app
-['ISSUER', 'NATIVE_CLIENT_ID', 'USE_DPOP'].forEach((key) => {
+[
+  "ISSUER",
+  "NATIVE_CLIENT_ID",
+  "REDIRECT_URI",
+  "LOGOUT_REDIRECT_URI",
+  "USE_DPOP",
+].forEach((key) => {
   if (!process.env[key]) {
-    console.warn(`Environment variable ${key} should be set for development. See README.md`);
+    console.warn(
+      `Environment variable ${key} should be set for development. See README.md`
+    );
   }
   env[key] = process.env[key];
 });
 
+console.log("Expo extra.env at config time = ", env);
 
 export default ({ config }: ConfigContext) => ({
   ...config,
   extra: {
-    env
-  }
-});
+    env,
+  },
+  scheme: "com.oktapreview.tciuc-test",
+  plugins: ["expo-font", "expo-router", "expo-web-browser"],
+  android: {
+    package: "com.anonymous.reporeactnativeoidc",
+  },
+});

e2e/apps/react-native-oidc/app/(login)/_layout.tsx

@@ -1,43 +1,57 @@
-import { Tabs } from 'expo-router';
-import React from 'react';
-import { Platform } from 'react-native';
+import { Tabs } from "expo-router";
+import React from "react";
+import { Platform } from "react-native";
 
-import { HapticTab } from '@/components/HapticTab';
-import { IconSymbol } from '@/components/ui/IconSymbol';
-import TabBarBackground from '@/components/ui/TabBarBackground';
-import { Colors } from '@/constants/Colors';
-import { useColorScheme } from '@/hooks/useColorScheme';
+import { HapticTab } from "@/components/HapticTab";
+import { IconSymbol } from "@/components/ui/IconSymbol";
+import TabBarBackground from "@/components/ui/TabBarBackground";
+import { Colors } from "@/constants/Colors";
+import { useColorScheme } from "@/hooks/useColorScheme";
 
 export default function TabLayout() {
   const colorScheme = useColorScheme();
 
   return (
     <Tabs
       screenOptions={{
-        tabBarActiveTintColor: Colors[colorScheme ?? 'light'].tint,
+        tabBarActiveTintColor: Colors[colorScheme ?? "light"].tint,
         headerShown: false,
         tabBarButton: HapticTab,
         tabBarBackground: TabBarBackground,
         tabBarStyle: Platform.select({
           ios: {
             // Use a transparent background on iOS to show the blur effect
-            position: 'absolute',
+            position: "absolute",
           },
           default: {},
         }),
-      }}>
+      }}
+    >
       <Tabs.Screen
         name="index"
         options={{
-          title: 'Login',
-          tabBarIcon: ({ color }) => <IconSymbol size={28} name="house.fill" color={color} />,
+          title: "Login",
+          tabBarIcon: ({ color }) => (
+            <IconSymbol size={28} name="house.fill" color={color} />
+          ),
         }}
       />
       <Tabs.Screen
         name="token"
         options={{
-          title: 'Token',
-          tabBarIcon: ({ color }) => <IconSymbol size={28} name="paperplane.fill" color={color} />,
+          title: "Token",
+          tabBarIcon: ({ color }) => (
+            <IconSymbol size={28} name="paperplane.fill" color={color} />
+          ),
+        }}
+      />
+      <Tabs.Screen
+        name="webcrypto"
+        options={{
+          title: "Webcrypto",
+          tabBarIcon: ({ color }) => (
+            <IconSymbol size={28} name="paperplane.fill" color={color} />
+          ),
         }}
       />
     </Tabs>

e2e/apps/react-native-oidc/app/(login)/index.tsx

@@ -1,33 +1,33 @@
-import { useEffect } from 'react';
-import { StyleSheet } from 'react-native';
-import { Image } from 'expo-image';
-import Constants from 'expo-constants';
-import { useAuth } from '@/hooks/useAuth';
+import { useEffect } from "react";
+import { StyleSheet } from "react-native";
+import { Image } from "expo-image";
+import Constants from "expo-constants";
+import { useAuth } from "@/hooks/useAuth";
 
-import ParallaxScrollView from '@/components/ParallaxScrollView';
-import { ThemedText } from '@/components/ThemedText';
-import { ThemedView } from '@/components/ThemedView';
-import { HelloWave } from '@/components/HelloWave';
+import ParallaxScrollView from "@/components/ParallaxScrollView";
+import { ThemedText } from "@/components/ThemedText";
+import { ThemedView } from "@/components/ThemedView";
+import { HelloWave } from "@/components/HelloWave";
 
-
-export default function LoginScreen () {
+export default function LoginScreen() {
   const { signIn } = useAuth();
 
   useEffect(() => {
     (async () => {
-      await signIn('/(login)/token');
+      await signIn("/(login)/token");
     })();
   }, [signIn]);
 
   return (
     <ParallaxScrollView
-      headerBackgroundColor={{ light: '#A1CEDC', dark: '#1D3D47' }}
+      headerBackgroundColor={{ light: "#A1CEDC", dark: "#1D3D47" }}
       headerImage={
         <Image
-          source={require('@/assets/images/partial-react-logo.png')}
+          source={require("@/assets/images/partial-react-logo.png")}
           style={styles.reactLogo}
         />
-      }>
+      }
+    >
       <ThemedView style={styles.titleContainer}>
         <ThemedText type="title">Loading...</ThemedText>
         <HelloWave />
@@ -42,15 +42,15 @@ const styles = StyleSheet.create({
     marginTop: Constants.statusBarHeight,
   },
   titleContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
+    flexDirection: "row",
+    alignItems: "center",
     gap: 8,
   },
   reactLogo: {
     height: 178,
     width: 290,
     bottom: 0,
     left: 0,
-    position: 'absolute',
+    position: "absolute",
   },
 });

e2e/apps/react-native-oidc/app/(login)/webcrypto.tsx

@@ -0,0 +1,50 @@
+import { useEffect, useState } from "react";
+import { Text, View } from "react-native";
+// import { moduleWebCryptoPollyfill } from "@okta/auth-foundation";
+// moduleWebCryptoPollyfill();
+
+function toHex(buf: ArrayBuffer) {
+  return Array.from(new Uint8Array(buf))
+    .map((b) => b.toString(16).padStart(2, "0"))
+    .join("");
+}
+
+export default function WebCryptoScreen() {
+  const [out, setOut] = useState<string>("Running self-test...");
+
+  useEffect(() => {
+    const test = async () => {
+      try {
+        const uuid = await globalThis.crypto.randomUUID();
+
+        const randomValue = globalThis.crypto.getRandomValues(
+          new Uint8Array(16)
+        );
+        const data = new TextEncoder().encode("hello");
+        const hash = await globalThis.crypto.subtle.digest("SHA-256", data);
+        setOut(
+          `uuid=${uuid}\nrandomValue=${randomValue}\nsha256(hello)=${toHex(
+            hash
+          )}`
+        );
+      } catch (error: any) {
+        setOut(`Failed : ${error?.message ?? String(error)}`);
+      }
+    };
+
+    test();
+  }, []);
+
+  return (
+    <View
+      style={{
+        flex: 1,
+        justifyContent: "center",
+        alignItems: "center",
+        padding: 16,
+      }}
+    >
+      <Text>{out}</Text>
+    </View>
+  );
+}

e2e/apps/react-native-oidc/app/_layout.tsx

@@ -1,48 +1,45 @@
-import { DarkTheme, DefaultTheme, ThemeProvider } from '@react-navigation/native';
-import { useFonts } from 'expo-font';
-import { Stack } from 'expo-router';
-import { StatusBar } from 'expo-status-bar';
-import 'react-native-reanimated';
-
-import * as Crypto from 'expo-crypto';
-
-import { useColorScheme } from '@/hooks/useColorScheme';
-
-
-// temp polyfill crypto libs
-global.crypto = {
-  // @ts-ignore
-  getRandomValues (typedArray: Uint8Array) {
-    return Crypto.getRandomValues(typedArray);
-  },
-  // @ts-ignore
-  randomUUID () {
-    return Crypto.randomUUID();
-  },
-  // @ts-ignore
-  subtle: {
-    digest (alg, data) {
-      // @ts-ignore
-      return Crypto.digest(alg, data);
-    }
-  }
-}
-
-
+import {
+  DarkTheme,
+  DefaultTheme,
+  ThemeProvider,
+} from "@react-navigation/native";
+import { useFonts } from "expo-font";
+import { Stack } from "expo-router";
+import { StatusBar } from "expo-status-bar";
+import "react-native-reanimated";
+
+import { useColorScheme } from "@/hooks/useColorScheme";
+// import { useEffect, useState } from "react";
+// import { moduleWebCryptoPollyfill } from "@okta/react-native-webcrypto";
 
 export default function RootLayout() {
   const colorScheme = useColorScheme();
   const [loaded] = useFonts({
-    SpaceMono: require('../assets/fonts/SpaceMono-Regular.ttf'),
+    SpaceMono: require("../assets/fonts/SpaceMono-Regular.ttf"),
   });
 
+  // useEffect(() => {
+  //   try {
+  //     console.log(
+  //       "WebCryptoPolyfill - applying moduleWebCryptoPollyfill() in _layout"
+  //     );
+  //     moduleWebCryptoPollyfill();
+  //     console.log("installed");
+  //   } catch (e) {
+  //     console.error(
+  //       "WebCryptoPolyfill - failed to apply moduleWebCryptoPollyfill() in _layout",
+  //       e
+  //     );
+  //   }
+  // }, []);
+
   if (!loaded) {
     // Async font loading only occurs in development.
     return null;
   }
 
   return (
-    <ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
+    <ThemeProvider value={colorScheme === "dark" ? DarkTheme : DefaultTheme}>
       <Stack>
         <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
         <Stack.Screen name="(login)" options={{ headerShown: false }} />