Setting up Google Authentication With Firebase🚀
Tags: firebase, authentication, webdev, beginners
Published: 2021-06-08 13:03:00

# A Bit About Me
Hey folks👋🏻, I am Karan Choudhary. A frontend developer passionate about web technologies and building things with code💻.

In this article, we will learn the easiest and the fastest way to setup Google Authentication with Firebase. So without wasting any time, let's get straight into it.
## Why Firebase Authentication?
![firebase](https://firebase.google.com/docs/auth/images/auth-providers.png)
Most apps need to know the identity of a user. Knowing a user's identity allows an app to securely save user data in the cloud and provide the same personalized experience across all of the user's devices.

Firebase Authentication provides backend services, easy-to-use SDKs, and ready-made UI libraries to authenticate users to your app. It supports authentication using passwords, phone numbers, popular federated identity providers like Google, Facebook and Twitter, and more.

Firebase Authentication integrates tightly with other Firebase services, and it leverages industry standards like OAuth 2.0 and OpenID Connect, so it can be easily integrated with your custom backend.

## Getting Started
Since we'll be needing some starter files for that. I've published a NPM package for easy build setup. Or else you can just clone the GitHub Repository. 

## Installation⚒️
**You’ll need to have Node 10.16.0 or later version on your local development machine**. I recommend using the latest LTS version.

To create a new app, you may choose one of the following methods:
### npm
1. Install the package

```sh
npm i firebase-auth-app
```
2. Create a project using Firebase-Auth-App CLI

```sh
firebase-auth-app
```
3. Install dependencies

```sh
npm install
```

### git
1. Clone the repository

```bash
git clone git@github.com:itskaranchoudhary/firebase-auth-app.git
```

2. Change the working directory

```bash
cd firebase-auth-app
```

3. Install dependencies

```bash
npm install
```

It will create a directory called `firebase-auth-app` inside the current folder.<br>
Inside that directory, it will generate the following project structure and install the required dependencies.

## File Structure
  
```bash
├── src/
│   └── assets
│   └── scripts
│   └── styles
│   └──favicon.ico
├── .gitignore
├── firebase.json
├── index.html
├── package-lock.json
└── package.json
├── README.md
├── LICENSE
``` 

## Creating a Firebase Project
First of all, go to you  [firebase console](https://console.firebase.google.com/) and Create a new project. 

![enter image description here](https://firebasestorage.googleapis.com/v0/b/url-creator-2ee08.appspot.com/o/Screenshot%20%28133%29.png?alt=media&token=13a60363-85d2-4cb5-be77-2b37976816c2)

After creating a project, click on  **Web**  button to register your web app.  ![enter image description here](https://firebasestorage.googleapis.com/v0/b/url-creator-2ee08.appspot.com/o/Screenshot%20%28134%29.png?alt=media&token=f924455a-9a98-4495-a3fc-32be862a16d9)
Enter the name of your web app and that's it.
![enter image description here](https://firebasestorage.googleapis.com/v0/b/url-creator-2ee08.appspot.com/o/Screenshot%20%28136%29.png?alt=media&token=81b565eb-30da-419d-92cd-2e02b4b7d1db)

##  Enabling Google Authentication
Since you have added the web app, enable the Google Sign-Up Method under the `Authentication/Sign-In Method/Sign-In Providers`

![enter image description here](https://firebasestorage.googleapis.com/v0/b/url-creator-2ee08.appspot.com/o/Screenshot%20%28128%29.png?alt=media&token=c004aaad-3a8f-4f17-b725-fb86a58b6787)

## Adding the Authorized Domain
Since Firebase Auth doesn't work with live server. You'll have to manually add the domain you would be deploying your app to. 

Go to `Authentication/Sign-In Method/Authorized Domains`add your domain. 

![enter image description here](https://firebasestorage.googleapis.com/v0/b/url-creator-2ee08.appspot.com/o/Screenshot%20%28131%29.png?alt=media&token=a3819431-0098-40c3-a67f-4be041c94b30)

## Firebase Config
Now, go to  **Project Settings > SDK Setup and Configuration**  to get your  `firebaseConfig`. 

![enter image description here](https://firebasestorage.googleapis.com/v0/b/url-creator-2ee08.appspot.com/o/Screenshot%20%28140%29.png?alt=media&token=b80615bf-d03d-41f3-b03b-2f4a6f3caa48)

It should look something like this
```
var firebaseConfig = {
    apiKey: "API_KEY",
    authDomain: "PROJECT_ID.firebaseapp.com",
    databaseURL: "https://PROJECT_ID.firebaseio.com",
    projectId: "PROJECT_ID",
    storageBucket: "PROJECT_ID.appspot.com",
    messagingSenderId: "SENDER_ID",
    appId: "APP_ID",
    measurementId: "G-MEASUREMENT_ID",
  };
  ```

Copy the config and paste it into `index.html > script tag`.

🌟 You are all set!

## Testing the App
To test the app, we need to deploy it to the domain we have added in the firebase console. 

Since, I have already deployed my app. I can visit https://friendlychatapp.netlify.app to check if the authentication is working properly or not.

![enter image description here](https://firebasestorage.googleapis.com/v0/b/url-creator-2ee08.appspot.com/o/Screenshot%20%28145%29.png?alt=media&token=a725f12f-2140-42cf-b3b4-65bb1f8d2312)
And it seems like everything is working fine.✔
![enter image description here](https://firebasestorage.googleapis.com/v0/b/url-creator-2ee08.appspot.com/o/Screenshot%20%28146%29.png?alt=media&token=d93f2edd-1b1b-403d-a8bf-79266acfcf7d)
Now, go to [firebase console](https://console.firebase.google.com/) and open up your firebase project and go to **Authentication > Users**.
![enter image description here](https://firebasestorage.googleapis.com/v0/b/url-creator-2ee08.appspot.com/o/Screenshot%20%28147%29.png?alt=media&token=d7416d4a-e412-487d-964d-34ab5421b10a)
We can see a that a new user is added✨.

Let's do another check by logging the user details in the console using `console.log()`
Copy and paste the following code in the console:
```
var user = firebase.auth().currentUser;
var name, email, photoUrl, uid, emailVerified;

if (user != null) {  
	name = user.displayName;  
	email = user.email;  
	photoUrl = user.photoURL;  
	emailVerified = user.emailVerified;  
	uid = user.uid;  // The user's ID, unique to the Firebase project. 
	}
	
console.log(name, email, uid);
```
If everything is right it should log my details in the console. 
![enter image description here](https://firebasestorage.googleapis.com/v0/b/url-creator-2ee08.appspot.com/o/Screenshot%20%28148%29.png?alt=media&token=ca41b27f-31bc-4468-902e-ea3415555dea)
That's pretty much it! Congratulations. You've just setup Google Authentication using Firebase🥳

## Wrap Up
So that's it. Hope you enjoyed the article. Feel free to share your thoughts in the comment section below. Any feedback is greatly appreciated.

Feel free to the check out my GitHub: [https://github.com/itskaranchoudhary](https://github.com/itskaranchoudhary)  
Star the repo⭐: [https://github.com/itskaranchoudhary/firebase-auth-app](https://github.com/itskaranchoudhary/firebase-auth-app)  
Find the NPM Package here: [https://www.npmjs.com/package/firebase-auth-app](https://www.npmjs.com/package/firebase-auth-app)

---