How to Initialize a Firebase app in the new modular Web SDK in Next.js

Previously in Version 8

Most devs migrating to the new modular approach for delivering the firebase API typically have this code snippet that initializes their firebase app.

We'll start off by exporting the most basic service, being firebase/auth.

//initFirebase.ts
require("firebase/auth");

import firebase from "firebase/app";

const config = {
  // ...various env variables
};

export default function initializeFirebase() { 
  if (firebase.apps.length === 0) {
    return firebase.initializeApp(config);
  }
}

export const firebaseAuth = firebase.auth;

Now in V9

In the latest version, we can re-factor the snippet into something like this:

// initFirebase.ts

import { FirebaseOptions, getApp, initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";

const config: FirebaseOptions = {
  // ...various env variables
};

function createFirebaseApp(config: FirebaseOptions) {
  try {
    return getApp();
  } catch {
    return initializeApp(config);
  }
}

const firebaseApp = createFirebaseApp(firebaseConfig);
export const firebaseAuth = getAuth(firebaseApp);

Bonus: Initialize the latest Admin SDK version 10 for API routes

Similarly for the admin SDK, we create a similar function, but we also handle a check against the number of apps being initialized.

// initFirebaseAdmin.ts

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

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

const options: AppOptions = {
  credential: cert(credentials),
  databaseURL: process.env.databaseURL,
};

function createFirebaseAdminApp(config: AppOptions) {
  if (getApps().length === 0) {
    return initializeApp(config);
  } else {
    return getApp();
  }
}

const firebaseAdmin = createFirebaseAdminApp(options);
export const adminAuth = getAuth(firebaseAdmin);

Now we can make use of adminAuth in any API route handler to manage authenticated users.

And that's really it!

Blog

How to Initialize a Firebase app in the new modular Web SDK in Next.js

Thinh Nguyen

Previously in Version 8

Now in V9

Bonus: Initialize the latest Admin SDK version 10 for API routes

Join Our Newsletter. No Spam, Only the good stuff.

Related