Welcome to the Homepage!

This website was made for introductional purposes and showcase the use of authentication methods.

Firebase Project Setup Guide

Preparing your first Firebase project!

Create a Firebase Account

Visit the Firebase Console.

Create a New Project

Click on "Add project" and follow the prompts to name your project.

Configure Google Analytics settings if desired, then click "Create project".

Register Your App

In the Firebase Console, click on the web icon () to set up Firebase for a web app.

Click "Register app".

Firebase Hosting is optional.

Add Firebase SDK to Your Project

After registering, you'll see a setup screen with a Firebase configuration object.

Copy the configuration object, which looks like this:

                                    
const firebaseConfig = {
  apiKey: "your-api-key",
  authDomain: "your-auth-domain",
  projectId: "your-project-id",
  storageBucket: "your-storage-bucket",
  messagingSenderId: "your-messaging-sender-id",
  appId: "your-app-id"
};

Install Firebase SDK

In your project directory, run:

npm install firebase

Initialize Firebase in your app with the configuration object:

import { initializeApp } from "firebase/app";
const firebaseApp = initializeApp(firebaseConfig);

Install Firebase CLI (Optional)

If you need to deploy to Firebase Hosting or use other CLI features, install it globally:

npm install -g firebase-tools

firebase login
firebase init

firebase login will prompt a login to authenticate the user and grant access to Firebase project via the terminal.

firebase init will guide the user through selecting and configuring Firebase services for their project.

Deploy Your App (Optional)

If using Firebase Hosting, deploy your app with:

firebase deploy

How my MJS file is setup

                      
import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";

const firebaseConfig = {
  apiKey: "your-api-key",
  authDomain: "your-auth-domain",
  projectId: "your-project-id",
  storageBucket: "your-storage-bucket",
  messagingSenderId: "your-messaging-sender-id",
  appId: "your-app-id"
};

export const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);

I made it like this so I can have 'auth' be exported and used wherever I might need it for authorizing access and also in my case the other login providers.

Learn how to add Authenticated logins and hosting? Read more below!

Hosting, the simplest step and setup!

Before you start, make sure you have the Firebase CLI installed. If not, install it using npm install -g firebase-tools.

1. Create a new file in the root directory called 'firebase.json'.

2. Inside this file, paste the following configuration:

{
  "hosting": {
    "public": "public",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"]
  }
}

Firebase will use the 'public' folder when hosting as default (root). If you are using Vite or another bundler that generates a 'dist' folder, configure it to use that folder instead.

3. Ready to launch! In the terminal, run firebase deploy to upload your website to Firebase.

Test your deployment locally using firebase serve before deploying, for testing Firebase-specific features.

If you are using Vite and run npm run build, you can automate the deployment process by running firebase deploy immediately afterward.

To do this, add the following script to the "scripts" section of your package.json: "deploy": "npm run build && firebase deploy".

Now you can run npm run deploy for build and hosting!

Enabling Firebase other authentication

This short guide will show you how to enable 'Email/Password' and other providers for authentication.

1. Navigate to the Firebase console.

2. On left hand side you can see 3 dropdown menus, 'Build' , 'Run' and 'Analytics'.

3. Click 'Build' to expand and click 'Authentication'.

4. Once there, first tab will show a list of registered users, enter tab two 'Sign-in method'.

5. Now you can click the button that says 'Add new provider' and that should allow you to pick from many of the various options Firebase offer from different providers.

Some of the providers they have:

And more!

Reference and video guides:

Google authentication

Video guide how to setup Google authentication Firebase authenticate using Google

Github authentication

Video guide how to setup Github authentication Firebase authenticate using Github

Regular Email/Password

Video guide how to setup basic register and login Firebase authenticate using basic email and password