Firebase Admin refuses to initialize on a Next.js application that has been deployed on Firebase

Question

Firebase Admin refuses to initialize on a Next.js application that has been deployed on Firebase

Currently, I am facing an issue while attempting to deploy a Next JS app to Firebase hosting using the web framework option provided by firebase-tools. The problem arises when trying to initialize firebase-admin as it seems to never properly initialize when fetching data or performing any related tasks. Here is how I am initializing it, which works fine locally:

firebase/firebaseAdminInit.ts

import admin from 'firebase-admin';

export function GetFirebaseAdminApp() {
    if(admin.apps.length === 0){
        const app = admin.initializeApp({
            credential:admin.credential.cert({
                clientEmail: process.env.NEXT_FIREBASE_CLIENT_EMAIL as string,
                projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID as string,
                privateKey: process.env.NEXT_FIREBASE_PRIVATE_KEY as string
            }),
            databaseURL: process.env.NEXT_PUBLIC_FIREBASE_DATABASE_URL as string,
            storageBucket: process.env.NEXT_PUBLIC_STORAGE_BUCKET as string
        });
        return app;
    }
    return admin.app();
}

How I use it:

lib/repository/products.ts

import { getFirelord, getFirestore, getDocs, query, orderBy, limit, offset, getCountFromServer, addDoc, updateDoc, getDoc, deleteDoc } from "firelord";
import { ProductsMetaType } from "./dtoModels";
import { Product, ProductRequest, productToDomain, productType_toDto } from "../domain/Products";
import { GetFirebaseAdminApp } from "../../firebase/firebaseAdminInit";
import { PagedQuery, PagedResult } from "../domain/PagedQueries";
import formidable from "formidable";
import { DeleteImage, UploadImage } from "./objectStorage";

const app = getFirestore(GetFirebaseAdminApp()); //This should return the firebase-admin app
const productFl = getFirelord<ProductsMetaType>(app, 'Products');

export async function GetAllProducts() {
    const docs =
        await getDocs(productFl.collection()).then(qSnapshot =>
            qSnapshot.docs.map(docSnapshot => docSnapshot.data())
        ).then(dtoArr => dtoArr.map(productToDomain))
    return docs;
}

Upon logging the app in the firebaseAdminInit.ts file, I can see that there is some value present, not null or undefined. However, when used elsewhere, it fails with an error stating that it's not initialized:

FirebaseAppError: The default Firebase app does not exist. Make sure you call initializeApp() before using any of the Firebase services.

javascript firebase next.js firebase-hosting firebase-admin

Answer 1

Answer №1

When attempting to incorporate firebase-admin into Next.js API Routes, I encountered a similar issue. Your workaround proved instrumental in identifying the problem. It seems that directly calling admin.app() or getApp() triggers errors in firebase functions. Instead, utilizing getApps()[0] resolves the issue, although the exact reason remains unclear.

The following code enabled me to successfully import adminAuth and adminFirestore from API Routes:

lib/firebase-admin.ts

import { AppOptions, cert, getApps, initializeApp, ServiceAccount } from "firebase-admin/app";
import { getAuth } from "firebase-admin/auth";
import { getFirestore } from "firebase-admin/firestore";

const credentials: ServiceAccount = {
  projectId: process.env.FIREBASE_ADMIN_SDK_FIREBASE_PROJECT_ID,
  privateKey: process.env.FIREBASE_ADMIN_SDK_PRIVATE_KEY?.replace(/\\n/g, "\n"),
  clientEmail: process.env.FIREBASE_ADMIN_SDK_CLIENT_EMAIL,
};

const options: AppOptions = {
  credential: cert(credentials),
};

export const initializeFirebaseAdmin = () => {
  const firebaseAdminApps = getApps();
  if (firebaseAdminApps.length > 0) {
    return firebaseAdminApps[0];
  }

  return initializeApp(options);
}

const firebaseAdmin = initializeFirebaseAdmin();

export const adminAuth = getAuth(firebaseAdmin);
export const adminFirestore = getFirestore(firebaseAdmin);

Answer 2

When attempting to incorporate firebase-admin into Next.js API Routes, I encountered a similar issue. Your workaround proved instrumental in identifying the problem. It seems that directly calling admin.app() or getApp() triggers errors in firebase functions. Instead, utilizing getApps()[0] resolves the issue, although the exact reason remains unclear.

The following code enabled me to successfully import adminAuth and adminFirestore from API Routes:

lib/firebase-admin.ts

import { AppOptions, cert, getApps, initializeApp, ServiceAccount } from "firebase-admin/app";
import { getAuth } from "firebase-admin/auth";
import { getFirestore } from "firebase-admin/firestore";

