ClerkProvider: Web export in expo 50 results in CORS error, but works correctly on mobile. CORS Missing Allow Header.

[the-simian]

Using the Clerk provider provided via the clerk-expo export; import { ClerkProvider } from '@clerk/clerk-expo'; , when running the same code as a web export, Chrome and Firefox (with no extensions enabled) both produce a CORS error, when the call to clerk comes from a browser.

Here is a minimal example of how the provider is defined:

in _layout.tsx

import { ClerkProvider } from '@clerk/clerk-expo';
import * as SecureStore from 'expo-secure-store';
import {CLERK_KEY} from `../constants.ts`

export const tokenCache = {
  async getToken(key: string) {
    try {
      return SecureStore.getItemAsync(key);
    } catch (err) {
      console.log(err);
      return null;
    }
  },
  async saveToken(key: string, value: string) {
    try {
      return SecureStore.setItemAsync(key, value);
    } catch (err) {
      console.log(err);
      return;
    }
  },
};


export default function Root() {

  return ( 
    <ClerkProvider publishableKey={CLERK_KEY} tokenCache={tokenCache}>
         {/* other providers...*/}
        <Slot />
          {/* other providers...*/}
    </ClerkProvider> 
    );
}

Elsewhere, we can call the hook, with a minimal example.

in /login-screen.tsx

import { useSignIn } from '@clerk/clerk-expo';
import { router } from 'expo-router';
import { Button, View } from 'react-native';

const { isLoaded, signIn, setActive } = useSignIn();

export default function LoginForm() {
  async function onPressLogin({
    email,
    password,
  }: {
    email: string;
    password: string;
  }) {
    if (!isLoaded) {
      return;
    }
    try {
      const completeSignIn = await signIn.create({
        identifier: email,
        password,
      });

      // This indicates the user is signed in
      await setActive({ session: completeSignIn.createdSessionId });
    } catch (err: any) {
      const { message } = err.errors[0];
      alert(message);
    } finally {
      router.replace('/');
    }
  }

  return (
    <View>
      <Button
        onPress={() => {
          onPressLogin({
            email: '[email protected]',
            password: 'some-valid-password',
          });
        }}
        title="Test login"
      />
    </View>
  );
}

I'm using the hooks rather than the prebuilt components basically.

Testing on an actual device, everything works well but on a browser, at localhost:8081 you get:

Uncaught Error:

ClerkJS: Network error at "https://<my-dev-url->/v1/environment?_clerk_js_version=4.70.0&_method=PATCH&_is_native=1&__dev_session=eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJkZXYiOiJkdmJfMmNPRGZsblZSZkhDNzFoQlZBQVhaZ1RiekphIn0.HwW5cukbBBbpddKf-ih_cka8SklSvhDGiKhbfdvZofb943HGiQ_BHehQk88a7Zmzh2sV-zlDGDK4ykTaenm4HDDdVT78kWNMxJdOiCGvmigROP_cd2i882hacWdC2xtEKVn60zOpAbp2xQafIg7BUtMEtsdSqQWtVkEmzxAShbUdktxuR1DcG562wE7G6SG50UTkl2HcZ4Oe8j7TI6AoNIgRjhEUyKG5knfJz4LbSJTPNa8jpRbf6NJU1Fa6C-BBKScssXyNmvYAGPMAGx-jXsobVxAAGGgUck2Kx30YSENQF0kz7922b3XUbBf_WgYsbWi1mEcksrrDg7FQ" - TypeError: NetworkError when attempting to fetch resource.. Please try again.

Call Stack:

Call Stack

request
node_modules/@clerk/clerk-js/dist/clerk.headless.js:2:107864
request
node_modules/@clerk/clerk-js/dist/clerk.headless.js:2:107865
Generator.throw

asyncGeneratorStep
node_modules/@babel/runtime/helpers/asyncToGenerator.js:5:19
Promise$argument_0
node_modules/@babel/runtime/helpers/asyncToGenerator.js:27:7
Collapse 2 frames

If there's a way to allow localhost:8081 in the CORS allowlist for development in the clerk dashboard I can't find it. I will say I saw a related issue that indicated 'Enable URL-based session syncing` (this:)

might affect this. I've tried it both ways, with this toggled on and also toggled off and I can't see a difference. Also the browser I posted a screenshot of (Firefox) has no extensions installed at all, so things like https anywhere or lighthouse should not be interfering

I did see this section in the docs about adding the auth token to fetch calls, but this doesn't address the ClerkProvider and doesn't seem to be the same issue. I can't find a way to modify Allowed origins, is there a more correct way to handle this so that @clerk/clerk-expo can support both mobile and web export?