This repository has been archived by the owner on Jul 15, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 19
ClerkProvider: Web export in expo 50 results in CORS error, but works correctly on mobile. CORS Missing Allow Header. #21
Comments
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 |
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
|
Any updates on this? I am getting the same error... |
@LBeghini I can verify this still is malfunctioning in |
I tested again with |
Getting same error... Any updates?? |
Hi, I'm also having this issue. Has anyone been able to solve? Thanks! |
Same issue here. Any updates? |
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
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
Elsewhere, we can call the hook, with a minimal example.
in
/login-screen.tsx
I'm using the hooks rather than the prebuilt components basically.
Testing on an actual device, everything works well but on a browser, at
![image](https://private-user-images.githubusercontent.com/954596/305147983-ae88be02-c422-49b4-81a5-7b8741a0a591.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjMxMTAwOTUsIm5iZiI6MTcyMzEwOTc5NSwicGF0aCI6Ii85NTQ1OTYvMzA1MTQ3OTgzLWFlODhiZTAyLWM0MjItNDliNC04MWE1LTdiODc0MWEwYTU5MS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwODA4JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDgwOFQwOTM2MzVaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT0xYzUwYWM2ZGMyNjg1MTJkMWZkNDJjMDZjMGU5NDUzZDcyZjllMDQ5YzJmZDc4MjEwZGY5NGUzZWZkYmI5NzY1JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.JrXUrRd1kH7bb199UQYZZmtFdWp3T37jvsNuqYqdz9I)
localhost:8081
you get:Uncaught Error:
Call Stack:
Call Stack
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:)
![image](https://private-user-images.githubusercontent.com/954596/305149417-5a3d9a82-9994-437c-9ea2-ae1d362264bd.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjMxMTAwOTUsIm5iZiI6MTcyMzEwOTc5NSwicGF0aCI6Ii85NTQ1OTYvMzA1MTQ5NDE3LTVhM2Q5YTgyLTk5OTQtNDM3Yy05ZWEyLWFlMWQzNjIyNjRiZC5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwODA4JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDgwOFQwOTM2MzVaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT02MjE0MjAyN2RlMGQ2OTAxNjYzNmYzMTY2OTUxOTE1YjYwOGRmN2JkMDdmNDkyYjgxZTI1OWU2NTQyZDVhZWZiJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.urHiY9wJXBgE-QG9yZIPEpx22dD0CimpTrVeA9wLFgo)
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?The text was updated successfully, but these errors were encountered: