CODEWITHSUNDEEP
javascriptfirebasenext.jsfirebase-authentication
Mohammed Bekele
Mohammed Bekele

Reputation: 1255

Next Auth Authentication with firebase Adapter not working on Next JS 13

i'm trying to implement an Auth functionality to my Next JS 13 app using Next Auth and firebase. but when i add everything and run the code it throws an error of

error - FirebaseError: Firebase: Firebase App named '[DEFAULT]' already exists with different options or config (app/duplicate-app).`.

When i use the firbaseconfig directly to the adapter it works. but when i import it from firebase.js file it throws the above error.

firebase.js

import { initializeApp, getApp, getApps } from "firebase/app";
import { getFirestore } from "firebase/firestore";
import { getStorage } from "firebase/storage";

const firebaseConfig = {
   apiKey: process.env.FIREBASE_API_KEY,
authDomain: process.env.FIREBASE_AUTH_DOMAIN,
projectId: process.env.FIREBASE_PROJECT_ID,
storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID,
appId: process.env.FIREBASE_APP_ID,
};

const app = getApps.length > 0 ? getApp() : initializeApp(firebaseConfig);

const db = getFirestore(app);
const storage = getStorage(app);

export { db, storage, app };

[...nextauth].js

import NextAuth from "next-auth";
import GoogleProvider from "next-auth/providers/google";
import { FirestoreAdapter } from "@next-auth/firebase-adapter";
import { db } from "../../../firebase";

export default NextAuth({
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_ID,
      clientSecret: process.env.GOOGLE_SECRET,
    }),
  ],
  adapter: FirestoreAdapter(db),
  // ...
});

help me out. ever since i upgraded to next JS 13 it's been a hell.

only update in firebase.js

const firebaseConfig = {
   apiKey: process.env.FIREBASE_API_KEY,
authDomain: process.env.FIREBASE_AUTH_DOMAIN,
projectId: process.env.FIREBASE_PROJECT_ID,
storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID,
appId: process.env.FIREBASE_APP_ID,
};

export const app =
  getApps().length > 0 ? getApp() : initializeApp(firebaseConfig);

export const db = getFirestore(app);
export const storage = getStorage(app);

the error is pointed to this location in `[...nextauth].js

adapter: FirestoreAdapter(db), towards the db entry

Upvotes: 1

Views: 1511

Answers (1)

Dharmaraj
Dharmaraj

Reputation: 50830

The getApps is a function but you are using .length without calling it. Try:

const app = getApps().length > 0 ? getApp() : initializeApp(firebaseConfig);

// getApps.length    => 0 ✕
// getApps().length  => 1 ✔️

Upvotes: 1

Related Questions