As I explore how to implement authentication using Firebase in my Next.js app, one thing that stands out is the need to initialize Firebase with our configuration details (apiKey, etc.). The concern I have is when using any Firebase function from a client component, the configuration must be sent to the client. Is this a secure practice?
In a tutorial by Google found at https://firebase.google.com/codelabs/firebase-nextjs#5, they demonstrate prefixing .env variables with NEXT_PUBLIC_ to make them accessible to client components. Would a reputable company like Google provide incorrect guidance on setting up their product? Is it safe to expose my Firebase configuration to the client?
If not, how can I achieve this functionality with server components? It seems logical to handle sign-in and sign-out actions on the server side.
The challenge lies in monitoring authentication state changes and updating the UI accordingly (e.g., changing a "Sign In" button to a "Sign Out" button).
Let's consider a server component for the navbar:
function Navbar() {
let signedIn = false;
auth.onAuthStateChanged((authUser) => {
if (authUser) {
signedIn = true;
}
});
return (
signedIn ? <SignOutButton /> : <SignInButton />
)
}
I'm unsure if declaring a normal variable like this without utilizing state or useEffect in a server component is the correct approach?