From the course: React: Cloud-Powered Apps with Firebase

Firebase Authentication setup

From the course: React: Cloud-Powered Apps with Firebase

Start my 1-month free trial

Firebase Authentication setup

“

- [Instructor] Now that we have set up our web application with Firebase by adding configuration values, we first need to add authentication through the Firebase console. Click on Authentication, then Set up sign-in method. We will enable email and password sign-in for now. We will be using routing in our application and achieving this with React Router. Let's first install this. At the time of this recording, the version used is 5.2.0. So let's install that version, npm install react-router-dom@5.2.0. Let's create a sign-up component that will provide a form for the user to sign up. We'll create a new folder to house the pages in our application. I have provided a starting point for the form. In the exercise files, head to the resources folder, then folder 02-01, and you can grab the Signup.js file and drag it to the new pages folder. The classes used for the HTML elements here are from a Semantic UI framework. You can visit the Semantic UI documentation site if you wish to have a different look. I have also provided some CSS here. Let's go ahead and copy that and paste it into App.css. And then we'll go ahead and uncomment this. Next we want to display this form at a new route for our application. In App.js, let's import our new page, import from ./pages/Signup. We will also import Route, Switch, and BrowserRouter from react-router-dom. Let's set up routing now. We can wrap everything using BrowserRouter, which is the main building block for routing. It uses HTML5 History API in order to keep our UI in sync with the URL. Next, inside the container, we will use the switch component, which allows us to render a route exclusively. We will have a new route. We want to match the exact path. The path will be /signup and the component will be the new Signup component we just created. Let's go ahead and run npm start. Once that is done, you can go ahead and visit /signup and see our new form.

Contents