gladly-team / next-firebase-auth

Simple Firebase authentication for all Next.js rendering strategies
https://nfa-example-git-v1x-gladly-team.vercel.app/
MIT License
1.33k stars 290 forks source link

Can't use firebase apps in getServerSideProps: "FirebaseError: Firebase: Need to provide options, when not being deployed to hosting via source." #696

Closed MvRemmerden closed 6 months ago

MvRemmerden commented 7 months ago

Describe the bug

I'm not sure if I'm doing something wrong here, or if this is indeed a bug, but according to https://stackoverflow.com/a/71119461 it should be possible to use the normal client SDK for getServerSideProps. However, when I try to do so and follow the instructions in https://github.com/gladly-team/next-firebase-auth/blob/v1.x/EXAMPLES.md#using-the-firebase-apps, I always get the following error:

image

Minimal code example for the index.js (I can also provide a repo for this if it helps):

import React from 'react'
import { useUser, withUser, withUserTokenSSR } from 'next-firebase-auth'
import Header from '../components/Header'
import DemoPageLinks from '../components/DemoPageLinks'
import { getApp } from 'firebase/app'
import { getFirestore, collection, onSnapshot } from 'firebase/firestore'

const styles = {
  content: {
    padding: 32,
  },
  infoTextContainer: {
    marginBottom: 32,
  },
}

const Demo = () => {
  const user = useUser()
  return (
    <div>
      <Header email={user.email} signOut={user.signOut} />
      <div style={styles.content}>
        <div style={styles.infoTextContainer}>
          <h3>Home</h3>
          <p>
            This page does not require authentication, so it won't redirect to
            the login page if you are not signed in.
          </p>
          <p>
            If you remove `getServerSideProps` from this page, it will be static
            and load the authed user only on the client side.
          </p>
        </div>
        <DemoPageLinks />
      </div>
    </div>
  )
}

export const getServerSideProps = withUserTokenSSR()(() => {
  onSnapshot(collection(getFirestore(getApp()), 'artists'), (snap) => {
    if (!snap) {
      return;
    }
    console.log(snap);
  });
})

export default withUser()(Demo)

Versions

next-firebase-auth version: 1.0.1 Firebase JS SDK (firebase): 9.16.0 Firebase admin SDK (firebase-admin): 11.19.0 Next.js: 14.0.3

kmjennison commented 6 months ago

Duplicate of #614. Thanks!