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.

• 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.

To 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:

Your project should now include these new files:

• Directorysrc/

  • env.d.ts
• .env
• astro.config.mjs
• package.json

To 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 side
• firebase-admin - the Firebase Admin SDK for the server side

npm pnpm Yarn

Terminal window

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:

In server.ts, add the following code to initialize Firebase in the server using your project credentials and the firebase-admin package:

Finally, your project should now include these new files:

• Directorysrc

  • env.d.ts
  • Directoryfirebase

    • client.ts
    • server.ts
• .env
• astro.config.mjs
• package.json

• An Astro project initialized with Firebase.
• A Firebase project with email/password authentication enabled in the Firebase console under Authentication > Sign-in method.

Firebase authentication in Astro requires the following three Astro server endpoints:

• GET /api/auth/signin - to sign in a user
• GET /api/auth/signout - to sign out a user
• POST /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:

signout.ts contains the code to log out a user by deleting the session cookie:

register.ts contains the code to register a user using Firebase:

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

Create the pages that will use the Firebase endpoints:

• src/pages/register - will contain a form to register a user
• src/pages/signin - will contain a form to sign in a user
• src/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.

To 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.

• 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 Firestore
• name: a string field
• age: a number field
• isBestFriend: a boolean field

Create 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:

[id].ts will contain the code to update and delete a document in the friends collection:

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

Create 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.

The 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.

src/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.

src/pages/friend/[id].astro will display the details of a friend.

Finally, 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

• Astro and Firebase SSR app example

More backend service guides

• 

  Firebase

• 

  Xata

• 

  Appwrite

• 

  Supabase

• 

  Tigris