Global setup

[borjalo]

I was implementing this solution in my Next.js app and wondered if there's a way to set the functions withAuthUser, withAuthUserSSR, etc in a global way instead of setting them in each page. I tried to put them in my _app.tsx file but once I reload the page it's showing me this error in the login.tsx when trying to do a const auth = getAuth() from the Firebase JS SDK:

FirebaseError: Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app/no-app).

I guess there's no need to initialize the Firebase app again as it's already initialized by next-firebase-auth

Any ideas?

[kmjennison]

For setting an auth requirement globally for the app, there are a few options:

1. Create a common HOC with shared logic and use it on each page
2. Create a "layout" component that uses useAuthUser and is rendered in _app.js
3. Use middleware, which is not yet supported but tracked here: RFC: discuss value of Next.js middleware #418

Related discussions with more info:

• Feature Request: Offer Auth Provider #64 (comment)
• Throw if useAuthUser is used without withAuthUser #155 (comment)