Making Gatsby work with Firebase Auth

[AnuragRamdasan]

Hi - I am a bit stuck right now on working with Gatsby and Firebase. I have been using Gatsby on one of my projects for a while and recently decided to support user accounts there. While I know it isn't straightforward to have a production level implementation of Firebase in Gatsby, it has been quite a challenge in terms of implementing auth for me. There are quite a few different approaches suggested online that include direct implementation, via a context, via gatsby-firebase-plugin among a few. However I haven't found a comprehensive walkthrough that shows how to make it work.

I have currently done using simple react context, however terrible stuck on gatsby build where the build process basically fails.

Is there any documentation on how best to use Firebase with Gatsby at all? I am sure I am on the first one to try this, hence figured I would check here.

[nibtime]

Hi, @AnuragRamdasan

I also had trouble getting Firebase to work with Gatsby and didn't find a comprehensive walkthrough on how to do it best. I then figured out, that dynamic imports of the firebase app and auth service are probably the best strategy to circumvent problems with Gatsby SSR altogether. Then I make the Firebase services available with a React Context provider in wrapRootElement. The following works for me if you are still interested:

dynamic imports of Firebase services + React Context

import React from "react"
import type * as Firebase from "firebase"
import useAsync from "react-use/lib/useAsync"

const firebaseConfig = {...}

let _app: Firebase.app.App

const getApp = async () => {
  if (!_app) {
    const firebase = await import("firebase/app")
    _app = firebase.initializeApp(firebaseConfig)
  }
  return _app
}

let _auth: Firebase.auth.Auth

const getAuth = async () => {
  if (!_auth) {
    await import("firebase/auth")
    const app = await getApp()
    _auth = app.auth()
  }
  return _auth
}

let _messaging: Firebase.messaging.Messaging

const getMessaging = async () => {
  if (!_messaging) {
    await import("firebase/messaging")
    const app = await getApp()
    _messaging = app.messaging()
  }
  return _messaging
}

interface FirebaseServiceContext {
  auth?: typeof _auth
  messaging?: typeof _messaging
}

const getServiceContext = async (): Promise<FirebaseServiceContext> => {
  const auth = await getAuth()
  const messaging = await getMessaging()
  return { auth, messaging }
}

const FirebaseServiceContext = React.createContext<FirebaseServiceContext>({})

const { Provider } = FirebaseServiceContext

export const FirebaseServiceProvider: React.FC = ({ children }) => {
  const { value } = useAsync(getServiceContext)
  return <Provider value={value ?? {}}>{children}</Provider>
}

export const useFirebaseServices = () => React.useContext(FirebaseServiceContext)

include Provider in wrapRootElement (both Browser and SSR API)

import type { WrapRootElementBrowserArgs } from "gatsby"
import React from "react"
import { FirebaseServiceProvider } from "~services/firebase"

export const wrapRootElement = ({ element }: WrapRootElementBrowserArgs): any => {
  return <FirebaseServiceProvider>{element}</FirebaseServiceProvider>
}

use auth service with hook in your components

import React from "react"
import { useFirebaseServices } from "~services/firebase"

export const SignIn: React.FC = () => {
  const { auth } = useFirebaseServices()
  const signedInUserName = auth?.currentUser?.displayName
  const [email, setEmail] =  React.useState("")
  const [password, setPassword] =  React.useState("")
  const signIn = React.useCallback(() => auth?.signInWithEmailAndPassword(email, password), [email, password, auth])
  const signOut = React.useCallback(() => auth?.signOut(), [auth])

  ...
}

[cmarabate]

Thanks @nibtime, this looks like what I need!

But I don't understand the 2nd part. Any chance you could provide me a working example in a CodeSandbox or something? I want to be able to see the entire file structure and where each of these code snippets is located within it so I know how it all connects together.

Thanks!