Gym per Day 🏋️‍♂️ | Integrating Authentication 🔐, Forgot Password Page 🔁, Login Page 🔑 & Sign Up Page 📝

Here in this session, we will learn about authentication as first step and as in last session we discussed about idea behind the app, and landing page of the app🔐🏋️‍♂️

Before proceeding further make sure you have watched previous session ▶️📺

Here in this we designed Home page, Login Page, Forgot password page, Sign up page - the code for pages is explained by developer in the videos 🏠🔑🔁📝

Here since we will be using firebase as our authentication here, let us create an account for the same🔥🔐

Creating Firebase App 🔥

Create a firebase account - Firebase console  🌐

Now click on create a new firebase project ➕

You can turn off Google Analytics as it is not recommended for demo app 🚫📊

click on Add app ➕📱

select web 🌍

Register your app

make sure to save config file as we are going to use it in our code for authentication 💾🔐

Creating Firebase Authentication  🔐

Now click on Build 🏗️

click on Authentication > Get started 🚀

since for this setup, we will go on basic email/password authentication  📧🔑

and now post enabling authentication, we need database to store credentials , let us use firebase database for saving user credentials 🗄️

Creating Firebase Database 🗄️

Build > Firestore Database > Create Database 🏗️

click on standard edition ⭐

select location 📍

select test mode or production mode for this as rules can be updated later as well ⚙️

Now our Database and authentication is ready ✅

And now since our DB setup is ready, Download our code from here - Gym per day Day2

Deploying and Integrating Firebase Authentication for App 🚀

Download VS code and now in VS code 💻

command 

git clone https://github.com/sagarkakkalasworld/Gym-per-day-Day2.git

And also make sure nodejs and npm are install in your local 🧩

And now install firebase and react router dom 

command:

npm install firebase

npm install react-router-dom

Now in the code, find firebase.js file in src folder  📂

Now update the config file with details which we got while configuring app, in case, you missed, Go to firebase console 🔁

Click on Apps> settings icon  ⚙️

and scroll down to find details ⬇️

And copy paste the code in firebase.js 📋

and now let us build this app on our local🛠️

command:

npm run build

and now to deploy it on local🌐

command

npm run dev

And now access localhost at port shown🌐

and landing page🏠

Testing Authentication 🧪

let us test authentication, click on sign up📝

Now if you see, firebase console - users are created 👥✅

but it fails to store credentials as Db has only read access, let us now update rules of database ⚠️

Now since we allowed both read and write, let us try sign up again

post sign up, you will be able to observer our DB is now getting updated with user information

and if i try to create account with same user again

since as of now,we have added both user types to same app, two roles are given here Gym owner and Gym user

and post login, it takes you back to home page as post login pages are not designed yet

and let us try "Forgot password" now

And now to check the mail, check in Junk or spam📩🚫📬