> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-new-flutter-push-notifications.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Getting Started

> Getting started with CometChat Push Notifications — enable push, add providers, configure Firebase and APNs, then pick your platform.

The steps below are common to every platform. Complete them once, then follow your platform guide for app-specific wiring (Gradle, Podfile, manifest, service worker, token registration). Each platform guide links back here.

<Note>
  Which providers and credentials you need depends on your platform: **Android / Web / React Native (Android)** use **FCM**; **iOS / React Native (iOS) / Flutter (iOS)** use **APNs** (plus **APNs VoIP** for calls).
</Note>

## CometChat dashboard setup

1. Go to **Notifications → Settings** and enable **Push Notifications**.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-new-flutter-push-notifications/g-vUqRL3MLOKyDR0/images/80a520bb-pushnotification-enable-e64632d479a2ebba111453b95bd522c6.png?fit=max&auto=format&n=g-vUqRL3MLOKyDR0&q=85&s=385510ca9ef33debfd7df7200ee22234" alt="Enable Push Notifications" width="1202" height="607" data-path="images/80a520bb-pushnotification-enable-e64632d479a2ebba111453b95bd522c6.png" />
</Frame>

2. Click **Add Credentials** and add the provider(s) your platform needs:

   * **FCM** (Android, Web, React Native Android, Flutter Android): upload the Firebase **service account JSON** (Firebase → Project settings → Service accounts → Generate new private key).
   * **APNs Device** (iOS alerts): upload your `.p8` Auth Key with its **Key ID**, **Team ID**, and **Bundle ID**.
   * **APNs VoIP** (iOS calls): add a second provider with the same `.p8` (recommended for CallKit reliability).

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-new-flutter-push-notifications/nWq4GB7hyrxtx-SN/images/c6447647-pushnotification-fcm-68092b02a5361d51ba14b09289da3a78.png?fit=max&auto=format&n=nWq4GB7hyrxtx-SN&q=85&s=6de296585301bf2eb58ebb4e47ddebe5" alt="Upload FCM service account JSON" width="1800" height="1201" data-path="images/c6447647-pushnotification-fcm-68092b02a5361d51ba14b09289da3a78.png" />
</Frame>

3. Copy each **Provider ID** and keep your **App ID**, **Region**, and **Auth Key** handy — you'll add these to your app's constants when registering tokens.

## Firebase configuration

Required for FCM (Android, Web, React Native Android, Flutter Android).

