Hola, soy nuevo en next js y tenía algunas preguntas sobre el uso de la autenticación de firebase del lado del cliente y del lado del servidor. Tengo la configuración de sdks de firebase admin y firebase client en mi proyecto. Tengo una página de registro a la que se dirige el usuario. Rellenan nombre email y contraseña. Estoy usando el lado del cliente para autenticarme con el correo electrónico y la contraseña createUserWithEmailAndPassword cuando el usuario envía el formulario en la página de registro.
Preguntas: [1]
Quiero guardar la respuesta de autenticación del nombre de usuario y el uid en firestore db cuando se crea el usuario. ¿Debo hacer esto en el mismo controlador de envío cuando ocurre la respuesta de autenticación?
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] Si llamo a firestore desde el controlador anterior, ¿debería llamar a firestore directamente usando el sdk del lado del cliente de firebase o debería crear una ruta api en nextjs llamada createDBUser y llamar a la api desde el controlador? ¿No sería más seguro conectarse a firestore usando api en lugar de directamente con el sdk del lado del cliente?
[3] Ejemplo de ruta autorizada como /cuenta, esto es esencialmente un SSG en el momento de la compilación. ¿Esto no mostrará nada en la página al principio, lo que no es muy amigable para SEO? ¿Solo el componente SEO del encabezado se podrá ver al principio hasta que se realice la verificación del lado del cliente de Firebase?
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 a authenticated account page</div> </div> } </div> ); }; export default Account;¿O debería usar getServerSideProps en la página de la cuenta en lugar de verificar si el usuario inició sesión en lugar de hacer esto en useEffect. ¿No tendría esto todo el contenido renderizado en el servidor antes de que se sirva al usuario? También podría inyectar el nombre de los usuarios dentro del encabezado seo, ya que se representará en el servidor de antemano.
Interactuar con Firestore directamente o a través de un servidor depende de su caso y las opiniones pueden variar. Pero, ¿vale la pena agregar otra ruta de API, verificar los tokens de los usuarios y luego agregar datos a Firestore cuando eso se puede hacer de manera directa y segura mediante reglas de seguridad ? Sí, puede agregar datos a Firestore justo después de createUserWithEmailAndPassword() cree un usuario.
Enrutar las solicitudes de Firestore a través de su API sería útil si necesita algún tipo de límite de velocidad para actualizar documentos o cualquier operación.
Para las aplicaciones web renderizadas del lado del servidor, recomendaría usar cookies de sesión para que pueda autenticar al usuario antes de renderizar. Aquí tendría que verificar la cookie usando Admin SDK y obtener datos para mostrar antes de que se muestre la página.