Skip to content

feat(react-native): expose appId prop on CrossmintProvider for bare RN support#1608

Open
devin-ai-integration[bot] wants to merge 2 commits intomainfrom
devin/1772462028-fix-bare-rn-app-identifier
Open

feat(react-native): expose appId prop on CrossmintProvider for bare RN support#1608
devin-ai-integration[bot] wants to merge 2 commits intomainfrom
devin/1772462028-fix-bare-rn-app-identifier

Conversation

@devin-ai-integration
Copy link
Contributor

Description

Bare React Native (non-Expo) projects using a mobile client-side API key get a 403 error:

"Client-side API key requires an origin header. For server-side requests, use a server-side API key instead."

Root cause: CrossmintProvider auto-detects the app bundle ID exclusively via Constants.expoConfig, which is undefined in bare RN. This means the x-app-identifier header is never sent, and the server falls through to the web Origin header check — which native HTTP clients don't provide.

Fix: Expose appId as an optional prop on CrossmintProviderProps (already defined in CrossmintConfig), with fallback to the existing Expo auto-detection. Fully backward-compatible — Expo users are unaffected.

// Bare RN usage:
<CrossmintProvider apiKey="ck_..." appId="com.myapp">

Discovered while investigating a customer issue (alemx.com) where their iOS app was getting 403s on the email OTP endpoint.

Link to Devin Session: https://crossmint.devinenterprise.com/sessions/69fe83c455a54198a34899eff208e383
Requested by: @xmint-guille

Test plan

  • No automated tests added — this is a one-line prop passthrough to BaseCrossmintProvider which already handles appId
  • Human review checklist:
    • Verify CrossmintConfig.appId is already optional (it is — see packages/common/base/src/types/Crossmint.ts:26)
    • Confirm BaseCrossmintProvider already accepts and forwards appId to the API client
    • Consider whether the RN SDK README or docs should document this prop for bare RN users

Package updates

  • @crossmint/client-sdk-react-native-uipatch bump via changeset (cyan-fireants-perform.md)

…N support

The CrossmintProvider previously auto-detected the app bundle ID exclusively
via expo-constants (Constants.expoConfig). In bare React Native projects
without Expo, this value is undefined, causing the x-app-identifier header
to never be sent. This results in 403 errors: 'Client-side API key requires
an origin header'.

This change exposes appId as an optional prop on CrossmintProviderProps,
falling back to the existing Expo auto-detection when not provided.
@changeset-bot
Copy link

changeset-bot bot commented Mar 2, 2026

🦋 Changeset detected

Latest commit: b47aec7

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

This PR includes changesets to release 2 packages
Name Type
@crossmint/client-sdk-react-native-ui Patch
expo-demo Patch

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

@devin-ai-integration
Copy link
Contributor Author

Original prompt from Guille
@CSE Hub Runner (Meta-Playbook) 

investigate why the customer alemx.com is getting this error:
Error: Failed to send email OTP: Client-side API key requires an origin header. For server-side requests, use a server-side API key instead.


they have a client side api key configured for mobile with these allowed origin/s

here are some ddls for reference with the issue:
https://app.datadoghq.com/logs?query=%22Client-side%20API%20key%20requires%20an%20origin%20header%22%20alemx.com&agg_m=count&agg_m_source=base&agg_t=count&cols=%40http.method%2C%40http.url_details.path%2C%40http.status_code&messageDisplay=inline&refresh_mode=sliding&storage=hot&stream_sort=time%2Cdesc&viz=stream&from_ts=1771855595529&to_ts=1772460395529&live=true
ATTACHMENT:"https://crossmint.devinenterprise.com/attachments/265e9751-a855-43d8-b438-bfd42d366044/CleanShot+2026-03-02+at+15.16.09.png"

PLAYBOOK_md:
Playbook: CSE Hub Runner (Meta-Playbook)

## Overview

This is a meta-playbook that loads and executes playbooks from the GitHub repository. This allows playbooks to be version-controlled and self-improving.

## What's Needed From User

- Which playbook to run:
  - `client-kickoff` — Create client folder from questionnaire/Slack data
  - `client-context-sync` — Process Slack thread JSON exports and update client docs
  - `hub-maintainer` — Weekly sync: update questionnaires, capture Slack gotchas
  - `hub-auto-improve` — Deep sync hub with docs.crossmint.com, Slack, and codebase
  - `technical-escalation` — Debug customer technical issues (logs, DB, codebase)
  - `postmortem` — Create post-mortem documentation after an incident
  - `dashboard-debug` — Debug Crossmint dashboard/console errors
- Any additional context or parameters for that playbook

## Procedure

### Phase 1: Setup

1. Clone or pull the paella-os repository

git clone git@github.com:Paella-Labs/paella-os.git

Or if already cloned: `git pull origin main`

CSE hub content is located in `docs/cse/` within paella... (5241 chars truncated...)

@devin-ai-integration
Copy link
Contributor Author

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

  • Address comments on this PR that start with 'DevinAI' or '@devin'.
  • Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

  • Disable automatic comment and CI monitoring

Copy link
Contributor

@greptile-apps greptile-apps bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

2 files reviewed, no comments

Edit Code Review Agent Settings | Greptile

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant