How to configure Firebase in Nativescript (Angular)

1. Install Firebase Core

npm install @nativescript/firebase-core

2. Set Up a 🔥 Firebase Project

• In the Firebase Console, create a new project.
• Select Android and/or iOS as your target platform(s).

3. Configure Your App ☎️

• Follow the Firebase setup wizard to specify your app name and properties. This process will generate a google-services.json file for Android.

4. Add Configuration File

App_Resources/Android/src/google-services.json

Note: Ensure the file is placed inside the src directory.

5. Initialize Firebase in Your App

• In your \src\main.ts, add the following code:

import { firebase } from '@nativescript/firebase-core';

// ...rest of your code
await firebase().initializeApp();
// ...rest of your code

6. Clean and Run the Project

ns clean
ns run android

7. Troubleshooting: Initialization Error ⚠️

• If you encounter the following error:

Firebase initialization error: Error: Cannot read properties of undefined (reading 'FirebaseApp')

This usually indicates a problem with the Firebase configuration, often due to missing fingerprint authentication (SHA-1).

---

How to Add SHA-1 Fingerprint

1. In the Firebase Console, go to your project settings and locate the section to download the google-services.json file and add a fingerprint.
2. Generate your SHA-1 fingerprint by running the following command inside the platforms/android directory:

 ./gradlew signingReport

1. The output will include a section similar to:

Variant: debug
Config: debug
Store: /.../.android/debug.keystore
Alias: AndroidDebugKey
SHA1: XX:XX:XX:XXXX:XXXX:XX:...
SHA-256: ...

1. Copy the SHA1 value and add it to your Firebase project.
2. Download the updated google-services.json and repeat step 4 above (replace the file in App_Resources/Android/src/).
3. Run ns clean and ns run android again.

8. Verifying the Integration

• You can verify initialization by logging the result of firebase().initializeApp() in main.ts, or by integrating Firebase Analytics to see events in realtime:

import '@nativescript/firebase-analytics';

await firebase().initializeApp();
firebase().analytics().setAnalyticsCollectionEnabled(true);
firebase().analytics().logEvent('app_start', {});