Setting both the 'Origin' and 'Authorization' headers is forbidden

[michael-land]

Preliminary Checks

• [X] I have reviewed the documentation: https://clerk.com/docs
• [X] I have searched for existing issues: https://github.com/clerk/javascript/issues
• [X] I have not already reached out to Clerk support via email or Discord (if you have, no need to open an issue here)
• [X] 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

https://github.com/clerk/clerk-chrome-extension-starter/tree/v5

Publishable key

pk_test_ZW1pbmVudC1zdW5iZWFtLTUzLmNsZXJrLmFjY291bnRzLmRldiQ

Description

I encountered an issue while setting up Clerk with a browser extension, using https://github.com/clerk/clerk-chrome-extension-starter/tree/v5 as a starting point. After following the setup instructions, I updated the allowed_origins to include my extension ID using this command:

curl -X PATCH https://api.clerk.com/v1/instance \
     -H "Authorization: Bearer MY_CLERK_SK" \
     -H "Content-type: application/json" \
     -d '{"allowed_origins": ["chrome-extension://flfelhfgffaic..."]}'

{
  "errors": [
    {
      "message": "Setting both the 'Origin' and 'Authorization' headers is forbidden",
      "long_message": "For security purposes, only one of the 'Origin' and 'Authorization' headers should be provided, but not both. In browser contexts, the 'Origin' header is set automatically by the browser. In native application contexts (e.g. mobile apps), set the 'Authorization' header.",
      "code": "origin_authorization_headers_conflict"
    }
  ],
  "clerk_trace_id": "ab991588a0088cdc526a2fdd83d614b7"
}

Steps to reproduce:

1. clone https://github.com/clerk/clerk-chrome-extension-starter/tree/v5
2. follow clerk extension README set setup host_permissions
3. add VITE_CLERK_PUBLISHABLE_KEY to env file

Expected behavior:

should work

Actual behavior:

does not work

Environment

System:
    OS: macOS 14.2.1
    CPU: (12) arm64 Apple M3 Pro
    Memory: 88.08 MB / 18.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.11.0 - ~/Library/Caches/fnm_multishells/96079_1711308377063/bin/node
    Yarn: 1.22.21 - ~/Library/Caches/fnm_multishells/96079_1711308377063/bin/yarn
    npm: 10.2.4 - ~/Library/Caches/fnm_multishells/96079_1711308377063/bin/npm
    pnpm: 8.15.1 - ~/Library/Caches/fnm_multishells/96079_1711308377063/bin/pnpm
  Browsers:
    Chrome: 123.0.6312.59
    Safari: 17.2.1

[ducan-ne]

I have exactly the same issue when follow the instructions from chrome-extension readme

Already patch {"allowed_origins": ["chrome-extension://hffncgjlomhcifdgaagggiemefokmpnp"]} to project

More context: I'm running in content scripts, not sure if it's the root cause. This now is the blocking to my release 🥲

[stelmakhivan]

Faced the same response error, using @clerk/clerk-expo and sign-up with Google Possible because of this line https://github.com/clerk/javascript/blob/main/packages/expo/src/singleton.ts#L43

[tmilewski]

Hi all,

The issue here is that the ID for the Chrome Extension / Expo application has changed since allowed_origins was set.

This can happen in a number of scenarios, for example, when uninstalling and re-installing a Chrome Extension.

Two options are either update to allowed_origins with the new origin, or to set a unique ID.

[abarax]

Is there a workaround for getting this to work on Expo web?

[vendramini]

Hi all,

The issue here is that the ID for the Chrome Extension / Expo application has changed since allowed_origins was set.

This can happen in a number of scenarios, for example, when uninstalling and re-installing a Chrome Extension.

Two options are either update to allowed_origins with the new origin, or to set a unique ID.

Can you please elaborate this solution on Expo Web's context? It is happening on web app version of Expo sometimes.

@abarax did you find a solution?

[vendramini]

I'm not sure if this is the correct solution, but it's working:

import { ClerkProvider } from '@clerk/clerk-expo';
import {ClerkProvider as ClerkProviderWeb} from '@clerk/clerk-react';

const ClerkProviderSelection = ({children}: PropsWithChildren) => {
  if(Platform.OS === 'web') return <ClerkProviderWeb publishableKey={publishableKey}>{children}</ClerkProviderWeb>;
  else return <ClerkProvider publishableKey={publishableKey} tokenCache={secureStore}>{children}</ClerkProvider>;
};

[jbrumwell]

Happening on expo:web for me as well, using the workaround above works

[johanpedroo]

I'm not sure if this is the correct solution, but it's working:

import { ClerkProvider } from '@clerk/clerk-expo';
import {ClerkProvider as ClerkProviderWeb} from '@clerk/clerk-react';

const ClerkProviderSelection = ({children}: PropsWithChildren) => {
  if(Platform.OS === 'web') return <ClerkProviderWeb publishableKey={publishableKey}>{children}</ClerkProviderWeb>;
  else return <ClerkProvider publishableKey={publishableKey} tokenCache={secureStore}>{children}</ClerkProvider>;
};

this works!