Could you please link me to the React+Firebase documentation for this 🙏

I haven't read all the documentation on nextjs, I just fixed a little of @detautama PR #346 regarding these changes. Maybe it's not perfect but I would love to read best practices from @detautama regarding these changes

It is Session Management in Server Actions. This is the documentation about Server Actions

Basically, server actions are used for operations on the server side (fetch data, authentication, etc), but in practice they can also be called in the client component

Thank you @detaoddbit what happens if you remove that? I find it peculiar that next requires an additional session handling on top of Firebase Authentication.

Lol. Please remove this let's just use default background color inherited from global styling.

Lol. Please remove this let's just use default background color inherited from global styling.

Will do.
This file is just for testing sass is loaded in the project or not.
This file is not loaded anywhere. Maybe in the future I'll improve the styling architecture, when I have a chance

Done ✅

Why we need create a component to declare the chidlren is client-side rendering?
We don't need this component to declare it is client-side rendering. Use use client is enough in FirebaseUi.tsx to declare it is client-side rendering. I've been test to run without this component and has no problem in FirebaseUI

Previously, I was still injecting FirebaseUI inside the page (not in a separate component) so use client couldn't be used inside page. So I created a ClientOnly component to tell page to only display certain parts on the client side. Because the server side does not have a window context and will get an error when it is read in the server side process.
I would be happy to remove the component if it is not needed and thanks for the sharp eye

Yup that's true, only use client has access window context. Please remove this, we already have use client feature to enable a component render in client-side 🙏🏻

Yup that's true, only use client has access window context. Please remove this, we already have use client feature to enable a component render in client-side 🙏🏻

But if we only add use client to the component, it will cause an error in the terminal when the server side process is running.

Meanwhile, if we wrap a component that only runs on the client side with the ClientOnly component, the error does not appear in the terminal when the server side process is running.

So which way will we take? I'm happy to hear other feedback @DennisAlund @detautama

In nuxtjs they already have this component to handle components that are not carried over during the server side build process. https://nuxt.com/docs/api/components/client-only
It seems that the nextjs component that is given use client only makes the component not appear in the server side rendering process, but the files are still included in the server side build process before it is rendered using server side rendering.

Sometimes nextjs still renders or creates a cache for client components that use use client on the server, to make it trully client rendering you can make it like what @muzanella11 made or use dynamic import https://nextjs.org/docs/pages/building-your-application/optimizing/lazy-loading

For the latest version of nextjs if you use app routes it will automatically become SSR if you want to combine it with client side you can use this patterns https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns