Firebase & Astro
هذا المحتوى لا يتوفر بلغتك بعد.
Firebase is an app development platform that provides a NoSQL database, authentication, realtime subscriptions, functions, and storage.
See our separate guide for deploying to Firebase hosting.
Initializing Firebase in Astro
Section titled Initializing Firebase in AstroPrerequisites
Section titled Prerequisites- A Firebase project with a web app configured.
- An Astro project with server-side rendering (SSR) enabled.
- Firebase credentials: You will need two sets of credentials to connect Astro to Firebase:
- Web app credentials: These credentials will be used by the client side of your app. You can find them in the Firebase console under Project settings > General. Scroll down to the Your apps section and click on the Web app icon.
- Project credentials: These credentials will be used by the server side of your app. You can generate them in the Firebase console under Project settings > Service accounts > Firebase Admin SDK > Generate new private key.
Adding Firebase credentials
Section titled Adding Firebase credentialsTo add your Firebase credentials to Astro, create an .env
file in the root of your project with the following variables:
Now, these environment variables are available for use in your project.
If you would like to have IntelliSense for your Firebase environment variables, edit or create the file env.d.ts
in your src/
directory and configure your types:
Read more about environment variables and .env
files in Astro.
Your project should now include these new files:
Directorysrc/
- env.d.ts
- .env
- astro.config.mjs
- package.json
Installing dependencies
Section titled Installing dependenciesTo connect Astro with Firebase, install the following packages using the single command below for your preferred package manager:
firebase
- the Firebase SDK for the client sidefirebase-admin
- the Firebase Admin SDK for the server side
Next, create a folder named firebase
in the src/
directory and add two new files to this folder: client.ts
and server.ts
.
In client.ts
, add the following code to initialize Firebase in the client using your web app credentials and the firebase
package:
Remember to replace the firebaseConfig
object with your own web app credentials.
In server.ts
, add the following code to initialize Firebase in the server using your project credentials and the firebase-admin
package:
Remember to replace the serviceAccount
object with your own project credentials.
Finally, your project should now include these new files:
Directorysrc
- env.d.ts
Directoryfirebase
- client.ts
- server.ts
- .env
- astro.config.mjs
- package.json
Adding authentication with Firebase
Section titled Adding authentication with FirebasePrerequisites
Section titled Prerequisites- An Astro project initialized with Firebase.
- A Firebase project with email/password authentication enabled in the Firebase console under Authentication > Sign-in method.
Creating auth server endpoints
Section titled Creating auth server endpointsFirebase authentication in Astro requires the following three Astro server endpoints:
GET /api/auth/signin
- to sign in a userGET /api/auth/signout
- to sign out a userPOST /api/auth/register
- to register a user
Create three endpoints related to authentication in a new directory src/pages/api/auth/
: signin.ts
, signout.ts
and register.ts
.
signin.ts
contains the code to sign in a user using Firebase:
Firebase only allows the use of one cookie, and it must be named __session
. Any other cookies the client sends will not be visible to your application.
This is a basic implementation of the signin endpoint. You can add more logic to this endpoint to suit your needs.
signout.ts
contains the code to log out a user by deleting the session cookie:
This is a basic implementation of the signout endpoint. You can add more logic to this endpoint to suit your needs.
register.ts
contains the code to register a user using Firebase:
This is a basic implementation of the register endpoint. You can add more logic to this endpoint to suit your needs.
After creating server endpoints for authentication, your project directory should now include these new files:
Directorysrc
- env.d.ts
Directoryfirebase
- client.ts
- server.ts
Directorypages
Directoryapi
Directoryauth
- signin.ts
- signout.ts
- register.ts
- .env
- astro.config.mjs
- package.json
Creating pages
Section titled Creating pagesCreate the pages that will use the Firebase endpoints:
src/pages/register
- will contain a form to register a usersrc/pages/signin
- will contain a form to sign in a usersrc/pages/dashboard
- will contain a dashboard that can only be accessed by authenticated users
The example src/pages/register.astro
below includes a form that will send a POST
request to the /api/auth/register
endpoint. This endpoint will create a new user using the data from the form and then will redirect the user to the /signin
page.
src/pages/signin.astro
uses the Firebase server app to verify the user’s session cookie. If the user is authenticated, the page will redirect the user to the /dashboard
page.
The example page below contains a form that will send a POST
request to the /api/auth/signin
endpoint with the ID token generated by the Firebase client app.
The endpoint will verify the ID token and create a new session cookie for the user. Then, the endpoint will redirect the user to the /dashboard
page.
src/pages/dashboard.astro
will verify the user’s session cookie using the Firebase server app. If the user is not authenticated, the page will redirect the user to the /signin
page.
The example page below display the user’s name and a button to sign out. Clicking the button will send a GET
request to the /api/auth/signout
endpoint.
The endpoint will delete the user’s session cookie and redirect the user to the /signin
page.
Adding OAuth providers
Section titled Adding OAuth providersTo add OAuth providers to your app, you need to enable them in the Firebase console.
In the Firebase console, go to the Authentication section and click on the Sign-in method tab. Then, click on the Add a new provider button and enable the providers you want to use.
The example below uses the Google provider.
Edit the signin.astro
page to add:
- a button to sign in with Google underneath the existing form
- an event listener on the button to handle the sign in process in the existing
<script>
.
When clicked, the Google sign in button will open a popup window to sign in with Google. Once the user signs in, it will send a POST
request to the /api/auth/signin
endpoint with the ID token generated by OAuth provider.
The endpoint will verify the ID token and create a new session cookie for the user. Then, the endpoint will redirect the user to the /dashboard
page.
Connecting to Firestore database
Section titled Connecting to Firestore databasePrerequisites
Section titled Prerequisites-
An Astro project initialized with Firebase as described in the Initializing Firebase in Astro section.
-
A Firebase project with a Firestore database. You can follow the Firebase documentation to create a new project and set up a Firestore database.
In this recipe, the Firestore collection will be called friends and will contain documents with the following fields:
id
: autogenerated by Firestorename
: a string fieldage
: a number fieldisBestFriend
: a boolean field
Creating the server endpoints
Section titled Creating the server endpointsCreate two new files in a new directory src/pages/api/friends/
: index.ts
and [id].ts
. These will create two server endpoints to interact with the Firestore database in the following ways:
POST /api/friends
: to create a new document in the friends collection.POST /api/friends/:id
: to update a document in the friends collection.DELETE /api/friends/:id
: to delete a document in the friends collection.
index.ts
will contain the code to create a new document in the friends collection:
This is a basic implementation of the friends
endpoint. You can add more logic to this endpoint to suit your needs.
[id].ts
will contain the code to update and delete a document in the friends collection:
This is a basic implementation of the friends/:id
endpoint. You can add more logic to this endpoint to suit your needs.
After creating server endpoints for Firestore, your project directory should now include these new files:
Directorysrc
- env.d.ts
Directoryfirebase
- client.ts
- server.ts
Directorypages
Directoryapi
Directoryfriends
- index.ts
- [id].ts
- .env
- astro.config.mjs
- package.json
Creating pages
Section titled Creating pagesCreate the pages that will use the Firestore endpoints:
src/pages/add.astro
- will contain a form to add a new friend.src/pages/edit/[id].astro
- will contain a form to edit a friend and a button to delete a friend.src/pages/friend/[id].astro
- will contain the details of a friend.src/pages/dashboard.astro
- will display a list of friends.
Add a new record
Section titled Add a new recordThe example src/pages/add.astro
below includes a form that will send a POST
request to the /api/friends
endpoint. This endpoint will create a new friend using the data from the form and then will redirect the user to the /dashboard
page.
Edit or Delete a record
Section titled Edit or Delete a recordsrc/pages/edit/[id].astro
will contain a form to edit a friend data and a button to delete a friend. On submit, this page will send a POST
request to the /api/friends/:id
endpoint to update a friend data.
If the user clicks the delete button, this page will send a DELETE
request to the /api/friends/:id
endpoint to delete a friend.
Display an individual record
Section titled Display an individual recordsrc/pages/friend/[id].astro
will display the details of a friend.
Display a list of records with an edit button
Section titled Display a list of records with an edit buttonFinally, src/pages/dashboard.astro
will display a list of friends. Each friend will have a link to their details page and an edit button that will redirect the user to the edit page.
After creating all the pages, you should have the following file structure:
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
Community Resources
Section titled Community Resources- Astro and Firebase SSR app example
- Using Firebase Realtime Database in Astro with Vue: A Step-by-Step Guide