Firebase y Astro
Firebase es una plataforma de desarrollo de aplicaciones que proporciona una base de datos NoSQL, autenticación, suscripciones en tiempo real, funciones y almacenamiento.
Consulta nuestra guía independiente para desplegar en Firebase Hosting.
Inicializando Firebase en Astro
Sección titulada Inicializando Firebase en AstroPrerrequesitos
Sección titulada Prerrequesitos- Un proyecto de Firebase con una aplicación web configurada.
- Un proyecto de Astro con renderizado del lado del servidor (SSR) habilitado.
- Credenciales de Firebase: Necesitarás dos conjuntos de credenciales para conectar Astro a Firebase:
- Credenciales de la aplicación web: Estas credenciales serán utilizadas por el lado del cliente de tu aplicación. Puedes encontrarlas en la consola de Firebase en Project settings > General. Desplázate hacia abajo hasta la sección Your apps y haz clic en el icono de Web app.
- Credenciales del proyecto: Estas credenciales serán utilizadas por el lado del servidor de tu aplicación. Puedes generarlas en la consola de Firebase en Project settings > Service accounts > Firebase Admin SDK > Generate new private key.
Agregando credenciales de Firebase
Sección titulada Agregando credenciales de FirebasePara agregar tus credenciales de Firebase a Astro, crea un archivo .env
en la raíz de tu proyecto con las siguientes variables:
Ahora, estas variables de entorno están disponibles para su uso en tu proyecto.
Si deseas tener IntelliSense para tus variables de entorno de Firebase, edita o crea el archivo env.d.ts
en tu directorio src/
y configura tus tipos:
Puedes obtener más información sobre las variables de entorno y los archivos .env
en Astro.
Tu proyecto ahora debería incluir estos nuevos archivos:
Directorysrc/
- env.d.ts
- .env
- astro.config.mjs
- package.json
Instalando dependencias
Sección titulada Instalando dependenciasPara conectar Astro con Firebase, instala los siguientes paquetes utilizando el comando único correspondiente a tu gestor de paquetes preferido:
firebase
- el SDK de Firebase para el lado del clientefirebase-admin
- el SDK de Firebase Admin para el lado del servidor
A continuación, crea una carpeta llamada firebase
en el directorio src/
y agrega dos archivos nuevos a esta carpeta: client.ts
y server.ts
.
En client.ts
, agrega el siguiente código para inicializar Firebase en el cliente utilizando las credenciales de tu aplicación web y el paquete firebase
:
Recuerda reemplazar el objeto firebaseConfig
con las credenciales de tu propia aplicación web.
En server.ts
, agrega el siguiente código para inicializar Firebase en el servidor utilizando las credenciales de tu proyecto y el paquete firebase-admin
:
Recuerda reemplazar el objeto serviceAccount
con las credenciales de tu propio proyecto.
Finalmente, tu proyecto ahora debería incluir estos nuevos archivos:
Directorysrc
- env.d.ts
Directoryfirebase
- client.ts
- server.ts
- .env
- astro.config.mjs
- package.json
Agregando autenticación con Firebase
Sección titulada Agregando autenticación con FirebasePrerrequesitos
Sección titulada Prerrequesitos- Un proyecto de Astro inicializado con Firebase.
- Un proyecto de Firebase con autenticación por correo electrónico/contraseña habilitada en la consola de Firebase bajo la método Authentication > Sign-in.
Creando endpoints del servidor de autenticación
Sección titulada Creando endpoints del servidor de autenticaciónLa autenticación de Firebase en Astro requiere los siguientes tres endpoints del servidor de Astro:
GET /api/auth/signin
- para iniciar sesión a un usuarioGET /api/auth/signout
- para cerrar la sesión a un usuarioPOST /api/auth/register
- para registrar un usuario
Crea tres endpoints relacionados con la autenticación en un nuevo directorio src/pages/api/auth/
: signin.ts
, signout.ts
y register.ts
.
signin.ts
contiene el código para iniciar sesión de un usuario utilizando Firebase:
Firebase solo permiete el uso de una cookie, y debe ser nombrada __session
. Cualquier otra cookie que el cliente envíe no será visible para tu aplicación.
Esta es una implementación básica del endpoint de inicio de sesión. Puedes agregar más lógica a este endpoint para adaptarlo a tus necesidades.
signout.ts
contiene el código para cerrar la sesión de un usuario eliminando la cookie de sesión:
Esta es una implementación básica del endpoint de cierre de sesión. Puedes agregar más lógica a este endpoint para adaptarlo a tus necesidades.
register.ts
contiene el código para registrar un usuario utilizando Firebase:
Esta es una implementación básica del endpoint de registro. Puedes agregar más lógica a este endpoint para adaptarlo a tus necesidades.
Después de crear los endpoints del servidor para la autenticación, tu directorio del proyecto debería incluir estos nuevos archivos:
Directorysrc
- env.d.ts
Directoryfirebase
- client.ts
- server.ts
Directorypages
Directoryapi
Directoryauth
- signin.ts
- signout.ts
- register.ts
- .env
- astro.config.mjs
- package.json
Creando páginas
Sección titulada Creando páginasCrea las páginas que utilizarán los endpoints de Firebase:
src/pages/register
- contendrá un formulario para registrar un usuariosrc/pages/signin
- contendrá un formulario para iniciar sesión un usuariosrc/pages/dashboard
- contendrán un panel de control al que solo podrán acceder los usuarios autenticados
El ejemplo src/pages/register.astro
a continuación incluye un formulario que enviará una solicitud POST
al endpoint /api/auth/register
. Este endpoint creará un nuevo usuario utilizando los datos del formulario y luego redireccionará al usuario a la página /signin
.
src/pages/signin.astro
utiliza la aplicación del servidor Firebase para verificar la cookie de sesión del usuario. Si el usuario está autenticado, la página redireccionará al usuario a la página /dashboard
.
La página de ejemplo a continuación contiene un formulario que enviará una solicitud POST
al endpoint /api/auth/signin
con el token de ID generado por la aplicación cliente de Firebase.
El endpoint verificará el token de ID y creará una nueva cookie de sesión para el usuario. Luego, el endpoint redireccionará al usuario a la página /dashboard
.
src/pages/dashboard.astro
verificará la cookie de sesión del usuario utilizando la aplicación del servidor de Firebase. Si el usuario no está autenticado, la página redireccionará al usuario a la página /signin
.
La página de ejemplo a continuación muestra el nombre del usuario y un botón para cerrar sesión. Al hacer clic en el botón, se enviará una solicitud GET
al endpoint /api/auth/signout
.
El endpoint eliminará la cookie de sesión del usuario y redireccionará al usuario a la página /signin
.
Agregando proveedores de OAuth
Sección titulada Agregando proveedores de OAuthPara agregar proveedores de OAuth a tu aplicación, debes habilitarlos en la consola de Firebase.
En la consola de Firebase, ve a la sección de Authentication y haz clic en la pestaña de Sign-in method Luego, haz clic en el botón de Add a new provider y habilita los proveedores que deseas utilizar.
El ejemplo a continuación utiliza el proveedor Google.
Edita la página signin.astro
para agregar:
- un botón para iniciar sesión con Google debajo del formulario existente.
- un event listener en el botón para manejar el proceso de inicio de sesión en el
<script>
existente.
Cuando se hace clic en el botón de inicio de sesión de Google, se abrirá una ventana emergente para iniciar sesión con Google. Una vez que el usuario inicie sesión, se enviará una solicitud POST
al endpoint /api/auth/signin
con el token de identificación generado por el proveedor de OAuth.
El endpoint verificará el token de identificación y creará una nueva cookie de sesión para el usuario. Luego, el endpoint redirigirá al usuario a la página /dashboard
.
Conectando a la base de datos Firestore.
Sección titulada Conectando a la base de datos Firestore.Prerrequesitos
Sección titulada Prerrequesitos-
Un proyecto Astro inicializado con Firebase según se describe en la sección Inicializando Firebase en Astro.
-
Un proyecto de Firebase con una base de datos Firestore. Puedes seguir la documentación de Firebase para crear un nuevo proyecto y configurar una base de datos Firestore.
En esta receta, la colección de Firestore se llamará friends y contendrá documentos con los siguientes campos:
id
: autogenerado por Firestorename
: un campo de tipo stringage
: un campo de tipo numberisBestFriend
: un campo de tipo boolean
Creando los endpoints del servidor
Sección titulada Creando los endpoints del servidorCrea dos archivos nuevos en un directorio nuevo src/pages/api/friends/
: index.ts
y [id].ts
. Estos crearán dos endpoints del servidor para interactuar con la base de datos Firestore de la siguiente manera:
POST /api/friends
: para crear un nuevo documento en la colección friends.POST /api/friends/:id
: para actualizar un nuevo documento en la colección friends.DELETE /api/friends/:id
: para eliminar un nuevo documento en la colección friends.
El archivo index.ts
contendrá el código para crear un nuevo documento en la colección friends:
Esta es una implementación básica del endpoint friends
. Puedes agregar más lógica a este endpoint según tus necesidades.
El archivo [id].ts
contendrá el código para actualizar y eliminar un documento en la colección friends:
Esta es una implementación básica del endpoint friends/:id
. Puedes agregar más lógica a este endpoint según tus necesidades.
Después de crear los endpoints del servidor para Firestore, tu directorio de proyecto debería incluir estos nuevos archivos:
Directorysrc
- env.d.ts
Directoryfirebase
- client.ts
- server.ts
Directorypages
Directoryapi
Directoryfriends
- index.ts
- [id].ts
- .env
- astro.config.mjs
- package.json
Creando páginas
Sección titulada Creando páginasCrea las páginas que utilizarán los endpoints de Firestore:
src/pages/add.astro
- contendrá un formulario para agregar un nuevo amigo.src/pages/edit/[id].ts
- contendrá un formulario para editar un amigo y un botón para eliminar un amigo.src/pages/friend/[id].ts
- contendrá los detalles de un amigo.src/pages/dashboard.astro
- mostrará una lista de amigos.
Agrega un nuevo registro.
Sección titulada Agrega un nuevo registro.El ejemplo src/pages/add.astro
a continuación incluye un formulario que enviará una solicitud POST
al endpoint /api/friends
. Este endpoint creará un nuevo amigo utilizando los datos del formulario y luego redireccionará al usuario a la página /dashboard
.
Editar o eliminar un registro.
Sección titulada Editar o eliminar un registro.src/pages/edit/[id].astro
contendrá un formulario para editar los datos de un amigo y un botón para eliminar un amigo. Al enviarlo, esta página enviará una solicitud POST
al endpoint /api/friends/:id
para actualizar los datos de un amigo.
Si el usuario hace clic en el botón de eliminar, esta página enviará una solicitud DELETE
al endpoint /api/friends/:id
para eliminar a un amigo.
Mostrar un registro individual
Sección titulada Mostrar un registro individualEl archivo src/pages/friend/[id].astro
mostrará los detalles de un amigo.
Mostrar una lista de registros con un botón de edición
Sección titulada Mostrar una lista de registros con un botón de ediciónFinalmente, src/pages/dashboard.astro
mostrará una lista de amigos. Cada amigo tendrá un enlace a su página de detalles y un botón de edición que redirigirá al usuario a la página de edición.
Después de crear todas las páginas, deberías tener la siguiente estructura de archivos:
Directorysrc
- env.d.ts
Directoryfirebase
- client.ts
- server.ts
Directorypages
- dashboard.astro
- add.astro
Directoryedit
- [id].astro
Directoryfriend
- [id].astro
Directoryapi
Directoryfriends
- index.ts
- [id].ts
- .env
- astro.config.mjs
- package.json
Recursos de la comunidad
Sección titulada Recursos de la comunidad- Aplicación de ejmplo de Astro y Firebase con SSR
- Usando Firebase Realtime Database en Astro con Vue: Guía paso a paso