Webcrypto Polyfill package

.circleci/config.yml

@@ -0,0 +1,88 @@
+version: 2.1
+
+orbs:
+  general-platform-helpers: okta/general-platform-helpers@1.9.4
+  platform-helpers: okta/platform-helpers@2.0.0
+  macos: circleci/macos@2
+  android: circleci/android@3.1.0
+
+executors:
+  # android:
+  #   docker:
+  #     - image: cimg/android:2024.12
+  #   environment:
+  #     GRADLE_OPTS: -Xmx2g
+  #   resource_class: large
+
+  macos:
+    macos:
+      xcode: "16.3"
+    resource_class: m4pro.medium
+
+jobs:
+  test-android:
+    executor:
+      name: android/android_machine
+      resource_class: large
+      tag: default
+    steps:
+      - checkout
+
+      - restore_cache:
+          keys:
+            - gradle-{{ checksum "packages/react-native-webcrypto-bridge/android/build.gradle" }}
+            - gradle-
+
+      - run:
+          name: Run Android Unit and Integration Tests
+          command: |
+            cd packages/react-native-webcrypto-bridge/android
+            ./gradlew testDebugUnitTest --info
+
+      - save_cache:
+          key: gradle-{{ checksum "packages/react-native-webcrypto-bridge/android/build.gradle" }}
+          paths:
+            - ~/.gradle
+            - .gradle
+
+      - store_test_results:
+          path: packages/react-native-webcrypto-bridge/android/build/test-results
+
+      - store_artifacts:
+          path: packages/react-native-webcrypto-bridge/android/build/reports
+          destination: android-test-reports
+
+  test-ios:
+    executor: macos
+    steps:
+      - checkout
+
+      - restore_cache:
+          keys:
+            - swift-spm-{{ checksum "packages/react-native-webcrypto-bridge/ios/Package.swift" }}
+            - swift-spm-
+
+      - run:
+          name: Run iOS Unit and Integration Tests
+          command: |
+            cd packages/react-native-webcrypto-bridge/ios
+            swift test --verbose
+
+      - save_cache:
+          key: swift-spm-{{ checksum "packages/react-native-webcrypto-bridge/ios/Package.swift" }}
+          paths:
+            - packages/react-native-webcrypto-bridge/ios/.build
+
+      - store_test_results:
+          path: packages/react-native-webcrypto-bridge/ios/.build/test-results
+
+      - store_artifacts:
+          path: packages/react-native-webcrypto-bridge/ios/.build
+          destination: ios-build-artifacts
+
+workflows:
+  version: 2
+  build_and_test:
+    jobs:
+      - test-android
+      - test-ios

e2e/apps/react-native-oidc/.gitignore

@@ -39,3 +39,5 @@ yarn-error.*
 *.tsbuildinfo
 
 app-example
+
+.idea/

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

@@ -17,5 +17,39 @@ export default ({ config }: ConfigContext) => ({
   ...config,
   extra: {
     env
-  }
+  },
+  "android": {
+    "package": "com.anonymous.reporeactnativeoidc"
+  },
+  "ios": {
+    "bundleIdentifier": "com.anonymous.reporeactnativeoidc"
+  },
+  scheme: "com.oktapreview.jperreault-test",
+  intentFilters: [
+    {
+      action: "VIEW",
+      autoVerify: true,
+      data: [
+        {
+          scheme: "com.oktapreview.jperreault-test"
+        }
+      ],
+      category: ["BROWSABLE", "DEFAULT"]
+    }
+  ],
+  "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/eslint.config.js

@@ -12,7 +12,12 @@ module.exports = defineConfig([
     // `okta-client-javascript` dependencies because they will not be installed via npm, they are "installed" via a build.
     // Ignore them to avoid require builds to be ran before linting
     settings: {
-      "import/core-modules": ["@okta/auth-foundation", "@okta/oauth2-flows"]
+      "import/core-modules": [
+        "@okta/auth-foundation",
+        "@okta/oauth2-flows",
+        "@okta/react-native-platform",
+        "@okta/react-native-webcrypto-bridge"
+      ]
     }
   }
 ]);

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

@@ -1,17 +1,29 @@
 import { useCallback } from 'react';
 import { useRouter, type Router } from 'expo-router';
+import { Platform } from 'react-native';
 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';
 
 
 async function performSignIn () {
   try {
     console.log('here 1')
+    // Platform-specific redirect URI - iOS uses single slash, Android uses double slash
+    const redirectUri = Platform.OS === 'ios'
+      ? 'com.oktapreview.jperreault-test:/callback'
+      : 'com.oktapreview.jperreault-test://callback';
+
     // TODO: move to env
     const flow = new AuthorizationCodeFlow(client, {
-      redirectUri: 'com.oktapreview.jperreault-test:/callback'
+      redirectUri
     });
 
     // TODO: improve this pattern, too awkward
@@ -23,7 +35,7 @@ async function performSignIn () {
     // @ts-ignore
     const transaction = new AuthTransaction(flow.context);
     await transaction.save();
-    const result = await openAuthSessionAsync(uri.href, 'com.oktapreview.jperreault-test:/callback');
+    const result = await openAuthSessionAsync(uri.href, redirectUri);
     console.log('result: ', result)
     // @ts-ignore
     const { token, context } = await flow.resume(result.url);

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;
+