Setup Push Notifications

Push notifications allow you to keep your users engaged and informed. This guide will walk you through the process of setting up push notifications for your Expo project, from creating a Firebase project to configuring your backend and mobile app.

1. Create a Firebase Project

The first step is to create a project in the Firebase Console.

1. Go to the Firebase Console.
2. Click Add project.
3. Enter a project name (e.g., My Awesome App) and click Continue.
4. (Optional) Enable Google Analytics for your project and click Continue.
5. Click Create project and wait for it to be ready.

2. Enable Cloud Messaging

Cloud Messaging is typically enabled by default, but you should verify it.

1. In the left-hand menu, navigate to Project Settings (the gear icon).
2. Click on the Cloud Messaging tab.
3. Ensure that the Firebase Cloud Messaging API (V1) is enabled.

3. Generate Service Account Key

To allow your backend to send notifications, you need a service account key.

1. In Project Settings, go to the Service accounts tab.
2. Under "Firebase Admin SDK", ensure PHP is selected.
3. Click Generate new private key.
4. A warning modal will appear; click Generate key.
5. A .json file will be downloaded to your computer. Keep this file secure!

4. Backend Configuration (Laravel)

Once you have the service account JSON file, you need to place it in your backend server so it can authenticate with Firebase.

Placement

1. Rename the downloaded JSON file to firebase-auth.json.
2. Move the file to your admin-panel:
   • Path: admin-panel/storage/app/firebase-auth.json

Verification

The NotificationSenderService in the admin-panel is pre-configured to look for this file at that specific path.

// admin-panel/app/Services/NotificationSenderService.php
public function __construct()
{
    $credentialsPath = storage_path('app/firebase-auth.json');

    if (file_exists($credentialsPath)) {
        $factory = (new Factory)->withServiceAccount($credentialsPath);
        $this->messaging = $factory->createMessaging();
    }
}

5. Configure Mobile App (Expo)

To link your Expo app to Firebase, you need to provide the configuration files for both platforms.

Register Each App Separately

Expo and Flutter can use one Firebase project. Register each Android package name and iOS bundle ID as a separate Firebase app in that project. For example, com.example.expo and com.example.flutter need separate Firebase Android app registrations, even when they use the same Firebase project.

Download configuration files only for the app registration that matches the package name or bundle ID in app.config.ts. Do not reuse another app's google-services.json or GoogleService-Info.plist.

1. Download Configuration Files

In the Firebase Console, add your Android and iOS apps to the project:

• Android:

  1. Click the Android icon in the Project Overview.
  2. Enter your package name (e.g., com.soewidiputra.expolate.mobile).
  3. Register the app and download google-services.json.
  4. Move google-services.json to mobile-app/google-services.json.

• iOS:

  1. Click Add app and select iOS.
  2. Enter your bundle ID (e.g., com.soewidiputra.expolate.mobile).
  3. Register the app and download GoogleService-Info.plist.
  4. Move GoogleService-Info.plist to mobile-app/GoogleService-Info.plist.

2. Update app.json

Ensure your mobile-app/app.config.ts is correctly configured with these files and the expo-notifications plugin:

{
  "expo": {
    "ios": {
      "bundleIdentifier": "com.soewidiputra.expolate.mobile",
      "googleServicesFile": "./GoogleService-Info.plist"
    },
    "android": {
      "package": "com.soewidiputra.expolate.mobile",
      "googleServicesFile": "./google-services.json"
    },
    "plugins": [
      [
        "expo-notifications",
        {
          "icon": "./assets/images/notification-icon.png",
          "color": "#ffffff",
          "defaultChannel": "default"
        }
      ]
    ]
  }
}

3. Using the Hook

The project includes a usePushNotifications hook that handles permission requests, token generation, and syncing to the backend.

// mobile-app/hooks/use-push-notifications.ts
import { usePushNotifications } from '@/hooks/use-push-notifications';

// In your root component or screen
const { registerForPushNotificationsAsync } = usePushNotifications();

// Trigger registration (e.g., in onboarding or login)
useEffect(() => {
  registerForPushNotificationsAsync();
}, []);

The hook automatically sends the token to the backend via ENDPOINTS.AUTH_FCM_TOKEN.

6. iOS Specific Setup

iOS requires an APNs key for Firebase to communicate with Apple's push service.

1. APNs Authentication Key:
   • Go to the Apple Developer Portal.
   • Create a new Key for "Apple Push Notifications service (APNs)".
   • Download the .p8 file.
   • In the Firebase Console, go to Project Settings > Cloud Messaging.
   • Upload the .p8 file under Apple app shares.
2. EAS Credentials:
   • If using EAS, run eas credentials to ensure your push notifications are correctly configured in the cloud.

7. Testing Notifications

You can test notifications using Laravel Tinker or the Firebase Console.

Via Laravel Tinker

php artisan tinker

$user = App\Models\User::first();
app(App\Services\NotificationSenderService::class)->sendToUser($user, "Hello!", "This is a test notification");

Via Firebase Console

1. In the Firebase Console, go to Engage > Messaging.
2. Click Create your first campaign.
3. Select Firebase Cloud Messaging messages.
4. Fill in the title and body, then click Send test message.
5. Enter the device token (you can find this in your app's logs or in the device_tokens table in the database).
6. Click Test.