Nuxt 3: Firebase: Need to provide options, when not being deployed to hosting via source. (app/no-options)

Question

I have a firebase.client.ts file inside plugins folder:

import { initializeApp } from "firebase/app";
import { getAuth } from 'firebase/auth';

const firebaseConfig = {
  /** Configuration here.. */
};


import { defineNuxtPlugin } from '#app';


export default defineNuxtPlugin((nuxtApp) => {
  // Initialize Firebase
  const app = initializeApp(firebaseConfig);

  // Get Firebase Authentication instance
  const auth = getAuth(app);
  nuxtApp.$auth = auth;
});

And in nuxt.config.ts I have this line:

plugins: [
    { src: '~/plugins/firebase.client.ts'},
  ],

However, when I try to build yarn build and yarn preview. I am getting this error:

What could be wrong in my code? Your responses are much appreciated. Thank you in advance :)

Answer 1

Below is a similar approach i use to handle my own Firebase plugin. NOTE: make sure the page using the firebase lib is has ssr disabled

~/plugins/firebase-plugin.ts

import { FirebaseOptions, initializeApp } from "firebase/app";
import {
  FacebookAuthProvider,
  GoogleAuthProvider,
  PopupRedirectResolver,
  getAuth,
  signInWithEmailAndPassword,
  signInWithPopup,
} from "firebase/auth";

export default defineNuxtPlugin((nuxtApp) => {
  if (process.client) {
    const app = initializeApp(firebaseConfig as FirebaseOptions);
    const auth = getAuth(app);

    const googleAuth = new GoogleAuthProvider();
    const facebookAuth = new FacebookAuthProvider();

    return {
      provide: {
        firebase: {
          app,
          auth,

          signInWithEmailAndPassword: async (email: string, password: string) =>
            signInWithEmailAndPassword(auth, email, password),

          signInWithGoogle: async (
            resolver?: PopupRedirectResolver | undefined
          ) => signInWithPopup(auth, googleAuth),

          signInWithFacebook: async (
            resolver?: PopupRedirectResolver | undefined
          ) => signInWithPopup(auth, facebookAuth),
          // ...
        },
      },
    };
  }
});

You can create a composable to expose it anywhere on a client-side rendered page

~/composables/useFirebase.ts

export function useFirebase() {
  const { $firebase } = useNuxtApp();

  return {
    ...$firebase,
  };
}