1. In the [Firebase Console](https://console.firebase.google.com/), create or select a project and enable **Cloud Messaging**.
2. Register the app for your platform and download its config file:

<Tabs>
  <Tab title="Android">
    Register your Android package name (the same as `applicationId` in `android/app/build.gradle`) and download **`google-services.json`** into `android/app/`.
  </Tab>

  <Tab title="Web">
    Add a **Web** app (`</>`), copy the **Firebase config** object, and under **Project settings → Cloud Messaging → Web Push certificates** generate/copy the **VAPID key**.
  </Tab>
</Tabs>

3. For the CometChat **FCM** provider, generate a **service account JSON** under **Project settings → Service accounts → Generate new private key** and upload it in the dashboard step above.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-new-flutter-push-notifications/1IZ7BqPcSPMaDmtc/images/firebase-push-notifications.png?fit=max&auto=format&n=1IZ7BqPcSPMaDmtc&q=85&s=ab964489fff5bed10723a7ef40d0a5df" alt="Firebase - Push Notifications" width="3008" height="1586" data-path="images/firebase-push-notifications.png" />
</Frame>

## iOS (Apple) setup

Required for any iOS target (native iOS, React Native iOS, Flutter iOS).

1. **APNs Auth Key (`.p8`)** — in the [Apple Developer Member Center](https://developer.apple.com/membercenter) → **Certificates, Identifiers & Profiles → Keys**, click **+**, enable **Apple Push Notification service (APNs)**, register, and download the `.p8`. Note the **Key ID**, **Team ID**, and your **Bundle ID** — you'll upload these to the CometChat APNs provider(s) in the dashboard step above.
2. **Capabilities** — in Xcode, enable **Push Notifications** and **Background Modes → Remote notifications** (add **Voice over IP** as well if you support calls). Add microphone/camera usage strings to `Info.plist` for CallKit.

<Warning>
  **`.p12` certificates are deprecated.** Apple recommends `.p8` Auth Keys — one key works for all your apps, they never expire, and they are the only format actively supported going forward. Migrate to `.p8` if you haven't already.
</Warning>

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-new-flutter-push-notifications/rS3iPO3B2ZVsVqcv/images/notification-capabilities-apns.png?fit=max&auto=format&n=rS3iPO3B2ZVsVqcv&q=85&s=0d15632f8e905025c28b6a26f185dce0" alt="Enable Push Notifications and Background Modes for APNs" width="2034" height="760" data-path="images/notification-capabilities-apns.png" />
</Frame>

## Choose your platform

After completing the setup above, follow the guide for your platform to wire the client, register tokens after login, and handle taps/calls/badges.

<CardGroup>
  <Card title="Android" icon={<img src="https://mintcdn.com/cometchat-22654f5b-docs-new-flutter-push-notifications/1IZ7BqPcSPMaDmtc/images/icons/android.svg?fit=max&auto=format&n=1IZ7BqPcSPMaDmtc&q=85&s=6aadd78d7a31cef6af85cfa3881f6210" alt="Android" />} href="/notifications/android-push-notifications">
    UI Kit implementation
  </Card>

  <Card title="iOS" icon={<img src="https://mintcdn.com/cometchat-22654f5b-docs-new-flutter-push-notifications/1IZ7BqPcSPMaDmtc/images/icons/swift.svg?fit=max&auto=format&n=1IZ7BqPcSPMaDmtc&q=85&s=d616c83da8f767fab7dd92eb15768cc0" alt="iOS" />} href="/notifications/ios-push-notifications">
    UI Kit implementation
  </Card>

  <Card title="Flutter" icon={<img src="https://mintcdn.com/cometchat-22654f5b-docs-new-flutter-push-notifications/1IZ7BqPcSPMaDmtc/images/icons/flutter.svg?fit=max&auto=format&n=1IZ7BqPcSPMaDmtc&q=85&s=4b7e960f06ae8bdde347bc762bc63288" alt="Flutter" />} href="/notifications/flutter-push-notifications">
    Android + iOS
  </Card>

  <Card title="React Native (Android)" icon={<img src="https://mintcdn.com/cometchat-22654f5b-docs-new-flutter-push-notifications/1IZ7BqPcSPMaDmtc/images/icons/react.svg?fit=max&auto=format&n=1IZ7BqPcSPMaDmtc&q=85&s=4a07894b07962011ade2546d50fca2b0" alt="React Native (Android)" />} href="/notifications/react-native-push-notifications-android">
    UI Kit implementation
  </Card>

  <Card title="React Native (iOS)" icon={<img src="https://mintcdn.com/cometchat-22654f5b-docs-new-flutter-push-notifications/1IZ7BqPcSPMaDmtc/images/icons/react.svg?fit=max&auto=format&n=1IZ7BqPcSPMaDmtc&q=85&s=4a07894b07962011ade2546d50fca2b0" alt="React Native (iOS)" />} href="/notifications/react-native-push-notifications-ios">
    UI Kit implementation
  </Card>

  <Card title="Web" icon={<img src="https://mintcdn.com/cometchat-22654f5b-docs-new-flutter-push-notifications/1IZ7BqPcSPMaDmtc/images/icons/react.svg?fit=max&auto=format&n=1IZ7BqPcSPMaDmtc&q=85&s=4a07894b07962011ade2546d50fca2b0" alt="Web" />} href="/notifications/web-push-notifications">
    UI Kit implementation
  </Card>
</CardGroup>
