[docs] Display FCM V1 instructions (#27516)

# Why

We are readying the ability to upload FCM V1 credentials to our website.
Along with that change, we need to update the docs.

# How

This PR:
- Adds a /push-notifications/fcm-credentials page
- Updates the credentials part of the setup page (at
/push-notifications/push-notifications-setup)
- Updates other parts of our docs that previously referenced FCM legacy
credentials

# Screenshots

## /push-notifications/fcm-credentials
![Add Google Service Account Keys using FCM V1 - Expo
Documentation](https://github.com/expo/expo/assets/6455018/20822a5b-ff88-49d8-b399-a899eb93fe2f)

## /push-notifications/push-notifications-setup

![Capture-2024-03-07-225633](https://github.com/expo/expo/assets/6455018/3f378819-fd3e-4ca9-a729-052433d7bd60)

# Test Plan

Read through the docs and make sure they're accurate, and properly
explain how to upload and use FCM V1 credentials.

# Deployment

This PR should not be merged until we allow the ability to upload FCM V1
credentials on expo.dev.

---------

Co-authored-by: Aman Mittal <amandeepmittal@live.com>

docs/constants/navigation.js

@@ -356,6 +356,7 @@ const general = [
     makePage('push-notifications/push-notifications-setup.mdx'),
     makePage('push-notifications/sending-notifications.mdx'),
     makePage('push-notifications/receiving-notifications.mdx'),
+    makePage('push-notifications/fcm-credentials.mdx'),
     makeGroup(
       'Reference',
       [

docs/pages/push-notifications/faq.mdx

@@ -88,7 +88,7 @@ The `ExpoPushToken` will never expire. However, if one of your users uninstalls
 
 This indicates that you have either misconfigured your credentials or didn't configure them at all in your production app. Expo Go uses Expo's credentials, which allows working on notifications in development.
 
-When you build your app for the app stores, you need to generate and use your own credentials. On Android, follow [this guide](/push-notifications/push-notifications-setup/#android). On iOS, this is handled by your [push key](/app-signing/app-credentials/#push-notification-keys) (revoking the push key associated with your app will result in your notifications failing to be delivered. To fix that, add a new push key with `eas credentials`).
+When you build your app for the app stores, you need to generate and use your own credentials. On Android, follow [this guide](/push-notifications/fcm-credentials). On iOS, this is handled by your [push key](/app-signing/app-credentials/#push-notification-keys) (revoking the push key associated with your app will result in your notifications failing to be delivered. To fix that, add a new push key with `eas credentials`).
 
 For more information, see [app signing](/app-signing/app-credentials).
 

docs/pages/push-notifications/fcm-credentials.mdx

@@ -0,0 +1,167 @@
+---
+title: Add Google Service Account Keys using FCM V1
+sidebar_title: Add Android FCM V1 credentials
+description: Learn how to create or use a Google Service Account Key for sending Android Notifications using FCM V1.
+---
+
+import { Step } from '~/ui/components/Step';
+import ImageSpotlight from '~/components/plugins/ImageSpotlight';
+import { Tab, Tabs } from '~/ui/components/Tabs';
+
+## Create a new Google Service Account Key
+
+Here are the steps to configure a new Google Service Account Key in EAS for sending Android Notifications using FCM V1.
+
+<Step label="1">
+  Create a new Firebase project for your app in the [Firebase Console](https://console.firebase.google.com). If you already have a Firebase project for your app, continue to the next step.
+
+  <ImageSpotlight
+    alt="Create a project in the Firebase Console"
+    src="/static/images/creating-google-service-account/fcm-v1/new-service-account/01-new-firebase-project.png"
+    style={{ maxWidth: 800 }}
+  />
+</Step>
+
+<Step label="2">
+  In the Firebase console, open **Project settings** > [**Service accounts**](https://console.firebase.google.com/project/_/settings/serviceaccounts/adminsdk) for your project.
+
+  <ImageSpotlight
+    alt="Service accounts settings tab in Firebase console"
+    src="/static/images/creating-google-service-account/fcm-v1/new-service-account/02-manage-service-accounts.png"
+    style={{ maxWidth: 800 }}
+  />
+</Step>
+
+<Step label="3">
+  Click **Generate New Private Key**, then confirm by clicking **Generate Key**. Securely store the JSON file containing the private key.
+
+  <ImageSpotlight
+    alt="Generate a new private key in the Firebase Console"
+    src="/static/images/creating-google-service-account/fcm-v1/new-service-account/03-generate-key.png"
+    style={{ maxWidth: 800 }}
+  />
+</Step>
+
+<Step label="4">
+  Upload the JSON file to EAS and configure it for sending Android notifications. This can be done using EAS CLI or in [Expo dashboard](https://expo.dev).
+
+  <Tabs tabs={["EAS CLI", "expo.dev"]}>
+    <Tab>
+      - Run `eas credentials`
+      - Select `Android` > `production` > `Google Service Account`
+      - Select `Manage your Google Service Account Key for Push Notifications (FCM V1)`
+    </Tab>
+    <Tab>
+      - Under **Project settings**, click [Credentials](https://expo.dev/accounts/[account]/projects/[project]/credentials) in the navigation menu
+      - For **Android**, click **Add Application Identifier** or select an existing **Application identifier**
+      - Under **Service Credentials**, find **FCM V1 service account key**
+
+      <ImageSpotlight
+        alt="Project credentials page on expo.dev"
+        src="/static/images/creating-google-service-account/fcm-v1/new-service-account/04-upload-credential-1.png"
+        style={{ maxWidth: 800 }}
+      />
+      - Click **Add a service account key** 
+      - Under **Upload new key**, upload your JSON credential and click **Save**
+
+      <ImageSpotlight
+        alt="Select service account key file to upload"
+        src="/static/images/creating-google-service-account/fcm-v1/new-service-account/04-upload-credential-2.png"
+        style={{ maxWidth: 800 }}
+      />
+      <ImageSpotlight
+        alt="Save the service account key file to the project"
+        src="/static/images/creating-google-service-account/fcm-v1/new-service-account/04-upload-credential-3.png"
+        style={{ maxWidth: 800 }}
+      />
+    </Tab>
+  </Tabs>
+</Step>
+
+<Step label="5">
+  You're all set! You can now send notifications to Android devices via Expo Push Notifications using the FCM V1 protocol.
+
+  <ImageSpotlight
+    alt="Service account key successfully uploaded"
+    src="/static/images/creating-google-service-account/fcm-v1/new-service-account/05-upload-credential-complete.png"
+    style={{ maxWidth: 800 }}
+  />
+</Step>
+
+## Use an existing Google Service Account Key
+
+<Step label="1">
+  Open the [IAM Admin page](https://console.cloud.google.com/iam-admin/iam?authuser=0) in Google Cloud Console. In the Permissions tab, locate the **Principal** you intend to modify and click the pencil icon for **Edit Principal**.
+
+  <ImageSpotlight
+    alt="Edit Principal in IAM Admin page in Google Cloud Console"
+    src="/static/images/creating-google-service-account/fcm-v1/existing-service-account/01-iam-admin-page.png"
+    style={{ maxWidth: 800 }}
+  />
+</Step>
+
+<Step label="2">
+  Click **Add Role** and select the **Firebase Messaging API Admin** role from the dropdown. Click **Save**.
+
+  <ImageSpotlight
+    alt="Assign roles"
+    src="/static/images/creating-google-service-account/fcm-v1/existing-service-account/02-add-role-1.png"
+    style={{ maxWidth: 800 }}
+  />
+  <ImageSpotlight
+    alt="Select the Firebase Messaging API Admin role"
+    src="/static/images/creating-google-service-account/fcm-v1/existing-service-account/02-add-role-2.png"
+    style={{ maxWidth: 800 }}
+  />
+  <ImageSpotlight
+    alt="Save the role assignment"
+    src="/static/images/creating-google-service-account/fcm-v1/existing-service-account/02-add-role-3.png"
+    style={{ maxWidth: 800 }}
+  />
+</Step>
+
+<Step label="3">
+  You have to specify to EAS which JSON credential file to use for sending FCM V1 notifications, using EAS CLI or in [Expo dashboard](https://expo.dev). You can upload a new JSON file or select a previously uploaded file.
+
+  <Tabs tabs={["EAS CLI", "expo.dev"]}>
+    <Tab>
+      - Run `eas credentials`
+      - Select `Android` > `production` > `Google Service Account`
+      - Select `Manage your Google Service Account Key for Push Notifications (FCM V1)`
+    </Tab>
+    <Tab>
+      - Under **Project settings**, click [Credentials](https://expo.dev/accounts/[account]/projects/[project]/credentials) in the navigation menu
+      - For **Android**, click **Add Application Identifier** or select an existing **Application identifier**
+      - Under **Service Credentials**, find **FCM V1 service account key**
+
+      <ImageSpotlight
+        alt="Project credentials page on expo.dev"
+        src="/static/images/creating-google-service-account/fcm-v1/new-service-account/04-upload-credential-1.png"
+        style={{ maxWidth: 800 }}
+      />
+      - Click **Add a service account key**
+      - Upload your JSON credential and click **Save**
+
+      <ImageSpotlight
+        alt="Select service account key file to upload"
+        src="/static/images/creating-google-service-account/fcm-v1/existing-service-account/03-upload-credential-2.png"
+        style={{ maxWidth: 800 }}
+      />
+      <ImageSpotlight
+        alt="Save the service account key file to the project"
+        src="/static/images/creating-google-service-account/fcm-v1/existing-service-account/03-upload-credential-3.png"
+        style={{ maxWidth: 800 }}
+      />
+    </Tab>
+  </Tabs>
+</Step>
+
+<Step label="4">
+  You're all set! You can now send notifications to Android devices via Expo Push Notifications using the FCM V1 protocol.
+
+  <ImageSpotlight
+    alt="Service account key successfully uploaded"
+    src="/static/images/creating-google-service-account/fcm-v1/existing-service-account/04-upload-credential-complete.png"
+    style={{ maxWidth: 800 }}
+  />
+</Step>

docs/pages/push-notifications/push-notifications-setup.mdx

@@ -7,8 +7,7 @@ description: Learn how to setup push notifications, get credentials for developm
 import { Terminal } from '~/ui/components/Snippet';
 import { Step } from '~/ui/components/Step';
 import ImageSpotlight from '~/components/plugins/ImageSpotlight';
-
-> Expo Notifications only supports the **Cloud Messaging API (Legacy)** key at this time. This key is deprecated by Firebase. However, it will continue to work until June 20, 2024. We will provide information on migrating to the new v1 key in the future.
+import { Tab, Tabs } from '~/ui/components/Tabs';
 
 To utilize Expo's push notification service, you must configure your app by installing a set of libraries, implementing functions to handle notifications, and setting up credentials for Android and iOS. Once you have completed the steps mentioned in this guide, you'll be able to test sending and receiving notifications on a device.
 
@@ -183,92 +182,27 @@ One advantage of attributing the Expo push token to your project's ID is that it
 
 <Step label="3">
 
-## Get Credentials for development builds
+## Get credentials for development builds
 
 For Android and iOS, there are different requirements to set up your credentials.
 
-### Android
-
-For Android, you need to configure **Firebase Cloud Messaging (FCM)** to get your credentials and set up your Expo project. It is required for all Android apps using Expo SDK.
-
-> **warning** FCM is not currently available for `expo-notifications` on iOS.
-
-#### Setting up FCM
-
-1. To create a Firebase project, go to the [Firebase console](https://console.firebase.google.com/) and click on **Add project**.
-
-2. In the console, click the setting icon next to **Project overview** and open **Project settings**. Then, under **Your apps**, click the Android icon to open **Add Firebase to your Android app** and follow the steps. **Make sure that the Android package name you enter is the same as the value of `android.package` from your app.json.**
-
-3. After registering the app, download the **google-services.json** file and place it in your project's root directory.
-
-   > The **google-services.json** file contains unique and non-secret identifiers of your Firebase project. For more information, see [Understand Firebase Projects](https://firebase.google.com/docs/projects/learn-more#config-files-objects).
-
-4. In **app.json**, add an `android.googleServicesFile` field with the relative path to the downloaded **google-services.json** file. If you placed it in the root directory, the path is:
-
-   ```json app.json
-   {
-     "android": {
-       "googleServicesFile": "./google-services.json"
-     }
-   }
-   ```
-
-5. For push notifications to work correctly, Firebase requires the API key to either be unrestricted (the key can call any API) or have access to both **Firebase Cloud Messaging API** and **Firebase Installations API**. The API key is found under the `client.api_key.current_key` field in **google-services.json** file:
-
-   ```json google-services.json
-   {
-     "client": [
-       {
-         "api_key": [
-           {
-             "current_key": "<your Google Cloud Platform API key>"
-           }
-         ]
-       }
-     ]
-   }
-   ```
-
-6. Firebase also creates an API key in the Google Cloud Platform Credentials console with a name like **Android key (auto-created by Firebase)**. This could be a different key than the one found in **google-services.json**.
-
-7. To be sure that both the `current_key` and the **Android key** in the Credentials console are the same, go to the [Google Cloud API Credentials console](https://console.cloud.google.com/apis/credentials) and click on **Show key** to verify their value. It will be marked as **unrestricted**.
-
-   > Firebase projects with multiple Android apps might contain duplicated data under the `client` array in the **google-services.json**. This can cause issues when the app is fetching the push notification token. **Make sure to only have one client object with the correct keys and metadata in google-services.json**.
+<Tabs tabs={["Android", "iOS"]}>
+  <Tab>
+    For Android, you need to configure **Firebase Cloud Messaging (FCM) V1** to get credentials and set up your Expo project.
 
-Now you can re-build the development build using the `eas build` command. At this point, if you need to create a development build, see [create a development build for a device](/develop/development-builds/create-a-build/#create-a-development-build-for-the-device).
+    Follow the steps in [Add Android FCM V1 credentials](/push-notifications/fcm-credentials) to set up your credentials.
+  </Tab>
+  <Tab>
+    > **warning** A paid Apple Developer Account is required to generate credentials.
 
-#### Upload server credentials
+    For iOS, make sure you have [registered your iOS device](/develop/development-builds/create-a-build/#create-a-development-build-for-the-device) on which you want to test before running the `eas build` command for the first time.
 
-For Expo to send push notifications from our servers and use your credentials, you'll have to upload your secret server key to your project's Expo dashboard.
+    If you create a development build for the first time, you'll be asked to enable push notifications. Answer yes to the following questions when prompted by the EAS CLI:
 
-1. In the Firebase console, next to **Project overview**, click gear icon to open **Project settings**.
-
-2. Click on the **Cloud Messaging** tab in the Settings pane.
-
-3. Copy the token from **Cloud Messaging API (Legacy)** > **Server key**.
-
-   > Server Key is only available in **Cloud Messaging API (Legacy)**, which is disabled by default. <br/> Enable it by clicking the three-dot menu > **Manage API in Google Cloud Console** and following the steps in the console. Once the legacy messaging API is enabled, you should see Server Key in that section.
-
-   <ImageSpotlight
-     alt="Getting the server key from Firebase console's Cloud messaging tab."
-     src="/static/images/notifications/server-key-from-fcm.png"
-     style={{ maxWidth: 760 }}
-   />
-
-4. In your [Expo account's](https://expo.dev/) dashboard, select your project, and click on **Credentials** in the navigation menu. Then, click on your **Application Identifier** that follows the pattern: `com.company.app`.
-
-5. Under **Service Credentials** > **FCM (Legacy) Server Key**, click **Add a FCM (Legacy) Server Key** > **Google Cloud Messaging Token** and add the **Server key** from **step 3**.
-
-### iOS
-
-> **warning** A paid Apple Developer Account is required to generate credentials.
-
-For iOS, make sure you have [registered your iOS device](/develop/development-builds/create-a-build/#create-a-development-build-for-the-device) on which you want to test before running the `eas build` command for the first time.
-
-If you create a development build for the first time, you'll be asked to enable push notifications. Answer yes to the following questions when prompted by the EAS CLI:
-
-- Setup Push Notifications for your project
-- Generating a new Apple Push Notifications service key
+    - Setup Push Notifications for your project
+    - Generating a new Apple Push Notifications service key
+  </Tab>
+</Tabs>
 
 <br />
 
@@ -277,7 +211,6 @@ If you create a development build for the first time, you'll be asked to enable
 </Step>
 
 <Step label="4">
-
 ## Test using the push notifications tool
 
 After creating and installing the development build, you can use [Expo's push notifications tool](https://expo.dev/notifications) to quickly send a test notification to your device.
@@ -292,18 +225,17 @@ After creating and installing the development build, you can use [Expo's push no
 
 4. Click on the **Send a Notification** button.
 
-<ImageSpotlight
-  alt="Expo push notifications tool overview."
-  src="/static/images/notifications/push-notifications-tool-overview.png"
-  style={{ maxWidth: 1200 }}
-/>
+    <ImageSpotlight
+      alt="Expo push notifications tool overview."
+      src="/static/images/notifications/push-notifications-tool-overview.png"
+      style={{ maxWidth: 1200 }}
+    />
 
 After sending the notification from the tool, you should see the notification on your device. Below is an example of an Android device receiving a push notification.
 
-<ImageSpotlight
-  alt="An Android device receiving a push notification."
-  src="/static/images/notifications/notification-on-android.png"
-  style={{ maxWidth: 360 }}
-/>
-
-</Step>
+  <ImageSpotlight
+    alt="An Android device receiving a push notification."
+    src="/static/images/notifications/notification-on-android.png"
+    style={{ maxWidth: 360 }}
+  />
+</Step>

docs/pages/push-notifications/sending-notifications-custom.mdx

@@ -26,7 +26,7 @@ After getting the native device token, you can start implementing the servers. B
 
 Communicating with FCM is done by sending a POST request. However, before sending or receiving any notifications, you'll need to follow the steps to [configure FCM](/push-notifications/push-notifications-setup/#android) to configure FCM and get your `FCM-SERVER-KEY`.
 
-> The following example uses FCM's legacy HTTP API, since the credentials setup for that is the same as it is for the Expo notifications service, so there's no additional work needed on your part. If you'd rather use FCM's HTTP v1 API, see [Firebase official documentation](https://firebase.google.com/docs/cloud-messaging/migrate-v1).
+> The following example uses FCM's legacy HTTP API, since the credentials setup for that is the same as it is for the Expo notifications service, so there's no additional work needed on your part. If you'd rather use FCM's HTTP V1 API, see [Firebase official documentation](https://firebase.google.com/docs/cloud-messaging/migrate-v1).
 
 ```js
 await fetch('https://fcm.googleapis.com/fcm/send', {

docs/pages/push-notifications/sending-notifications.mdx

@@ -228,7 +228,7 @@ Inside both push tickets and push receipts, look for a `details` object with an
 
 - `InvalidCredentials`: Your push notification credentials for your standalone app are invalid (for example, you may have revoked them).
 
-  - **Android**: Make sure that you have correctly uploaded the server key from the Firebase Console as specified in [uploading FCM server credentials](/push-notifications/push-notifications-setup/#upload-server-credentials).
+  - **Android**: Make sure that you have correctly uploaded the server key from the Firebase Console as specified in [uploading FCM V1 server credentials](/push-notifications/fcm-credentials).
   - **iOS**: Run `eas credentials` and follow the prompts to regenerate new push notification credentials. If you revoke an APN key, all apps that rely on that key will no longer be able to send or receive push notifications until you upload a new key to replace it. Uploading a new APN key will **not** change your users' Expo Push Tokens. Sometimes, these errors will contain further details claiming an `InvalidProviderToken` error. This is actually tied to both your APN key **and** your provisioning profile. To resolve this error, you should rebuild the app and regenerate a new push key and provisioning profile.
 
 > For a better understanding of iOS credentials, including push notification credentials, read our [App Signing docs](/app-signing/app-credentials#ios).