Using next-auth FirebaseAdapter with GoogleProvider together with Firebase getFirestore(app)

[yvokeller]

Hi all,

I have currently set up my next.js app use next-auth with the Firebase Adapter, and am using the GoogleProvider for login.

export default NextAuth({
    // Configure one or more authentication providers
    // https://next-auth.js.org/providers
    providers: [
        GoogleProvider({
            clientId: process.env.GOOGLE_ID as string,
            clientSecret: process.env.GOOGLE_SECRET as string,
        }),
        EmailProvider({
            server: process.env.EMAIL_SERVER,
            from: process.env.EMAIL_FROM,
        }),
    ],
    // see https://authjs.dev/reference/adapter/firebase#usage
    // adapter: FirestoreAdapter({}),
    adapter: FirestoreAdapter({
        credential: cert({
            projectId: process.env.FIREBASE_PROJECT_ID,
            clientEmail: process.env.FIREBASE_CLIENT_EMAIL,
            privateKey: process.env.FIREBASE_PRIVATE_KEY,
        }),
    }),
    callbacks: {
        async session({ session, token }) {
            ...
            return session
        },
    },
    session: {
        strategy: 'jwt',
    },
    debug: process.env.NODE_ENV !== 'production',
})

At the same time, I am using the Firestore DB on Client (getFirestore(app)) to read & write user data directly from the client.

const firebaseConfig = {
    apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
    authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
    projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
    storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
    messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
    appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
    measurementId: process.env.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID,
}

// Initialize Firebase
const app = initializeApp(firebaseConfig)
export const db = getFirestore(app)
export const auth = getAuth(app)

I now ran into a problem when configuring the Firestore rules. As I access the DB client-side in my Next.js app, I need to limit access to documents by the user's ID, which I have set up with the rules config. I validated these rules to be correct for my use case using the tool provided within Firestore by Google.

The problem: the authorisation of Firestore DB calls on Client using (getFirestore(app)) fails against these rules.

An example call:

import { db } from '../../firebase/setup'

...

  if (credits > n) {
      await handleSetCredits(uid, credits - n)
      return true
  }

At this stage of my investigation, I assume the following is the issue:

• Login is handled by next-auth via GoogleProvider, the FirebaseAdapter creates the user document, sessions etc.
• However: The Firebase Client does not have an authentication of the user, as it is not aware of the Authorisation happening in [...nextauth].ts

This leads to the Firebase Client not having a user session, and the Firestore access only works as long as all read & write is allowed.

Does someone have an idea on how to go about solving this? How can I make Firebase use the next-auth user session when reading from Firestore on the client?

Any ideas, hints or suggestions are appreciated!

[yvokeller]

I was able to solve this, leaving the solution here in case anybody comes across the same situation:

One approach to achieve this is to use a custom token generated by your Next.js server and use it to sign in the user client-side with Firebase.

Here's a high-level overview:

1. When a user logs in via NextAuth, create a custom token using the Firebase Admin SDK in your Next.js server.
2. Return the custom token in the NextAuth session.
3. In your client-side code, use the custom token to sign in the user with Firebase.
4. Now, the client-side Firebase instance should be aware of the user's authentication state, and Firestore rules should work as expected.

Implementation:

1. Install the Firebase Admin SDK on your server:

npm install firebase-admin

2. Import the Firebase Admin SDK in your [...nextauth].ts file and initialize it:

import * as admin from 'firebase-admin'

if (!admin.apps.length) {
  admin.initializeApp({
    credential: admin.credential.cert({
      projectId: process.env.FIREBASE_PROJECT_ID,
      clientEmail: process.env.FIREBASE_CLIENT_EMAIL,
      privateKey: process.env.FIREBASE_PRIVATE_KEY,
    }),
  })
}

3. Update the session callback to create a custom token and return it:

callbacks: {
  async session({ session, token }) {
    // ...
    if (token && token.uid) {
      const firebaseToken = await admin.auth().createCustomToken(token.uid)
      session.firebaseToken = firebaseToken
    }
    return session
  },
},

4. In your client-side code, sign in the user with Firebase using the custom token:

import { getAuth, signInWithCustomToken } from 'firebase/auth'

const auth = getAuth(app)

async function syncFirebaseAuth(session) {
  if (session && session.firebaseToken) {
    try {
      await signInWithCustomToken(auth, session.firebaseToken)
    } catch (error) {
      console.error('Error signing in with custom token:', error)
    }
  } else {
    auth.signOut()
  }
}

5. Use the syncFirebaseAuth function to sign in the user whenever the NextAuth session changes:

import { useSession } from 'next-auth/react'

function MyApp({ Component, pageProps }) {
  const { session } = useSession()

  useEffect(() => {
    syncFirebaseAuth(session)
  }, [session])

  // ...
}

Now the client-side Firebase instance is aware of the user's authentication state, allowing you to use Firestore rules based on the user's ID.

[vikyw89]

Is there a better approach than this yet ?
Kinda a bummer that next adapter doesn't support firebase security rule our of the box.

[Martinnord]

Any updates?

[Hussain760]

Please help me I can't find createCustomToken Function its undefined

[Mudit18]

@Hussain760 refer this thread, might be useful - https://stackoverflow.com/questions/75963110/firebase-rules-to-fix-missing-or-insufficient-permissions-error-when-accessing

[mufarrah]

https://www.youtube.com/watch?v=OOUsvDOKlGs

this video solves this issue in minute: 2:16:00

[lightify97]

@yvokeller One thing to notice here that this doesn't set the UID as identifier in firebase auth. It resolves to "-" for all users. Any workaround for that.