with-firebase-authentication-serverless pageWrappers clarifications

[optimista]

Kind greetings gentlemen,
I'm trying to understand the code of with-firebase-authentication-serverless example and I do struggle understanding some parts, especially in the schematic of how data (token) are being traversed across next.js application.

I have a header that shows on every page of the application and it's different on logged in and logged out states.

I intend to use withAuthUser.js wrapper to wrap the whole _app.js, so the app checks on each page whether there exists a session in the cookie and if not it calls useFirebaseAuth() on client, sending a request to /api/login and therefore updating, getting the session in the process. Consequently I intend to wrap Header in Context.Consumer to obtain the AuthUserInfo.

The first doubt I have is, why do I need to call useFirebaseAuth() (in withAuthUser.js) on each request of page, even though I might have a session's data already? Isn't that an unnecessary call on each page's render?

The second doubt I have is, the meaning of withAuthUserInfo wrapper; if I understand correctly, the whole wrapper is just about getting the data from the Context, am I correct? There is nothing more in there. What confuses me there is just the line of const AuthUserInfo = get(ctx, 'myCustomData.AuthUserInfo', null);. Aren't we getting AuthUserInfo in withAuthUser.js wrapper and using Context already? Is it purposeful redundancy or am I missing some point in here?

Thank you kindly for the work you did put into example as well as for the explanations and patience! Appreciated.

[optimista]

For now, for everyone struggling with the integration of firebase and next.js I recommend taking a look on this blog: https://parondeau.com/blog/server-auth-firebase-nextjs

[hajola]

Made an example of how to use firebase auth with nextjs, based on the with-iron-session. Instead of getinitialprops that most examples used, this uses getServerSideProps. Hopefully it's easy to understand, let me know if any questions https://github.com/hajola/nextjs-firebase-authentication

[optimista]

I looked at your example @hajola, thank you for that!
[Writing this message also for anyone who is googling out this].

I also updated myself on everything that is going on with Next.js updates and changes.

The only thing that bothers me is that, I would really love to have the "currentUser" available on every page, on server side, without having to wrap every page into withSession again and again, but at this point it seems that it's the only way.

Because... I found out that I can't use cookies in _document.js because of automatic static optimization (in caveats: https://nextjs.org/docs/advanced-features/custom-document)

And actually, there is an optional getInitialProps in _app.js (https://nextjs.org/docs/advanced-features/custom-app) which is exactly what I need, even though it would be break the automatic static optimization.

So the last decision that I need to make is whether to break and get rid of automatic static optimization for above mentioned code convenience (if e.g. developing authorization-heavy webapp) or whether to shift my thinking and recognize that on some pages I might not need to be aware of currently logged user and on the others I would just wrap individual pages into some HOC that would include the session.

If one has a dashboard or some header with user profile etc., I can't really imagine the latter. So perhaps this might be the right case not to use the automatic static optimization.

[Is this a good, practical and intended way to think about it?]

[hajola]

I had an issue with the custom app approach. My choice of hosting for next.js is currently Vercel(Zeit), having initialprops in _app.js makes all of my pages "serverless functions" by their pricing plan. And the free plan offers 12 serverless functions. More info : vercel/vercel#4029 .

[optimista]

Thank you. Catching up. Also it would require pulling out server.js and using cookieParser I suspect, which is already too diverging.

So each time I use either getInitialProps (which is deprecated now in regular pages) or getServerSideProps in pages/, I am turning a page into a serverless function?

[hajola]

Thats correct. I did see some discussion about excluding next.js pages from that quota, but no estimates as to when, or if at all, that will happen. It would be great if the Vercel team would be more transparent about their future plans.

[brunocrosier]

Not sure if this will help you but I made this demo recently - hope it's useful!

https://github.com/brunocrosier/google-one-tap

[brunocrosier]

Link to demo: https://google-one-tap.now.sh