In the Firebase console, go to Authentication, then Sign in Method, and enable the Email/Password method. And we use signInWithEmailAndPassword and createUserWithEmailAndPassword for Signing in and Registering using the email and password, respectively. Import Box from TextField from default function BasicTextFields() from 'firebase/auth' Select this text field to get the input fields, and choose any input field type you want. This will contain all our common components that we will use, like Forms, Buttons, and so on.Ĭreate a file called Form.js inside the common folder. And inside that component, we will create another folder called common. Meanwhile, let's create a folder inside the src folder, which will be called components. To install it, simply use the command below: // with npm How to Create the Login and Register Formįor these forms, let's install Material UI. But let's clear it for the Login and the Register Form. Then, go into the project folder and type npm start to start the project. To create a React application, we will use the command below: npx create-react-app react-firebase-v9 Creating a React application Make sure you have Node installed, but if you don't, install it from. We will use the following packages or dependencies: We will create Firebase functions for Login and Register, we will add toast messages for errors, and we will add private routes using session-based authentication. I'm usually make a seperate folder called router to handle all my routing files, so let create.

The project created by CRA is just only contains React core so if we want to do routing we'll need. Hey everyone, in this tutorial we'll use React with Firebase V9 to setup authentication for an application. Basic Routing & Auth in React Install Dependency.

React router dom auth