const credentials: ServiceAccount = {
  projectId: process.env.FIREBASE_ADMIN_SDK_FIREBASE_PROJECT_ID,
  privateKey: process.env.FIREBASE_ADMIN_SDK_PRIVATE_KEY?.replace(/\\n/g, "\n"),
  clientEmail: process.env.FIREBASE_ADMIN_SDK_CLIENT_EMAIL,
};

const options: AppOptions = {
  credential: cert(credentials),
};

export const initializeFirebaseAdmin = () => {
  const firebaseAdminApps = getApps();
  if (firebaseAdminApps.length > 0) {
    return firebaseAdminApps[0];
  }

  return initializeApp(options);
}

const firebaseAdmin = initializeFirebaseAdmin();

export const adminAuth = getAuth(firebaseAdmin);
export const adminFirestore = getFirestore(firebaseAdmin);

Answer 3

Answer №2

It seems that attempting to retrieve the app by checking if it has already been initialized or defining a function to determine the environment (development or production) always leads to an error. In order for firebase-admin to run on Firebase functions, it must be initialized in the following manner:

const app = admin.initializeApp({
    credential:admin.credential.cert({
        clientEmail: process.env.NEXT_FIREBASE_CLIENT_EMAIL as string,
        projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID as string,
        privateKey: process.env.NEXT_FIREBASE_PRIVATE_KEY as string
    }),
    databaseURL: process.env.NEXT_PUBLIC_FIREBASE_DATABASE_URL as string,
    storageBucket: process.env.NEXT_PUBLIC_STORAGE_BUCKET as string
})

This setup results in errors when testing locally (in development), but functions correctly in production. It can be frustrating to have to repeatedly adjust this code block for deployment or local testing.

I've utilized dependency injection to pass the app to functions requiring firebase-admin, exporting them from the file where initialization occurs. I haven't yet tried simply retrieving the app using admin.app(), which may also work.

Currently, I'm encountering numerous issues with firebase functions related to parsing request bodies and problems with authorization and cookie names. As such, I would advise waiting for better web framework support for Next.js before deploying on Firebase like myself.

Answer 4

It seems that attempting to retrieve the app by checking if it has already been initialized or defining a function to determine the environment (development or production) always leads to an error. In order for firebase-admin to run on Firebase functions, it must be initialized in the following manner:

const app = admin.initializeApp({
    credential:admin.credential.cert({
        clientEmail: process.env.NEXT_FIREBASE_CLIENT_EMAIL as string,
        projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID as string,
        privateKey: process.env.NEXT_FIREBASE_PRIVATE_KEY as string
    }),
    databaseURL: process.env.NEXT_PUBLIC_FIREBASE_DATABASE_URL as string,
    storageBucket: process.env.NEXT_PUBLIC_STORAGE_BUCKET as string
})

This setup results in errors when testing locally (in development), but functions correctly in production. It can be frustrating to have to repeatedly adjust this code block for deployment or local testing.

I've utilized dependency injection to pass the app to functions requiring firebase-admin, exporting them from the file where initialization occurs. I haven't yet tried simply retrieving the app using admin.app(), which may also work.

Currently, I'm encountering numerous issues with firebase functions related to parsing request bodies and problems with authorization and cookie names. As such, I would advise waiting for better web framework support for Next.js before deploying on Firebase like myself.

Firebase Admin refuses to initialize on a Next.js application that has been deployed on Firebase

Answer №1

Answer №2

Similar questions

The A-frame advances in the direction of the camera's view

Utilizing Moment.js in tandem with Vuexfire

Javascript textfield button function malfunctioning

Unexpected error encountered in the return value from the filter function in AngularJS

Populating a HTML document with data retrieved from an AJAX request

Challenge of integrating React Router with Express GET requests

Ensuring jQuery filter() works seamlessly with Internet Explorer versions 6, 7, and 8

Obtain the text content in cases where the DOM is missing both the title and value fields

Leveraging Angular for REST API Calls with Ajax

When the mouse is clicked, rotate the object along its axis using OBJ Loader in THREE.js

Display a JavaScript dialogue box containing a PHP variable

Avoid altering the state directly; utilize setState() to update it instead. Remember to follow react/no-direct-mutation

Saving Arrays through an Input Form in JavaScript

Despite the presence of a producer and topic, sending Kafka messages is proving to be a challenge

Issue with scrolling feature in div

Import HTML document into a Bootstrap Popup

Concealing the print option while utilizing PDFObject in conjunction with PDF.js

Transferring information between Express and React through the Contentful API

Tips for enabling Angular JS draggable elements on tablet devices with touch functionality

Why does running "npx create-next-app@12 my-app" result in a Next.js project with version 13 of "next" being used?