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

Question

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

the-simian opened this issue a year ago · 8 comments

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: 'some.valid.email@domain.com',
            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?

Answer 1 · 2024-02-15T16:47:11.000Z

Also please let me know if this should be opened in https://github.com/clerk/javascript/tree/main/packages/expo 's repo and not here, I'd like to put it in the most correct place

Answer 2 · 2024-02-16T18:25:01.000Z

npx envinfo --system --browsers --binaries --npmPackages

  System:
    OS: Linux 5.15 Ubuntu 22.04.3 LTS 22.04.3 LTS (Jammy Jellyfish)
    CPU: (32) x64 13th Gen Intel(R) Core(TM) i9-13900K
    Memory: 57.94 GB / 62.68 GB
    Container: Yes
    Shell: 5.8.1 - /usr/bin/zsh
  Binaries:
    Node: 20.4.0 - ~/.nvm/versions/node/v20.4.0/bin/node
    Yarn: 1.22.21 - ~/.nvm/versions/node/v20.4.0/bin/yarn
    npm: 9.7.2 - ~/.nvm/versions/node/v20.4.0/bin/npm
    pnpm: 8.15.1 - ~/.local/share/pnpm/pnpm
    bun: 1.0.0 - ~/.nvm/versions/node/v20.4.0/bin/bun
  npmPackages:
    @babel/core: 7.23.9 => 7.23.9
    @clerk/clerk-expo: 0.20.5 => 0.20.5
    @expo/metro-runtime: 3.1.3 => 3.1.3
    @expo/ngrok: 4.1.3 => 4.1.3
    @expo/vector-icons: 14.0.0 => 14.0.0
    @gorhom/bottom-sheet: 4.6.0 => 4.6.0
    @hookform/resolvers: 3.3.4 => 3.3.4
    @radix-ui/react-hover-card: 1.0.7 => 1.0.7
    @radix-ui/react-popover: 1.0.7 => 1.0.7
    @react-native-async-storage/async-storage: 1.21.0 => 1.21.0
    @react-native-community/slider: 4.4.2 => 4.4.2
    @react-navigation/drawer: 6.6.7 => 6.6.7
    @react-navigation/material-top-tabs: 6.6.6 => 6.6.6
    @react-navigation/native: 6.1.10 => 6.1.10
    @shopify/flash-list: 1.6.3 => 1.6.3
    @tanstack/react-table: 8.12.0 => 8.12.0
    @types/react: 18.2.55 => 18.2.55
    class-variance-authority: 0.7.0 => 0.7.0
    clsx: 2.1.0 => 2.1.0
    expo: 50.0.6 => 50.0.6
    expo-clipboard: ~5.0.1 => 5.0.1
    expo-dev-client: 3.3.8 => 3.3.8
    expo-font: 11.10.2 => 11.10.2
    expo-haptics: ~12.8.1 => 12.8.1
    expo-linear-gradient: 12.7.1 => 12.7.1
    expo-linking: 6.2.2 => 6.2.2
    expo-router: 3.4.7 => 3.4.7
    expo-secure-store: ~12.8.1 => 12.8.1
    expo-status-bar: 1.11.1 => 1.11.1
    expo-system-ui: 2.9.3 => 2.9.3
    expo-web-browser: 12.8.2 => 12.8.2
    jest: 29.7.0 => 29.7.0
    jest-expo: 50.0.2 => 50.0.2
    lucide-react-native: 0.330.0 => 0.330.0
    moti: 0.27.2 => 0.27.2
    nativewind: 4.0.13 => 4.0.13
    prettier: ^3.2.5 => 3.2.5
    react: 18.2.0 => 18.2.0
    react-dom: 18.2.0 => 18.2.0
    react-hook-form: ^7.50.1 => 7.50.1
    react-native: 0.73.4 => 0.73.4
    react-native-calendars: 1.1303.0 => 1.1303.0
    react-native-gesture-handler: ~2.14.0 => 2.14.1
    react-native-reanimated: ~3.6.2 => 3.6.2
    react-native-safe-area-context: 4.8.2 => 4.8.2
    react-native-screens: 3.29.0 => 3.29.0
    react-native-svg: 14.1.0 => 14.1.0
    react-native-toast-message: 2.2.0 => 2.2.0
    react-native-web: 0.19.10 => 0.19.10
    react-test-renderer: 18.2.0 => 18.2.0
    tailwind-merge: 2.2.1 => 2.2.1
    tailwindcss: 3.4.1 => 3.4.1
    typescript: 5.3.3 => 5.3.3
    zod: 3.22.4 => 3.22.4
    zustand: 4.5.0 => 4.5.0

Answer 3 · 2024-02-23T00:17:45.000Z

Any updates on this? I am getting the same error...

Answer 4 · 2024-03-05T16:18:02.000Z

@LBeghini I can verify this still is malfunctioning in 0.20.6

Answer 5 · 2024-03-06T01:11:26.000Z

I tested again with 0.20.8 and the error persists

Answer 6 · 2024-04-08T23:19:27.000Z

Getting same error... Any updates??

Answer 7 · 2024-05-05T00:26:13.000Z

Hi, I'm also having this issue. Has anyone been able to solve? Thanks!

Answer 8 · 2024-06-17T17:28:26.000Z

Same issue here. Any updates?