26 |
48 |
--------------------------------------------------------------------------------
/src/firebase/utils/auth/handleSignup.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Handles the user signup process using Firebase authentication. It registers the
3 | * user with an email and password, updates the user profile with a display name,
4 | * and sets up a session with the server using the ID token received from Firebase.
5 | *
6 | * @param {string} name - The display name of the user.
7 | * @param {string} email - The email address of the user to register.
8 | * @param {string} password - The password for the user account.
9 | * @throws {Error} If registration, profile update, or server session creation fails.
10 | */
11 | import {
12 | createUserWithEmailAndPassword,
13 | getAuth,
14 | inMemoryPersistence,
15 | updateProfile,
16 | } from "firebase/auth";
17 | import { app } from "@/firebase/client";
18 | import fetchSignIn from "../../../services/api/fetchSignIn";
19 |
20 | const auth = getAuth(app);
21 | auth.setPersistence(inMemoryPersistence);
22 |
23 | async function handleSignup(name: string, email: string, password: string) {
24 | // Register the user using Firebase's client SDK
25 | const userCredential = await createUserWithEmailAndPassword(
26 | auth,
27 | email,
28 | password
29 | );
30 | // Update the user's profile with the provided name
31 | await updateProfile(userCredential.user, {
32 | displayName: name,
33 | });
34 |
35 | // Get the ID token of the newly registered user
36 | const idToken = await userCredential.user.getIdToken();
37 |
38 | const redirectedUrl = await fetchSignIn(idToken);
39 |
40 | return redirectedUrl;
41 | }
42 |
43 | export default handleSignup;
44 |
--------------------------------------------------------------------------------
/src/components/UserDropdown.svelte:
--------------------------------------------------------------------------------
1 |
9 |
10 | {#if user?.email}
11 |
29 |
30 | 
37 |
47 |
37 | Astro
38 | 39 |
40 | {#if user}
41 |
46 |
25 |
47 |
26 | {#if user?.displayName}
27 |
35 |
39 |
40 |
46 | 28 | {user?.displayName} 29 |
30 | {/if} 31 |32 | {user?.email} 33 |
34 |
16 |
17 | {#if user}
18 |
19 |
51 |
52 |
--------------------------------------------------------------------------------
/public/astro.svg:
--------------------------------------------------------------------------------
1 |
2 |
9 |
--------------------------------------------------------------------------------
/src/pages/api/user/update.ts:
--------------------------------------------------------------------------------
1 | import type { APIRoute } from "astro";
2 | import updateUserData from "@/firebase/utils/auth/updateUserData";
3 | import getUserData from "@/firebase/utils/auth/getUserData";
4 |
5 | export const POST: APIRoute = async ({ request, cookies }) => {
6 | try {
7 | const sessionCookie = cookies.get("session")?.value ?? null;
8 | // Get user data based on the session cookie.
9 | const user = await getUserData(sessionCookie);
10 |
11 | if (!user) {
12 | return new Response(JSON.stringify({ error: "Unauthorized" }), {
13 | status: 401,
14 | headers: { "Content-Type": "application/json" },
15 | });
16 | }
17 |
18 | // User is authenticated, proceed with updating user data...
19 | // Extract the data you want to update from the request body.
20 | const updates = await request.json();
21 | if (!updates) {
22 | return new Response(
23 | JSON.stringify({ error: "Error: No Updates Passed" }),
24 | {
25 | status: 404,
26 | headers: { "Content-Type": "application/json" },
27 | }
28 | );
29 | }
30 | const updatedUserRecord = await updateUserData(user.uid, updates);
31 | // Return success response
32 | return new Response(
33 | JSON.stringify({ success: true, data: updatedUserRecord }),
34 | {
35 | status: 200,
36 | headers: { "Content-Type": "application/json" },
37 | }
38 | );
39 | } catch (error) {
40 | // Log the error for server-side debugging.
41 | console.error(error);
42 | let errorMessage = "Internal Server Error";
43 | let statusCode = 500;
44 |
45 | // Check if error is an instance of Error
46 | if (error instanceof Error) {
47 | errorMessage = error.message;
48 | // If the error object has a 'statusCode' property, use it.
49 | statusCode = (error as { statusCode?: number }).statusCode || 500;
50 | }
51 |
52 | // Return a generic error response or customize based on the error type
53 | return new Response(JSON.stringify({ error: errorMessage }), {
54 | status: statusCode,
55 | headers: { "Content-Type": "application/json" },
56 | });
57 | }
58 | };
59 |
--------------------------------------------------------------------------------
/src/components/base/popover/Popover.svelte:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
14 |
47 |
48 |
20 |
33 | {:else}
34 |
35 |
21 |
26 |
31 |
32 |
36 |
49 | {/if}
50 |
37 |
44 |
47 |
48 |
49 |
50 |
68 |
--------------------------------------------------------------------------------
/src/components/ForgetPasswordForm.svelte:
--------------------------------------------------------------------------------
1 |
24 |
25 |
28 |
73 |
--------------------------------------------------------------------------------
/src/components/base/button/Button.svelte:
--------------------------------------------------------------------------------
1 |
27 |
28 |
36 | {#if isLink()}
37 |
46 |
29 |
72 |
30 |
37 |
71 | 31 | Reset Password 32 |
33 |34 | Enter the email associated with your account. 35 |
36 |
37 |
88 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 |
38 |
87 |
39 |
46 | {#if errorMessage}
47 | 40 | Reset Your Password 41 |
42 |43 | Enter and confirm your new password below. 44 |
45 |
48 |
50 | {/if}
51 | {#if successMessage}
52 | {errorMessage}
49 |
53 |
55 | {/if}
56 |
86 | {successMessage}
54 |
3 |
4 | Astro Firebase Starter
5 | 6 |7 | A starter pack for getting started with Tailwind, Astro, Firebase, and Svelte. 8 |
9 | 10 |11 | Try me! 12 |
13 | 14 | ## Getting Started 15 | 16 | To use this starter pack, follow these steps: 17 | 18 | 1. **Clone the repository:** 19 | 20 | ```bash 21 | git clone https://github.com/Porter-smith/astro-firebase-svelte-tailwind-starter.git 22 | ``` 23 | 24 | 2. **Navigate to the project directory:** 25 | 26 | ```bash 27 | cd astro-firebase-svelte-tailwind-starter 28 | ``` 29 | 30 | 3. **Install the dependencies:** 31 | 32 | ```bash 33 | pnpm install 34 | ``` 35 | 36 | 4. **Start the development server:** 37 | 38 | ```bash 39 | pnpm run dev 40 | ``` 41 | 42 | # Quickstart 43 | 44 | Follow this guide to quickly set up Firebase for your project. For more in-depth instructions, see [FIREBASE_SETUP.md](./docs/FIREBASE_SETUP.md). 45 | 46 | ## Obtain Firebase Keys 47 | 48 | ### Service Account Key 49 | 50 | 1. Go to the [Firebase Console](https://console.firebase.google.com/). 51 | 2. Navigate to `Project settings` > `Service accounts`. 52 | 3. Click `Generate new private key`, then download and secure the JSON file. 53 | 54 | ### Web App Configuration 55 | 56 | 1. If you haven't added a web app to [Firebase](https://console.firebase.google.com/), click the web icon (``) in `Project settings` > `Your apps` to create one. 57 | 2. Find your web app and you should see your `configuration` 58 | 3. Copy the configuration object. 59 | 60 | ## Update Configuration Files 61 | 62 | Place your keys in the appropriate files: 63 | 64 | - `.env`: Add service account key values from the downloaded JSON. 65 | - `src/firebase/client.ts`: Insert the web app configuration object. 66 | 67 | ### Set up .env with Helper Script 68 | 69 | To configure your environment variables quickly: 70 | 71 | Save your service account creds as `service-account.json` in the project's root. 72 | Run 73 | 74 | ```bash 75 | node scripts/createEnvFromServiceAccount.js 76 | ``` 77 | 78 | A .env file with all Firebase variables will be generated. So you don't have to copy and paste one by one each key. 79 | 80 | **Note:** After setting up the .env file, remember to remove the service-account.json from your project's root directory to protect your credentials. 81 | 82 | ## Enable Authentication 83 | 84 | ### Configure Auth Methods 85 | 86 | 1. In [Firebase Console](https://console.firebase.google.com/), go to `Authentication`. 87 | 2. Click `Get started`. 88 | 3. Enable your desired sign-in methods and configure each according to Firebase's prompts. 89 | 90 | ## Ready to Go 91 | 92 | You should now be able to run your application and use Firebase's authentication services. 93 | 94 | 🚀 Happy coding! 95 | -------------------------------------------------------------------------------- /src/components/SignupForm.svelte: -------------------------------------------------------------------------------- 1 | 20 | 21 |
24 |
92 |
--------------------------------------------------------------------------------
/scripts/createEnvFromServiceAccount.js:
--------------------------------------------------------------------------------
1 | import fs from 'fs/promises';
2 | import readline from 'readline';
3 |
4 | const rl = readline.createInterface({
5 | input: process.stdin,
6 | output: process.stdout
7 | });
8 |
9 | async function checkFileExists(filePath) {
10 | try {
11 | await fs.access(filePath);
12 | return true;
13 | } catch {
14 | return false;
15 | }
16 | }
17 |
18 | function askQuestion(question) {
19 | return new Promise((resolve) => {
20 | // Added a newline character before the question to have it on a new line
21 | rl.question(`\n${question} (Y/n) `, (input) => {
22 | resolve(input.toLowerCase() === 'n' ? 'n' : 'y');
23 | });
24 | });
25 | }
26 |
27 | async function confirmAction(question, defaultYes = true) {
28 | const response = await askQuestion(question);
29 | return defaultYes ? response !== 'n' : response === 'y';
30 | }
31 |
32 | async function readAndParseJsonFile(filePath) {
33 | const data = await fs.readFile(filePath, 'utf8');
34 | return JSON.parse(data);
35 | }
36 |
37 | function constructEnvContent(serviceAccount) {
38 | const escapedPrivateKey = serviceAccount.private_key.replace(/\n/g, '\\n');
39 | return `FIREBASE_PRIVATE_KEY_ID=${serviceAccount.private_key_id}
40 | FIREBASE_PRIVATE_KEY="${escapedPrivateKey}"
41 | FIREBASE_PROJECT_ID=${serviceAccount.project_id}
42 | FIREBASE_CLIENT_EMAIL=${serviceAccount.client_email}
43 | FIREBASE_CLIENT_ID=${serviceAccount.client_id}
44 | FIREBASE_AUTH_URI=${serviceAccount.auth_uri}
45 | FIREBASE_TOKEN_URI=${serviceAccount.token_uri}
46 | FIREBASE_AUTH_PROVIDER_CERT_URL=${serviceAccount.auth_provider_x509_cert_url}
47 | FIREBASE_CLIENT_CERT_URL=${serviceAccount.client_x509_cert_url}`;
48 | }
49 |
50 | async function deleteFile(filePath) {
51 | await fs.unlink(filePath);
52 | }
53 |
54 | async function convertServiceAccountToJson() {
55 | if (!await checkFileExists('service-account.json')) {
56 | console.error('The `service-account.json` file does not exist. Please make sure it is in the root directory of your project.');
57 | rl.close();
58 | return;
59 | }
60 |
61 | if (!await confirmAction('Start the conversion of service-account.json to .env?\nContinue?')) {
62 | console.log('Conversion process aborted.');
63 | rl.close();
64 | return;
65 | }
66 |
67 | try {
68 | const serviceAccount = await readAndParseJsonFile('service-account.json');
69 | const envContent = constructEnvContent(serviceAccount);
70 | await fs.writeFile('.env', envContent);
71 | console.log('.env file created successfully!');
72 |
73 | if (await confirmAction('The .env file has been successfully created from `service-account.json`.\nWould you like to remove the service-account.json file now?\nContinue?')) {
74 | await deleteFile('service-account.json');
75 | console.log('The service-account.json file has been deleted successfully.');
76 | } else {
77 | console.log('The service-account.json file has not been deleted. For security purposes, please delete it manually after ensuring the .env file contains the correct information.');
78 |
79 | }
80 | } catch (err) {
81 | console.error('Error:', err);
82 | } finally {
83 | rl.close();
84 | }
85 | }
86 |
87 | convertServiceAccountToJson();
88 |
--------------------------------------------------------------------------------
/src/components/EditAccountForm.svelte:
--------------------------------------------------------------------------------
1 |
47 |
48 |
25 |
91 |
26 |
36 |
79 | 27 | Sign up 28 |
29 |30 | Already have an account? 31 | 32 | Sign in 33 | 34 |
35 |
80 |
87 |
81 |
82 |
83 |
84 | Or continue with
85 |
86 |
88 |
90 |
51 |
105 |
--------------------------------------------------------------------------------
/src/components/SigninForm.svelte:
--------------------------------------------------------------------------------
1 |
38 |
39 |
52 |
104 |
53 |
57 |
103 | 54 | Edit Account 55 |
56 |
42 |
116 |
--------------------------------------------------------------------------------
/docs/FIREBASE_SETUP.md:
--------------------------------------------------------------------------------
1 | ## Firebase Configuration
2 |
3 | To integrate your Firebase project with this starter pack, you will need to set up your Firebase configuration. Follow these steps:
4 |
5 | ### Client-side Firebase API keys:
6 |
7 | 1. Obtain your web app's Firebase configuration keys from the [Firebase Console](https://console.firebase.google.com/).
8 | - Navigate to `Project settings` > `General` > `Your apps`.
9 | - If you haven't added a web app to your project yet, click the web icon (``) and follow the prompts.
10 |
11 | ### Incorporate Client-side Firebase API keys into your project:
12 |
13 | 1. Within your project, navigate to `src/firebase/`.
14 | 2. Create or edit `client.ts` and insert your Firebase configuration:
15 |
16 | ```typescript
17 | // src/firebase/client.ts
18 |
19 | import { initializeApp } from "firebase/app";
20 |
21 | // Replace below with your app's Firebase configuration from the Firebase console
22 | const firebaseConfig = {
23 | apiKey: "your_api_key",
24 | authDomain: "your_project_id.firebaseapp.com",
25 | projectId: "your_project_id",
26 | storageBucket: "your_project_id.appspot.com",
27 | messagingSenderId: "your_messaging_sender_id",
28 | appId: "your_app_id",
29 | measurementId: "your_measurement_id",
30 | };
31 |
32 | // Initialize Firebase
33 | export const app = initializeApp(firebaseConfig);
34 | ```
35 |
36 | ### Server-side Firebase Configuration
37 |
38 | From the [Firebase Console](https://console.firebase.google.com/), navigate to `Project settings` > `Service accounts` and generate a new private key.
39 |
40 | ## Set up Environment Variables
41 |
42 | ### Automated Setup with Helper Script
43 |
44 | For a quick setup, use our `createEnvFromServiceAccount.js` script to convert your service account JSON into a `.env` file:
45 |
46 | 1. Place your service account JSON file in the project root and rename it to `service-account.json`.
47 | 2. Run the script in your terminal:
48 |
49 | ```bash
50 | node scripts/createEnvFromServiceAccount.js
51 | ```
52 |
53 | ### Manual Setup Option
54 |
55 | If you prefer to manually configure the environment variables:
56 |
57 | 1. Open `service-account.json` and manually extract the necessary fields.
58 | 2. Create a new `.env` file in your project root.
59 | 3. Use the structure below for your `.env` file, replacing each placeholder with the corresponding value from your JSON file:
60 |
61 | ```env
62 | FIREBASE_PRIVATE_KEY_ID=
43 |
115 |
44 |
55 |
101 |
102 | 45 | 46 | Sign in 47 |
48 |49 | New? 50 | 51 | Create an account 52 | 53 |
54 |
103 |
110 |
111 |
104 |
105 |
106 |
107 | Or continue with
108 |
109 |
112 |
114 |