Accessing the initialized app?

[steveruizok]

Hey, thanks for this excellent library.

I would like to use it together with Firestore. To do this, I need to access the initialized app. At the moment, the only way to get that instance is from window.apps for the client or admin.apps on the server.

For the client:

import firebase from 'firebase/app'
import 'firebase/firestore'

let fb, db

if (firebase.apps[0] !== undefined) {
  fb = firebase.apps[0]
  db = fb.firestore()
}

For the server:

import * as admin from 'firebase-admin'
const fb = admin.apps[0]
const db = fb.firestore()

This feels a little hacky, however.

Would it be possible for the init function to return the app instance? The initFirebaseClientSDK could return it, as could initFirebaseAdminSDK, and then we could import it from wherever we call init, such as initAuth.js in the example. From what I can tell, init would return the correct result whether server-side or client-side.

[steveruizok]

Maybe scratch that—after a little more exploration, it makes more sense for me to initialize firebase myself. Still could be nice to get the admin instance however. Here's are the files all together.

// utils/firebase.js
import firebase from 'firebase/app'
import 'firebase/firestore'

if (!firebase.apps.length) {
  firebase.initializeApp({
   // ...config object (same as in config.firebaseClientInitConfig)
  })
}

export default firebase

// utils/admin.js
import './firebase'
import admin from 'firebase-admin'
export default admin.apps[0]

// utils/firestore.js
import firebase from './firebase'
export default firebase.firestore()

// utils/initAuth.js
import './firebase'
import { init } from 'next-firebase-auth'

// ...initAuth as shown in the example, but with only the apiKey for firebaseClientInitConfig

// pages/example.js

import {
  useAuthUser,
  withAuthUser,
  AuthAction,
  withAuthUserTokenSSR,
} from 'next-firebase-auth'
import db from '../utils/firestore'
import admin from '../utils/admin'

function Editor({ message }) {
  const AuthUser = useAuthUser()

  return (
    <textarea
      defaultValue={message}
      onChange={({ currentTarget: { value } }) =>
        db.collection('messages').doc(AuthUser.id).set({ message: value })
      }
    />
  )
}

export const getServerSideProps = withAuthUserTokenSSR({
  whenUnauthed: AuthAction.REDIRECT_TO_LOGIN,
})(async ({ AuthUser }) => {
  const db = admin.firestore()
  const doc = await db.collection('messages').doc(AuthUser.id).get()
  return { message: doc.exists ? doc.data().message : '...' }
})

export default withAuthUser({
  whenUnauthedAfterInit: AuthAction.REDIRECT_TO_LOGIN,
})(Editor)

[kmjennison]

Thanks for the feedback! So, in your case you need access to the Firebase app's admin within getServerSideProps? If this is a very common pattern for people, we could consider passing FirebaseAdmin to the wrapped function as a convenience—I'd love to hear from others.

[moflo]

@kmjennison thank you for putting this library together, it's really good to see how you've unify the multiple Firebase auth approaches for NextJS. I'll add a +1 for the need @steveruizok mentioned: I need the admin features when using getServerSideProps (as well as within /api endpoint as you have shown) and also need the client exposed. The reason is that some methods (ie., updateProfile()) are only available on the client and so I need a mix of both.

I have almost the same structure as @steveruizok shows here: utils/initAuth.js plus both utils/firebaseClient.js and utils/firebaseAdmin.js but am a bit worried about keeping things in sync!

[kmjennison]

@moflo Got it. Just wanted to say regarding:

am a bit worried about keeping things in sync

This shouldn't be too much of a problem. We'll make sure this package continues to accommodate initializing Firebase manually.

[binajmen]

I'll add my +1 as well ;-) I am using both admin (to retrieve data + custom claims with verifyIdToken()) and firebase (the client), so that would be handy.

[thanhtutzaw]

why AuthUser can access in here ?

(async ({ AuthUser }) => {
const db = admin.firestore()

that is from editor function ?

function Editor({ message }) {
const AuthUser = useAuthUser()

[steveruizok]

Right on, having access to that admin instance would be really handy for projects that use Firestore (or other Firebase services).

…

On 30 Jan 2021, at 23:03, Kevin Jennison ***@***.***> wrote:  Thanks for the feedback! So, in your case you need access to the Firebase app's admin within getServerSideProps? If this is a very common pattern for people, we could consider passing FirebaseAdmin to the wrapped function as a convenience—I'd love to hear from others. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or unsubscribe.

[kmjennison]

We're tracking improvements to this in #135. Release v0.13.1-alpha.0 adds a getFirebaseAdmin method.

[thanhtutzaw]

@kmjennison
const db = getFirebaseAdmin().firestore()
it also support for v9 firebase ?

[kmjennison]

@thanhtutzaw Yes, it does. If using the latest canary, getFirebaseAdmin has been removed (release notes). Instead, import directly from the firebase-admin package.

[thanhtutzaw]

I skip firebase admin and I get db from firebase.js and It doesn't work in http:localhost but it works in https://too.netlify.app
.Why this is happening in SSR , canary version .

[thanhtutzaw]

@kmjennison but now it works in localhost again . But with only one ssr , not two . when i use 2 ssr for (notes page and single note page)
It doesn't work .Then I removed ssr of single note and After 3 or 4 days It works very well in localhost . I also clear browser storage and I still have to wait some days .

[thanhtutzaw]

Sorry @kmjennison
Now it is working 2 ssr in http://localhost
I waited for 3 or 4 days . It shouldn't btw