Let’s make an authentication system firebase in react?

Let’s make an authentication system firebase in react?

What is a firebase?

Firebase is a popular and comprehensive mobile and web application development platform created by Google. It offers a wide range of services like real-time database, authentication, cloud hosting, cloud functions, analytics, and more. Firebase is known for its ease of use, real-time capabilities, and strong integration with various development frameworks, making it a valuable resource for developers looking to create powerful and responsive applications.

Packages Required

All you need is just firebase install it from npm.

npm install firebase

Project setup

Create a react app with (npx create react-app)

Go to Firebase then go to the console and create a new project name whatever you want. Go to Web option and register your app then create a config folder in your react app src folder make a config.js file and add firebase sdk to your app. Then go to the sidebar then Build->Authentication then get started choose what method you want your user to sign up (In this tutorial i’m choosing Email/Password) then enable it.

1.png

2.png

3.png

4.png

5.png

Then import getAuth function from firebase/auth

import { getAuth } from "firebase/auth";

In bottom export auth from config.js

export const auth = getAuth(app);

Then import it in your auth page. Create a login and Sign up form and create a handler async function on onSubmit then prevent the default behavior.

Import createUserWithEmailAndPassword and signInWithEmailAndPassword from firebase/auth.

import { createUserWithEmailAndPassword } from  "firebase/auth";

In the Sign up form handler create try catch block and await signInWithEmailAndPassword and pass auth function imported from config.js and pass userEmail and userPassword.

const user = await createUserWithEmailAndPassword ( auth, userEmail, userPassword);

And That's it. When a user enters email and password it will Create user with a given email and password.

Now for login.

Import signInWithEmailAndPassword from firebase/auth

import { signInWithEmailAndPassword } from  "firebase/auth";

In the Login handler function create a try catch block and await then pass auth function and userEmail and userPassword.

const user = await createUserWithEmailAndPassword ( auth, userEmail, userPassword);

And That's it When user enter email and password it will login user with given email and password.