Astro Firebase Starter

A starter pack for getting started with Tailwind, Astro, Firebase, and Svelte.

Try me!

Getting Started

To use this starter pack, follow these steps:

1. Clone the repository:

   git clone https://github.com/Porter-smith/astro-firebase-svelte-tailwind-starter.git
   

2. Navigate to the project directory:

   cd astro-firebase-svelte-tailwind-starter
   

3. Install the dependencies:

   pnpm install
   

4. Start the development server:

   pnpm run dev
   

Quickstart

Follow this guide to quickly set up Firebase for your project. For more in-depth instructions, see FIREBASE_SETUP.md.

Obtain Firebase Keys

Service Account Key

1. Go to the Firebase Console.
2. Navigate to Project settings > Service accounts.
3. Click Generate new private key, then download and secure the JSON file.

Web App Configuration

1. If you haven't added a web app to Firebase, click the web icon (</>) in Project settings > Your apps to create one.
2. Find your web app and you should see your configuration
3. Copy the configuration object.

Update Configuration Files

Place your keys in the appropriate files:

• .env: Add service account key values from the downloaded JSON.
• src/firebase/client.ts: Insert the web app configuration object.

Set up .env with Helper Script

To configure your environment variables quickly:

Save your service account creds as service-account.json in the project's root. Run

 node scripts/createEnvFromServiceAccount.js

A .env file with all Firebase variables will be generated. So you don't have to copy and paste one by one each key.

Note: After setting up the .env file, remember to remove the service-account.json from your project's root directory to protect your credentials.

Enable Authentication

Configure Auth Methods

1. In Firebase Console, go to Authentication.
2. Click Get started.
3. Enable your desired sign-in methods and configure each according to Firebase's prompts.

Ready to Go

You should now be able to run your application and use Firebase's authentication services.

🚀 Happy coding!