Firebase push notifications

Create a Firebase project, then register a Web app, Android app, and iOS app for the platforms you support.

In Firebase Console, open Project settings → Cloud Messaging and create a Web Push certificate to obtain the public VAPID key.

Install the package and the optional Firebase Web SDK:

pnpm add @zoharyandrianome/crosshooks firebase

Copy examples/docs/.env.example to .env.local and fill in the public values from Firebase Console:

NEXT_PUBLIC_FIREBASE_API_KEY=
NEXT_PUBLIC_FIREBASE_PROJECT_ID=
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=
NEXT_PUBLIC_FIREBASE_APP_ID=
NEXT_PUBLIC_FIREBASE_VAPID_KEY=

Add public/firebase-messaging-sw.js so Firebase can create a background push subscription.

It may initially be an empty service worker; add Firebase background-message handling when your application needs custom background behavior.

import { usePushNotifications } from '@zoharyandrianome/crosshooks';
import { firebaseProvider } from '@zoharyandrianome/crosshooks/firebase';

const firebasePush = firebaseProvider({
  firebaseConfig: {
    apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY!,
    projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID!,
    messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID!,
    appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID!,
  },
  vapidKey: process.env.NEXT_PUBLIC_FIREBASE_VAPID_KEY!,
});

function NotificationsButton() {
  const notifications = usePushNotifications({ provider: firebasePush });
  return <button onClick={() => notifications.subscribe()}>Enable notifications</button>;
}

Keep the provider object outside the component so it stays stable.

Install the package and the optional native Firebase SDKs:

pnpm add @zoharyandrianome/crosshooks \
  @react-native-firebase/app \
  @react-native-firebase/messaging \
  react-native-permissions

react-native-permissions handles the notification permission prompt on iOS and Android 13+. Follow its setup guide to declare the notification permission in your native projects.

React Native configuration comes from native Firebase files, so the hook does not need Firebase environment variables.

Download google-services.json from Firebase Console and place it at:

android/app/google-services.json

Configure the Google Services Gradle plugin as described by React Native Firebase, then rebuild the native application.

Apple requires every app that receives push notifications to be set up once at the native level. The hook consumes the credentials these steps produce — it cannot create them for you — so this part is manual. You need a Mac with Xcode installed. Do each action in the tool named below.

1. In Firebase Console: download GoogleService-Info.plist from your iOS app's settings.
2. In Xcode: drag that file into the ios project, and confirm it appears under your app target's Build Phases → Copy Bundle Resources so it ships inside the app.
3. In Xcode: open Signing & Capabilities, click + Capability, and add Push Notifications. Then add Background Modes and tick Remote notifications.
4. In the Apple Developer portal: under Keys, create an APNs authentication key and download the .p8 file.
5. In Firebase Console: upload that .p8 key under Project settings → Cloud Messaging → Apple app configuration. This is what lets Firebase hand your messages to Apple's servers.
6. In a terminal: install the native pods and rebuild the app.

cd ios && pod install

Rebuild from Xcode (or your usual React Native run command) after pod install. Push notifications only arrive on a real device — the iOS Simulator cannot receive them.

import { usePushNotifications } from '@zoharyandrianome/crosshooks';
import { firebaseProvider } from '@zoharyandrianome/crosshooks/firebase';

const firebasePush = firebaseProvider();

function NotificationsButton() {
  const notifications = usePushNotifications({ provider: firebasePush });
  return <Button title="Enable notifications" onPress={notifications.subscribe} />;
}

subscribe() requests permission and returns an FCM token. Send that token to your backend and associate it with the signed-in user.

The hook registers the device; it does not embed Firebase server credentials or send privileged messages from the client. Use Firebase Admin SDK or the FCM HTTP v1 API in a trusted backend.

Never expose service-account credentials, APNs keys, FCM server credentials, or provider REST API keys through client environment variables. Only Firebase client configuration and the VAPID public key are public.