Greetings, I am new to Next.js and have a few queries regarding utilizing Firebase authentication on both the client side and server side. My project is set up with Firebase admin and client SDKs, and I have a signup page where users provide their name, email, and password.
Queries: [1]
After a user signs up using email and password with createUserWithEmailAndPassword on the client side, I want to save the authentication response (user's name and UID) to Firestore DB. Should I do this in the same submit handler as the authentication response?
const onSignup = async ({ email, password }: Tfields) => {
try {
const response = await auth.signup(email, password);
/ *** DO I save to firestore DB here ? **/
// route to authenticated page
router.push("/account");
} catch (error) {
});
}
};
[2] If I need to call Firestore from the above handler, should I directly use the Firebase client-side SDK or create an API route called createDBUser in Next.js and call the API from the handler? Wouldn't connecting to Firestore via an API be safer than directly using the client-side SDK?
[3] For example, an authorized route like /account is essentially a statically generated page at build time. Won't this initially show nothing on the page, which isn't very SEO-friendly? Only the header SEO component will be visible until the Firebase client-side check occurs?
const Account = () => {
const [user, setUser] = useState<any>(null);
const handleUser = (user) => {
setuser(user)
}
useEffect(() => {
const unsubscribe = onIdTokenChanged(getAuth(), handleUser);
return () => unsubscribe();
}, []);
return (
<div>
<Head>
<title>Authorized User page</title>
<meta
name="description"
content="this is John Doe's page with all his account pages"
/>
</Head>
{user && <div>
<div>This is an authenticated account page</div>
</div> }
</div>
);
};
export default Account;
Should I instead use getServerSideProps on the account page to check if a user is logged in before rendering it, rather than handling it in the useEffect? Wouldn't this ensure that all content is rendered on the server before being served to the user? Additionally, I would be able to include the user's name in the SEO header since it will be rendered on the server beforehand.