Firebase Made Simple And Easy | Best Tutorial For Beginners

In this blog, We’ll be making a simple website using Firebase as our Backend Service.

• Creating a Firebase Project
• Creating our Web Application
• Firebase Authentication
• Firestore Database

We’ll be using.

• Svelte & SvelteKit – Front-End

• TailwindCSS – Easy CSS styling

• Firestore – Database

• Firebase Auth – Authentication

Creating a Firebase Project

Firstly, start by heading to Firebase Console and creating your project.

The first thing you’ll see in your project is to create an application.

You’ll be given the SDK after naming it.

Be sure to keep it as we’ll use it later.

Creating our Web Application

We’ll use SvelteKit( Svelte ) and TailwindCSS for our front-end web application.

I’ll be using a template that I created. Feel free to use other Frameworks or tools of your choice.

Run npm install firebase in your command line.

Then create a firebase.js file in your project and paste the SDK that you got there.

import { initializeApp } from "firebase/app";
const firebaseConfig = {
  // Your SDK here
};
const app = initializeApp(firebaseConfig);

Next, we’ll add Firestore Database and Firebase Auth to our web.

We’ll be exporting from this file because we’ll use it in other files.

First, you’ll import the getAuth and getFirestore function from the library

import { getFirestore } from 'firebase/firestore'
import { getAuth } from 'firebase/auth'

Then we’ll use the app variable to get the Firestore and Firebase Auth instances.

export const auth = getAuth(app)
export const db = getFirestore(app)

Authentication

Enabling Google authentication Provider

Now that we’ve set up our Firebase and Initialize our app.

It’s time to do Authentication. I’ll be using Google Authentication for this project.

Enable the Google auth Provider in the Authentication tab.

This will require you to use your email.

Now that’s Google Provider is enabled. We’ll be writing the code of the page.

Front end code

In our web page code. In my case a Svelte Project, we’ll be importing auth and db from our firebase.js file.

import { auth, db } from '../firebase';

We’ll also be importing signInWithPopup and GoogleAuthProvider for our sign-in button.

import { signInWithPopup, GoogleAuthProvider } from 'firebase/auth';

Then we’ll create an instance of the Provider.

const provider = new GoogleAuthProvider();

Sign-in Function

It’s pretty easy to write. Here’s the code below.

function SignIn() {
	signInWithPopup(auth, provider)
		.then((result) => {
			console.log(result);
		})
		.catch((err) => {
			console.log(err);
		});
}

Now you can use the function to bind a button or call it when the page loads.

Here’s an example in svelte.

<button on:click={SignIn}>Sign in with Google</button>

As a result, a popup would appear when you click it.

But nothing would happen yet. If you check the console in your browser, you would see the user credentials being logged. That means that you have logged in.

You can reference your code with mine here on Github.

Auth State

For now, if the user logged in. They won’t even know if they’re logged in without looking at the console.

For that, we have a function that can check if the user has logged in or not.

It’s called onAuthStateChanged()

Start by importing the function from firebase/auth. Now your import code would be like this.

import { signInWithPopup, GoogleAuthProvider, onAuthStateChanged } from 'firebase/auth';

We’ll check if the user has logged in or not with onAuthStateChanged, this will return a user.

Then we can use that user in an if statement.

auth.onAuthStateChanged((user) => {
	if(user){
		console.log("User is logged in")
	} else {
		console.log("User is not logged in")
	}
})

We can store if the user has logged in, in a variable. Then use it to render the web differently.

We’ll also store uid we’ll use this in our Firestore section later.

let isLoggedin;
let uid;

auth.onAuthStateChanged((user) => {
	if(user){
		isLoggedin = true;
                uid = user.id;
	} else {
		isLoggedin = false;
	}
})

In my Svelte frontend code. I’ll use the isLoggedin variable to determine what the web will render.

{#if isLoggedin}
	 <div class="flex items-center justify-center w-full h-screen">
		 <h1 class="text-6xl">You have Logged in!</h1>
	</div>
{:else}
	 <div class="flex items-center justify-center w-full h-screen">
		 <button on:click={SignIn}>Sign in with Google</button>
	 </div>
{/if}

Signing Out

Making the user Sign out is even easier than signing in.

All you need is the auth instance. Then you can call auth.signOut() function.

<button on:click={() => auth.signOut()}>Sign Out</button>

I’ll use this in a button directly because it’s just only one line. But feel free to separate this into a function like Signing In

We can render that button if the user has logged in.

{#if isLoggedin}
	 <div class="flex items-center justify-center w-full h-screen">
			<button on:click={() => auth.signOut()}>Sign Out</button>
	</div>
{:else}
	 <div class="flex items-center justify-center w-full h-screen">
		 <button on:click={SignIn}>Sign in with Google</button>
	 </div>
{/if}

Firestore Database

Database Structure

The structure of Firestore is similar to JSON. With some minor differences.

Every document must be in a collection. It cannot just exist there.

And every document must have a unique id.

Every document can have multiple fields. With different types.

Using Firestore

Writing / Deleting Data

For now, we’ll only use setDoc and deleteDoc

when using these methods, you must reference the document path

I won’t be mentioning it in every method so here it is.

import { doc } from 'firebase/firestore'
const documenReference = doc(db, "collection", "test")

setDoc

Start by importing the setDoc method from firebase/firestore.

import { setDoc } from 'firebase/firestore';

Then we’ll use the uid variable that we stored earlier to set the document.

doc(db, "customers", uid means we are referencing the database db, and the "customers” collection, and our user document of uid

async function setDocument(){
	const docRef = doc(db, "customers", uid)
	await setDoc(docRef, {
		name: inputValue
	});
}

you can set { merge: true } as a parameter to update the data if it already exists.

async function setDocument(){
	const docRef = doc(db, "customers", uid)
	await setDoc(docRef, {
		name: inputValue
	}, { merge: true });
}

deleteDoc

deleteDoc deletes a document that you reference let’s say you want to delete the document you just created.

First, you reference the same document

const docRef = doc(db, "customers", uid)

Then you use the deleteDoc method by importing it.

import { deleteDoc } from "firebase/firestore";

You can something similar to the setDoc method by creating an async function.

async function deleteDocument(){
	const docRef = doc(db, "customers", uid)
	await deleteDoc(docRef);
}

Reading Data

We’ll be only using the onSnapshot method here. But there are other methods to read data like getDoc and getDocs too. You can check them out in the Firebase Docs here.hereherehere

The onSnapshot method listen to real-time changes if the document has changed its value. This will tell you that.

Start by importing it.

import { onSnapshot } from "firebase/firestore";

const unsub = onSnapshot(doc(db, "customers", uid), (doc) => {
    console.log("Current data: ", doc.data().name);
});

If you try to change data. Then it would log new data into the console.

You can read a specified field, in this case. By doc.data().name.

Firestore Rules

We don’t want anyone to access our Database and delete or change to whatever they like.

That’s where Firestore Rules comes in. It is easy to protect your database by allowing specific users to access it.

Get started by heading over to your Firestore Database and clicking the Rules Tab.

If you have created the Database in test mode you should see something similar to this.

Every project has different rules. What we want in this project is that no one else except the user can access their data. We have our document as the same id as our user.

First, we must match what we’ll be reading/writing.

match /customers/{DocID}

The DocID gives us a value that we can work with.

So we can just check if the uid of the user matches the document id simply by

match /customers/{DocID} {
    allow read, write: if request.auth.uid == DocID;
}

Summary

In this blog, we talked about how to use Firebase as an authentication provider and a database to make projects. You may also be interested in our blogs about web development. Be sure to check them out!