feat(clerk-expo): Add expo data to request headers

[thiskevinwang]

Description

What
Send along x-expo-execution-environment and x-expo-native-application-version headers to help identify the state of a mobile app, calling Clerk.

Why
We want to be able to easily determine if a mobile app is in any of "local development", "test flight", "app store/google play" (aka: dev/staging/production, respectively)

Checklist

• npm test runs as expected.
• npm run build runs as expected.
• (If applicable) JSDoc comments have been added or updated for any package exports
• (If applicable) Documentation has been updated

Type of change

• 🐛 Bug fix
• 🌟 New feature
• 🔨 Breaking change
• 📖 Refactoring / dependency upgrade / documentation
• other:

Packages affected

• @clerk/backend
• @clerk/chrome-extension
• @clerk/clerk-js
• @clerk/clerk-expo
• @clerk/fastify
• gatsby-plugin-clerk
• @clerk/localizations
• @clerk/nextjs
• @clerk/clerk-react
• @clerk/remix
• @clerk/clerk-sdk-node
• @clerk/shared
• @clerk/themes
• @clerk/types
• build/tooling/chore

[changeset-bot]

🦋 Changeset detected

Latest commit: 1bf9c09

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@clerk/clerk-expo	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[brkalow]

What insight might we gain from the app name / id?

[thiskevinwang]

💭 app name == Expo Go is roughly equivalent to request.origin == http://localhost:3000

[thiskevinwang]

More generally, my thinking here falls mostly under "I don't know what I don't know" regarding insights. But presence of this data should at least enable gaining any insight at all!

[jescalan]

This looks good to me, but I'm not sure I understand the context behind why it's being done. The PR description is just a screenshot of the result, the name of the branch honestly is the closest to context that we have, but even checking the related linear issue pulled from the branch name, there isn't really a lot of context about why this is important or where it came from.

To be clear, I trust that it's for a good reason, just some feedback on how to make PRs like this easier to understand and review for folks down the line 😁

[thiskevinwang]

@brkalow I reduced the number of headers sent to 2.

@jescalan I updated the description.

[brkalow]

👍

[auropsoft]

This change causes issues with the use of clerk/clerk-expo with expo start --web.
The preflight requests get blocked by clerk with the standard message in the browser:
...blocked by CORS policy: Request header field x-expo-native-application-version is not allowed by Access-Control-Allow-Headers in preflight response

Access to fetch at 'https://gorgeous-swift-17.clerk.accounts.dev/v1/environment?_clerk_js_version=4.69.1&_method=PATCH&_is_native=1&__dev_session=eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJkZXYiOiJkdmJfMmNwRFhxOVpWNFpZQzhLVk5lSXBSeklmNHhWIn0.awSF7yCL7AB4HTf1PjBpzEi-uIINoVX8n6u6pkBq2lIQ91MXHFdISlEXLX_G28DOGAYqZReu5NJdKn-MejXBXAdy99ohZ4hxhAMwz5bnRUtnZ94OAFEY2jBBHfsTW9YjNipWjOlTbE1FHJ5QM06hS3TiJaVUx9ZqBOHRGcGIj9_lbHdEfSjrX2lULEiV59ggqWEPl7FOlbDGLdyhqv3CnwxmH65EY-TT2G-12Fues1KA3i2zyOppNONC7cNz1eVuFEnQfavIeg31-vgCqN-SjbEG2-QesQvozE_ABMZxvy_ij4-SP7uRjUCYwLoAu5Z05MMY52ULroVojTbI1CnZkA' from origin 'http://localhost:8081' has been blocked by CORS policy: Request header field x-expo-native-application-version is not allowed by Access-Control-Allow-Headers in preflight response.

Adding a bit of code to remove those headers for web platform fixes the issue:

    useEffect(() => {
        if(Platform.OS === 'web') {
            clerk.__unstable__onBeforeRequest(async (requestInit: RequestInit) => {
                (requestInit.headers as Headers).delete("x-expo-execution-environment");
                (requestInit.headers as Headers).delete("x-expo-native-application-version");
            },[]);
        }
    })

I assume that web, being the underused platform for RN, wasn't specifically tested, but i'd love to be able to run it with the same code as the other platforms.

Does this have to be a seperate report?
This feels like a server-side issue, not so much a package issue. One would assume the statistics would want to be gathered either way from the description.

[thiskevinwang]

Hey @auropsoft,

Does this have to be a seperate report?
This feels like a server-side issue, not so much a package issue. One would assume the statistics would want to be gathered either way from the description.

Currently, the @clerk/expo SDK only supports mobile app output, and not web, so this flow was not tested. This is not necessarily a bug right now, but a helpful breadcrumb for us nonetheless (thanks for using the Expo SDK 😄 ).

Does this sound reasonable?

---

Tip

You can upvote the addition of Clerk supporting web output here!