How to configure Firebase in Nativescript (Angular)

Nico Alani -✨🛸☄️ — Tue, 15 Jul 2025 23:25:15 +0000

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

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

 ./gradlew signingReport

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: ...

Copy the SHA1 value and add it to your Firebase project.
Download the updated google-services.json and repeat step 4 above (replace the file in App_Resources/Android/src/).
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', {});

DEV Community: Nico Alani -✨🛸☄️

How to configure Firebase in Nativescript (Angular)

1. Install Firebase Core

2. Set Up a 🔥 Firebase Project

3. Configure Your App ☎️

4. Add Configuration File

5. Initialize Firebase in Your App

6. Clean and Run the Project

7. Troubleshooting: Initialization Error ⚠️

How to Add SHA-1 Fingerprint

8. Verifying the Integration