[JS-775] @clerk/clerk-expo gives "invalid request headers" error in expo web

[johnjensenish]

Preliminary Checks

• I have reviewed the documentation: https://clerk.com/docs
• I have searched for existing issues: https://github.com/clerkinc/javascript/issues
• I have not already reached out to Clerk support via email or Discord (if you have, no need to open an issue here)
• This issue is not a question, general help request, or anything other than a bug report directly related to Clerk. Please ask questions in our Discord community: https://clerk.com/discord.

Reproduction / Replay Link

https://github.com/johnjensenish/clerk-expo-web-request-header-missing

Publishable key

pk_test_dHJ1c3RlZC13YWxydXMtNjAuY2xlcmsuYWNjb3VudHMuZGV2JA

Description

@clerk/clerk-expo does not seem to function correctly when running the Expo web platform with the Metro bundler. Our app uses the Metro bundler in order to have one bundler process across platforms.

API calls result in an "Invalid request headers" message.

Error message:

The signUp.create() API results in the following error in the Chrome console (formatted for legibility).

[
  {
    "code": "request_header_missing",
    "message": "Invalid request headers",
    "longMessage": "Your Clerk Frontend API is accessible from browsers and native applications. To protect against common web attacks, we require the HTTP Authorization header to be present in native application requests. Make sure the HTTP Authorization header is set a valid Clerk client JWT or set it to an empty string for your first Frontend API request that will return your Clerk client JWT.",
    "meta": {}
  }
]

Steps to reproduce:

1. npm install
2. npm run web
3. Enter a valid first name, last name, and phone number.
4. Tap the "Sign Up" button.
5. Actual behavior: Observe the error message in the console log.
6. Actual behavior: The app does not progress.

Expected behavior:

After tapping "Sign Up", the app navigates to the verification code screen.

iOS behavior:

The app matches expected behavior when using npm run ios, and an account can be created.

(Phone number is censored)

Environment

System:
    OS: macOS 13.6
    CPU: (10) arm64 Apple M1 Pro
    Memory: 2.07 GB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.17.1 - ~/.asdf/installs/nodejs/18.17.1/bin/node
    Yarn: 1.22.19 - ~/.asdf/installs/nodejs/18.17.1/bin/yarn
    npm: 10.1.0 - ~/.asdf/plugins/nodejs/shims/npm
    pnpm: 8.8.0 - ~/.asdf/installs/nodejs/18.17.1/bin/pnpm
    Watchman: 2023.09.25.00 - /opt/homebrew/bin/watchman
  Browsers:
    Chrome: 117.0.5938.92
    Safari: 17.0
  npmPackages:
    @babel/core: ^7.22.8 => 7.22.8 
    @clerk/clerk-expo: ^0.19.4 => 0.19.4 
    @expo/vector-icons: 13.0.0 => 13.0.0 
    @react-navigation/bottom-tabs: 6.5.8 => 6.5.8 
    @react-navigation/native: 6.1.7 => 6.1.7 
    @react-navigation/native-stack: 6.9.13 => 6.9.13 
    @types/expo: 33.0.1 => 33.0.1 
    @types/react: ^18.2.14 => 18.2.14 
    @types/react-native: ^0.72.2 => 0.72.2 
    expo: ~49.0.0 => 49.0.0 
    expo-asset: 8.10.1 => 8.10.1 
    expo-auth-session: 5.0.2 => 5.0.2 
    expo-constants: 14.4.2 => 14.4.2 
    expo-font: 11.4.0 => 11.4.0 
    expo-linking: 5.0.2 => 5.0.2 
    expo-random: 13.2.0 => 13.2.0 
    expo-secure-store: 12.3.1 => 12.3.1 
    expo-splash-screen: 0.20.4 => 0.20.4 
    expo-status-bar: 1.6.0 => 1.6.0 
    expo-web-browser: 12.3.2 => 12.3.2 
    jest-expo: ^49.0.0 => 49.0.0 
    prettier: ^2.8.4 => 2.8.8 
    react: 18.2.0 => 18.2.0 
    react-dom: 18.2.0 => 18.2.0 
    react-native: 0.72.1 => 0.72.1 
    react-native-safe-area-context: 4.6.3 => 4.6.3 
    react-native-screens: 3.22.1 => 3.22.1 
    react-native-url-polyfill: 1.3.0 => 1.3.0 
    react-native-web: 0.19.6 => 0.19.6 
    typescript: ^5.1.6 => 5.1.6 
    uri-scheme: 1.1.0 => 1.1.0

_JS-775

[johnjensenish]

I tried playing with some dashboard settings.

Turning "Enable URL-based session syncing" off did not fix the issue. I re-enabled it after my test.

I tried specifying "Fallback development host" to "http://localhost:8081" and it did not fix the issue. I cleared the field after my test.

[johnjensenish]

@jescalan I saw this was touched. Any updates on getting this issue onto the roadmap? We'd love to use Clerk on web.

[JeffreyKozik]

I'm experiencing the same issue as well. I used to be able to use Clerk on the web with Expo as recently as a couple months ago so I'm guessing this is the result of a recent code change.

[jescalan]

Added to feature requests here: FEA-37

[johnjensenish]

For folks who stumble upon this issue, I received the following message on Discord from a Clerk representative:

just confirmed with the team. Our SDK isn't going to support Expo for the web but instead only Expo for mobile app. If you want to build for the web with Clerk you would need to use React/Next/Remix or something that uses one of your frontend or full stack SDKs.

[novemberkilo]

This, from the example app is telling -

export const tokenCache = Platform.OS !== "web" ? createTokenCache() : undefined;

Looking at the definition of createTokenCache, for non-web platforms this uses SecureStore from expo-secure-store (which sensibly only supports mobile devices).

What if for web we used a token cache based on an alternative (e.g. local storage or memory) - could that work?

Looks like that's what happens in clerk-react
https://github.com/clerkinc/javascript/blob/2652b5091149e281a007ddd09a8a42ff3d63f58a/packages/expo/src/ClerkProvider.tsx#L21

[johnjensenish]

What if for web we used a token cache based on an alternative (e.g. local storage or memory) - could that work?

This is an interesting proposal. I tried two different implementations with no success. I'm not confident there is a quick fix given the response from Clerk.

Also, note you shared the source of { ClerkProvider } from '@clerk/clerk-expo', and you can see the default value for tokenCache is MemoryTokenCache — e.g. if you pass tokenCache={undefined} as a prop, the memory cache is used by default.

Token cache implementations

const createMemoryTokenCache = (): TokenCache => {
  const cache: Record<string, string> = {};

  return {
    async saveToken(key, token) {
      cache[key] = token;
      return Promise.resolve();
    },
    async getToken(key) {
      return Promise.resolve(cache[key]);
    },
    async clearToken(key) {
      delete cache[key];
    },
  };
};

const createSessionTokenCache = (): TokenCache => {
  return {
    async saveToken(key, token) {
      sessionStorage.setItem(key, token);
    },
    async getToken(key) {
      return sessionStorage.getItem(key);
    },
    async clearToken(key) {
      sessionStorage.removeItem(key);
    },
  };
};

[johnjensenish]

What I've decided to do here is create a file AppClerkProvider.web.tsx where I use the provider component from @clerk/react. AppClerkProvider.tsx uses the component from @clerk/expo. For my purposes, this has been working fine. Hooks and components like SignedIn are working well across web and the mobile platforms.

I'm going to close this issue due to the official response I mentioned above.

[clerk-cookie]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.