Webcrypto Polyfill package

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

@@ -17,5 +17,27 @@ export default ({ config }: ConfigContext) => ({
   ...config,
   extra: {
     env
-  }
+  },
+  "android": {
+    "package": "com.anonymous.reporeactnativeoidc"
+  },
+  "ios": {
+    "bundleIdentifier": "com.anonymous.reporeactnativeoidc"
+  },
+  scheme: "com.oktapreview.jperreault-test",
+  "plugins": [
+    "expo-font",
+    "expo-router",
+    [
+      "expo-build-properties",
+      {
+        "ios": {
+          "newArchEnabled": true
+        },
+        "android": {
+          "newArchEnabled": true
+        }
+      }
+    ]
+  ]
 });

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

@@ -1,5 +1,5 @@
-import { useEffect } from 'react';
-import { StyleSheet } from 'react-native';
+import { useCallback, useEffect, useState } from 'react';
+import { StyleSheet, Button } from 'react-native';
 import { Image } from 'expo-image';
 import Constants from 'expo-constants';
 import { useAuth } from '@/hooks/useAuth';
@@ -12,12 +12,42 @@ import { HelloWave } from '@/components/HelloWave';
 
 export default function LoginScreen () {
   const { signIn } = useAuth();
+  const [ authError, setAuthError ] = useState<Error | null>(null);
+
+  const signInFunc = useCallback(async () => {
+    try {
+      await signIn('/(login)/token');
+    }
+    catch (err) {
+      setAuthError(err as Error);
+    }
+  }, [signIn, setAuthError]);
 
   useEffect(() => {
     (async () => {
-      await signIn('/(login)/token');
+      await signInFunc();
     })();
-  }, [signIn]);
+  }, [signInFunc]);
+
+  let view  = (
+    <>
+      <ThemedText type="title">Loading...</ThemedText>
+      <HelloWave />
+    </>
+  );
+
+  if (authError) {
+    view = (
+      <>
+        <ThemedText type="title">Error</ThemedText>
+        <ThemedText type="default">{authError.message}</ThemedText>
+        <Button
+          title="Login"
+          onPress={() => { setAuthError(null); signInFunc(); }}
+        />
+      </>
+    );
+  }
 
   return (
     <ParallaxScrollView
@@ -29,8 +59,7 @@ export default function LoginScreen () {
         />
       }>
       <ThemedView style={styles.titleContainer}>
-        <ThemedText type="title">Loading...</ThemedText>
-        <HelloWave />
+        {view}
       </ThemedView>
     </ParallaxScrollView>
   );

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

@@ -3,7 +3,7 @@ import { Button, StyleSheet } from 'react-native';
 import { Image } from 'expo-image';
 import { useRouter } from 'expo-router';
 import Constants from 'expo-constants';
-import { Credential, Token } from '@okta/auth-foundation';
+import { Credential, Token } from '@okta/react-native-platform';
 import { useAuth } from '@/hooks/useAuth';
 
 import ParallaxScrollView from '@/components/ParallaxScrollView';
