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

[kevinnammour]

It was working just fine, and suddenly it started giving me this error:
FirebaseError: Firebase: Need to provide options, when not being deployed to hosting via source. (app/no-options).

This is my initAuth.ts code and all the env vars are in the .env.local file:

import { init } from "next-firebase-auth";

const initAuth = () => {
  init({
    authPageURL: "/auth",
    appPageURL: "/",
    loginAPIEndpoint: "/api/login",
    logoutAPIEndpoint: "/api/logout",
    onLoginRequestError: (err) => {
      console.error(err);
    },
    onLogoutRequestError: (err) => {
      console.error(err);
    },
    firebaseAdminInitConfig: {
      credential: {
        projectId: process.env.FIREBASE_ADMIN_PROJECT_ID as string,
        clientEmail: process.env.FIREBASE_ADMIN_CLIENT_EMAIL as string,
        privateKey: process.env.FIREBASE_ADMIN_PRIVATE_KEY as string,
      },
      databaseURL: process.env.NEXT_PUBLIC_FIREBASE_DATABASE_URL as string,
    },
    firebaseClientInitConfig: {
      apiKey: process.env.NEXT_PUBLIC_FIREBASE_CLIENT_API_KEY as string,
      authDomain: process.env.NEXT_PUBLIC_FIREBASE_CLIENT_AUTH_DOMAIN,
      projectId: process.env.NEXT_PUBLIC_FIREBASE_CLIENT_PROJECT_ID,
      databaseURL: process.env.NEXT_PUBLIC_FIREBASE_DATABASE_URL,
      storageBucket: process.env.NEXT_PUBLIC_FIREBASE_CLIENT_STORAGE_BUCKET,
      messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_CLIENT_MESSAGING_SENDER_ID,
      appId: process.env.NEXT_PUBLIC_FIREBASE_CLIENT_APP_ID,
    },
    cookies: {
      name: process.env.NEXT_PUBLIC_FIREBASE_CLIENT_PROJECT_ID,
      keys: [process.env.COOKIE_SECRET_CURRENT, process.env.COOKIE_SECRET_PREVIOUS],
      httpOnly: true,
      maxAge: 12 * 60 * 60 * 24 * 1000, // twelve days
      overwrite: true,
      path: "/",
      sameSite: "strict",
      secure: false, // set this to false in local (non-HTTPS) development
      signed: true,
    },
    onVerifyTokenError: (err) => {
      console.error(err);
    },
    onTokenRefreshError: (err) => {
      console.error(err);
    },
  });
};

export default initAuth;

And this is the _app.tsx code:

import theme from "@/styles/theme";
import type { AppProps } from "next/app";
import { MantineProvider } from "@mantine/core";
import { Notifications } from "@mantine/notifications";
import initAuth from "@/utils/initAuth";
import cache from "@/utils/cache";

initAuth();

const App = ({ Component, pageProps }: AppProps) => {
  return (
    <MantineProvider withGlobalStyles withNormalizeCSS theme={theme} emotionCache={cache}>
      <Notifications />
      <Component {...pageProps} />
    </MantineProvider>
  );
};

export default App;

And this code is throwing the error:

import React from "react";
import { getApp } from "firebase/app";
import { useAuthUser, withAuthUser, withAuthUserTokenSSR } from "next-firebase-auth";
import { getAuth } from "firebase/auth";

const Demo = () => {
  console.log(getAuth(getApp()));
  const AuthUser = useAuthUser();
  return (
    <div>
      <p>Your email is {AuthUser.email ? AuthUser.email : "unknown"}.</p>
    </div>
  );
};

// Note that this is a higher-order function.
export const getServerSideProps = withAuthUserTokenSSR()();

export default withAuthUser()(Demo);

[kmjennison]

See #614. This isn't clearly solved yet but is likely related to some change in recent patch versions of the Firebase JS SDK.

[kevinnammour]

So I should use this to solve it?
Version 1.0.0-canary.17
Firebase ^9.9.1
firebase-admin ^11.0.0

[kmjennison]

Yes, according to others' comments, it looks like using a slightly older version of the Firebase JS SDK fixes the problem.