Configure Firebase and OpenAI

The ChatGPT React Native app uses Firebase for authentication, Firestore data, media uploads, push notifications, and Cloud Functions. The OpenAI API key belongs on the Firebase Functions backend, not in the mobile app.

Product page: ChatGPT React Native App Template

Quick Answer

Create a Firebase project, add separate iOS and Android apps, replace the native config files, deploy the firebase/functions backend, then set OPENAI_API_KEY in the Functions environment.

1. Create Your Firebase Project

In Firebase Console:

1. Create a new Firebase project.
2. Add an iOS app with your production bundle identifier.
3. Add an Android app with your production package name.
4. Download both native config files.
5. Enable the Firebase products used by your app.

Replace these files in the mobile project:

Platform	File
iOS	ReactNativeChatGPTApp/ios/Instamobile/GoogleService-Info.plist
Android	ReactNativeChatGPTApp/android/app/google-services.json

Keep bundle identifiers and package names aligned across Firebase, Apple Developer, Google Play, and the native projects.

2. Enable Firebase Products

Enable only the products you plan to use:

• Firebase Authentication
• Cloud Firestore
• Cloud Storage
• Cloud Functions
• Cloud Messaging, if push notifications are enabled
• Firebase Analytics, if you want analytics events

Recommended auth provider setup:

Provider	Default status	Notes
SMS phone auth	Enabled by default in the app flow	Enable the provider in Firebase Console
Apple Sign In	Enabled on iOS	Configure Apple Developer capabilities and Firebase provider
Google Sign In	Disabled until configured	Add OAuth client IDs and native URL schemes first
Facebook Login	Disabled until configured	Add app ID, client token, URL schemes, and Firebase provider

3. Configure Public Mobile Runtime Values

Start from ReactNativeChatGPTApp/.env.example and set only public values in the mobile app.

Important public values include:

Variable	Purpose
EXPO_PUBLIC_GOOGLE_MAPS_API_KEY	Google Maps key used by native app screens
EXPO_PUBLIC_UPLOAD_MEDIA_FUNCTION_URL	HTTPS endpoint for the uploadMedia Firebase Function
EXPO_PUBLIC_IOS_BUNDLE_ID	iOS bundle identifier used by runtime config
EXPO_PUBLIC_GOOGLE_WEB_CLIENT_ID	Google auth client ID when Google login is enabled
EXPO_PUBLIC_FACEBOOK_APP_ID	Facebook app ID when Facebook login is enabled

Values prefixed with EXPO_PUBLIC_ can be embedded into the app bundle. Do not store secrets there.

4. Deploy Firebase Functions

The backend lives in firebase/functions.

cd firebase/functions
npm install
firebase login
firebase use --add
npm run deploy

The app expects these callable or HTTPS functions to be deployed:

• sendMessageToGPTAssistant
• listMessages
• listChannels
• createChannel
• markAsRead
• markUserAsTypingInChannel
• addMessageReaction
• uploadMedia
• social graph and user reporting functions

After deploying uploadMedia, copy its HTTPS endpoint into EXPO_PUBLIC_UPLOAD_MEDIA_FUNCTION_URL.

5. Configure OpenAI on the Backend

The OpenAI integration is implemented in firebase/functions/openai/openai.js.

The backend reads:

Environment variable	Required	Default
OPENAI_API_KEY	Yes	None
OPENAI_MODEL	No	gpt-4o-mini

For local emulator work:

cd firebase/functions
cp .env.example .env.local

Then fill in OPENAI_API_KEY in your local environment file. For production, configure the same environment variables in the Firebase Functions runtime or your CI deploy environment.

warning

Never commit a real OpenAI API key. Never add it to ReactNativeChatGPTApp/.env.example, mobile runtime config, or any EXPO_PUBLIC_ value.

6. Firestore Cost Controls

The mobile app is optimized to avoid unbounded Firebase reads:

• Chat channel realtime feed watches the latest 50 records.
• Chat message realtime feed watches the latest 50 records.
• Social graph realtime mirrors are capped at up to 100 records.
• Reported users realtime mirror is capped at up to 100 records.
• Payment methods listener is capped at up to 20 records.
• Paginated fetch and search requests default to 25 records.
• Typing indicators are throttled per channel and user.
• Online presence writes only when the status changes.

If your production app has very large chats or social graphs, keep the realtime collections small and use explicit pagination for older data.

7. Smoke Test the Integration

After Firebase and OpenAI are configured:

1. Register a new user.
2. Confirm the user appears in Firebase Authentication.
3. Confirm a user document appears in Firestore.
4. Open a chat and send a text message.
5. Confirm sendMessageToGPTAssistant runs in Firebase Functions logs.
6. Confirm the assistant reply appears in the chat.
7. Upload a media file and confirm it reaches Firebase Storage.

FAQ

Why does the OpenAI key live in Firebase Functions?

The mobile app can be inspected by users. Keeping the key on the backend prevents customers from shipping a secret inside the iOS or Android bundle.

Can I change the OpenAI model?

Yes. Set OPENAI_MODEL in the Firebase Functions environment. The current backend defaults to gpt-4o-mini when the variable is not set.

Do I need the Blaze plan?

Cloud Functions deployment generally requires a Firebase project that can run server-side functions. Use the billing plan required by your Firebase project and region before deploying production functions.