@@ -53,6 +53,8 @@ export default function TokenScreen () {
       <ThemedView style={styles.stepContainer}>
         <ThemedText type="subtitle">Access Token</ThemedText>
         <ThemedText>{token.accessToken}</ThemedText>
+        <ThemedText type="subtitle">ID Token</ThemedText>
+        <ThemedText>{token?.idToken?.rawValue}</ThemedText>
         <ThemedText type="subtitle">Refresh Token</ThemedText>
         <ThemedText>{token?.refreshToken}</ThemedText>
       </ThemedView>

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

@@ -3,33 +3,9 @@ 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);
-    }
-  }
-}
-
-
-
 export default function RootLayout() {
   const colorScheme = useColorScheme();
   const [loaded] = useFonts({

e2e/apps/react-native-oidc/auth.ts

@@ -1,56 +1,15 @@
 import { fetch as expoFetch, FetchResponse } from 'expo/fetch';
 import Constants from 'expo-constants';
-import OAuth2Client from '@okta/auth-foundation/client';
+import { OAuth2Client } from '@okta/auth-foundation/core';
 
-console.log('fetch: ', fetch);
-console.log('Res.json', Response.json);
 
 export const client = new OAuth2Client({
   baseURL: Constants?.expoConfig?.extra?.env.ISSUER,
   clientId: Constants?.expoConfig?.extra?.env.NATIVE_CLIENT_ID,
   // TODO: skip OIDC to avoid PK import errors
-  // scopes: ['openid', 'email', 'profile', 'offline_access'],
-  scopes: ['offline_access'],
+  scopes: ['openid', 'email', 'profile', 'offline_access'],
+  // scopes: ['offline_access'],
   dpop: false,
-},
-{
-  // fetchImpl: async (input: string | URL | Request, init?: RequestInit) => {
-  //   // const { body, ...rest } = { body: undefined, ...init };
-  //   // const request = input instanceof Request ? input : new Request(input, rest);
-  //   const request = input instanceof Request ? input : new Request(input, init);
-  //   // TODO: expand additional request options
-  //   const { url, method, headers } = request;
-  //   console.log('url', url);
-  //   // console.log('body', request.body, init?.body)
-
-  //   //console.log('typeof body', typeof body, typeof request.body);
-  //   // const response = await expoFetch(url, { method, headers, body: body === null ? undefined: body });
-  //   // const json = await response.json();
-  //   // const { status, statusText } = response;
-  //   // console.log(Response);
-  //   // return Response.json(json, { status, statusText, headers: response.headers });
-
-  //   const response = await expoFetch(url, { method, headers });
-  //   console.log('typeof response', response instanceof Response);
-  //   if (method.toLocaleUpperCase() === 'POST') {
-  //     console.log('post request')
-  //     const body = await response.json();
-  //     console.log(body);
-  //   }
-  //   return response;
-
-  //   // const request = input instanceof Request ? input : new Request(input, init);
-  //   // if (request.body && request.body instanceof URLSearchParams) {
-  //   //   request.body = request.body.toString();
-  //   // }
-  // },
-
-
-  // NOTE: this isn't doing anything. The problem seems to be within `URLSearchParams`
-  // passing it directly to `fetch` wasn't converting the body to the correct format.
-  // directly calling `body: params.toString()` seems to be working fine for now
-  // (Fix in oauth2-flows/AuthCodeFlow/prepare)
-
   fetchImpl: async (input: string | URL | Request, init?: RequestInit) => {
     // const { body, ...rest } = { body: undefined, ...init };
     // const request = input instanceof Request ? input : new Request(input, rest);
@@ -64,5 +23,4 @@ export const client = new OAuth2Client({
     console.log(response.body);
     return response;
   }
-}
-);
+});

e2e/apps/react-native-oidc/babel.config.js

@@ -0,0 +1,10 @@
+module.exports = function (api) {
+  api.cache(true);
+
+  return {
+    presets: ['babel-preset-expo'],
+    plugins: [
+      '@babel/plugin-transform-class-static-block',
+    ],
+  };
+};

e2e/apps/react-native-oidc/hooks/useAuth.ts

@@ -1,8 +1,14 @@
 import { useCallback } from 'react';
 import { useRouter, type Router } from 'expo-router';
 import { openAuthSessionAsync } from 'expo-web-browser';
-import { AuthorizationCodeFlow, SessionLogoutFlow, AuthTransaction } from '@okta/oauth2-flows';
-import { Credential } from '@okta/auth-foundation';
+// import { AuthorizationCodeFlow, SessionLogoutFlow, AuthTransaction } from '@okta/oauth2-flows';
+// import { Credential } from '@okta/auth-foundation/core';
+import {
+  AuthorizationCodeFlow,
+  SessionLogoutFlow,
+  AuthTransaction,
+  Credential
+} from '@okta/react-native-platform';
 import { client } from '@/auth';
 
 

e2e/apps/react-native-oidc/index.js

@@ -0,0 +1,10 @@
+import '@expo/metro-runtime';
+import 'expo-router/entry';
+
+import { Platform, installWebCryptoPolyfill } from '@okta/react-native-platform';
+installWebCryptoPolyfill();
+
+console.log('Plat', Platform, Platform.TimeCoordinator)
+console.log("globalThis.crypto", globalThis.crypto);
+// global.crypto = global.crypto ?? globalThis.crypto;
+

e2e/apps/react-native-oidc/metro.config.js

@@ -18,11 +18,21 @@ const monorepoRoot = path.resolve(projectRoot, '../../..');
 const config = getDefaultConfig(projectRoot);
 
 // 1. Watch all files within the monorepo
-config.watchFolders = [monorepoRoot];
+config.watchFolders = [...config.watchFolders, monorepoRoot];
 // 2. Let Metro know where to resolve packages and in what order
 config.resolver.nodeModulesPaths = [
+  ...config.resolver.nodeModulesPaths,
   path.resolve(projectRoot, 'node_modules'),
   path.resolve(monorepoRoot, 'node_modules'),
 ];
 
+// Ensure workspace packages are resolved
+config.resolver.disableHierarchicalLookup = false;
+
+// Don't try to transform react-native internals
+config.resolver.blockList = [
+  // Block nested node_modules in workspace packages
+  /packages\/[^/]+\/node_modules\/.*/,
+];
+
 module.exports = config;

e2e/apps/react-native-oidc/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@repo/react-native-oidc",
-  "main": "expo-router/entry",
+  "main": "index.js",
   "version": "1.0.0",
   "scripts": {
     "start": "expo start",
@@ -11,43 +11,46 @@
     "lint": "expo lint"
   },
   "dependencies": {
-    "@expo/vector-icons": "^14.1.0",
+    "@expo/metro-runtime": "^6.1.2",
+    "@expo/vector-icons": "^15.0.3",
     "@okta/auth-foundation": "*",
     "@okta/oauth2-flows": "*",
-    "@react-navigation/bottom-tabs": "^7.3.10",
-    "@react-navigation/elements": "^2.3.8",
-    "@react-navigation/native": "^7.1.6",
-    "expo": "~53.0.10",
-    "expo-blur": "~14.1.4",
-    "expo-constants": "~17.1.6",
-    "expo-crypto": "~14.1.4",
-    "expo-dev-client": "~5.1.8",
-    "expo-font": "~13.3.1",
-    "expo-haptics": "~14.1.4",
-    "expo-image": "~2.1.7",
-    "expo-linking": "~7.1.5",
-    "expo-router": "~5.0.6",
-    "expo-splash-screen": "~0.30.8",
-    "expo-status-bar": "~2.2.3",
-    "expo-symbols": "~0.4.4",
-    "expo-system-ui": "~5.0.7",
-    "expo-web-browser": "~14.1.6",
-    "react": "19.0.1",
-    "react-dom": "19.0.1",
-    "react-native": "0.79.2",
-    "react-native-gesture-handler": "~2.24.0",
-    "react-native-reanimated": "~3.17.4",
-    "react-native-safe-area-context": "5.4.0",
-    "react-native-screens": "~4.10.0",
-    "react-native-web": "~0.20.0",
-    "react-native-webview": "13.13.5"
+    "@okta/react-native-platform": "*",
+    "expo": "^54.0.0",
+    "expo-blur": "~15.0.7",
+    "expo-constants": "~18.0.10",
+    "expo-crypto": "~15.0.7",
+    "expo-dev-client": "~6.0.18",
+    "expo-font": "~14.0.9",
+    "expo-haptics": "~15.0.7",
+    "expo-image": "~3.0.10",
+    "expo-linking": "~8.0.9",
+    "expo-router": "~6.0.15",
+    "expo-splash-screen": "~31.0.11",
+    "expo-status-bar": "~3.0.8",
+    "expo-symbols": "~1.0.7",
+    "expo-system-ui": "~6.0.8",
+    "expo-web-browser": "~15.0.9",
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
+    "react-native": "0.81.5",
+    "react-native-gesture-handler": "~2.28.0",
+    "react-native-reanimated": "~4.1.1",
+    "react-native-safe-area-context": "~5.6.0",
+    "react-native-screens": "~4.16.0",
+    "react-native-web": "^0.21.0",
+    "react-native-webview": "13.15.0",
+    "react-native-worklets": "0.5.1"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",
+    "@babel/plugin-transform-class-static-block": "^7.28.6",
+    "@react-native-community/cli": "latest",
     "@repo/env": "*",
     "@types/react": "~19.0.10",
     "eslint": "^9.25.0",
     "eslint-config-expo": "~9.2.0",
+    "expo-build-properties": "^1.0.10",
     "typescript": "~5.8.3"
   },
   "private": true

e2e/apps/react-native-oidc/react-native.config.js

@@ -0,0 +1,9 @@
+const path = require('path');
+
+module.exports = {
+  dependencies: {
+    '@okta/react-native-webcrypto-bridge': {
+      root: path.resolve(__dirname, '../../packages/react-native-webcrypto-bridge'),
+    },
+  },
+};

e2e/apps/react-native-oidc/tsconfig.json

@@ -10,6 +10,7 @@
   },
   "include": [
     "**/*.ts",
-    "**/*.tsx"
+    "**/*.tsx",
+    "index.js"
   ]
 }

package.json

@@ -39,9 +39,9 @@
       "**/expo-*/**",
       "**/@expo/**",
       "**/@expo/**/**",
-      "**/react-native",
-      "**/react-native/**",
       "**/@react-navigation/**",
+      "react",
+      "react-native",
       "react-native-oidc/@okta/*",
       "react-native-oidc/@okta/**"
     ]

packages/auth-foundation/package.json

@@ -37,7 +37,10 @@
     "./package.json": "./package.json"
   },
   "sideEffects": [
-    "./src/oktaUserAgent.ts"
+    "./src/index.ts",
+    "./src/oktaUserAgent.ts",
+    "./dist/esm/index.js",
+    "./dist/esm/oktaUserAgent.ts"
   ],
   "scripts": {
     "lint": "eslint --ext .js,.ts,.jsx .",