Login and Registration and Session management in ReactJS
- Login and registration => ( Firebase ) as a Database management
- State management => ContextAPI
(We use Authentication from Firebase for Login and Registration Process)
Packages Used in our project
-----------------------------------------------------------------------------
1. How To Create App in Firebase ?
- Click on Add project to create a new Project
- Give a Project Name and Click >> Continue
- Uncheck Embed Google Analytics option then >> Create project
- it take some time, just sit back and enjoy the process
- When this screen is shown >> Project creation process is complete then click >> Continue
- Click on the settings sign then Project settings
-In project Settings under General tab scroll down >> then choose your project platform
-Give a name of your app (as your choice) >> Register app
After completing Registering Process go Project Settings >> Scroll Down there you saw your app name
- Copy marked section as shown above (only firebaseConfig variable)
2. Take a Look of our File Structure
3. How To Connect ReactJS Project With Firebase ?
- Create a new file under src > config.jsx ( paste firebaseConfig which you just copy from firebase )
Create a new file under src > firebase.jsx ( Here we Initialize our Firebase App )
1st we create our NavBar, Home, Logout, Login, and Logout Component
- 2nd we write a context for state management
3rd we provide this context value in App.js file
4th in NavBar.jsx we access context authContext variable for doing Logical operation based on Logged in or out condition
- 5th Code for Registration.jsx
- Here we use Asynchronous Function
For registering email and password we use createUserWithEmailAndPassword() function
6th Code for Login.jsx
- Here also we use Asynchronous Function
For registering email and password we use signInWithEmailAndPassword() function
7th Code for Logout.jsx
- Here we change he context value as false
--------------TANK YOU------------------ SATAM KUNDU