How to authenticate users using React and Firebase

Authenticating users is very hard to implement from scratch and you’ll have to write long lines of code in order to implement it but firebase makes it simple. In this article we will learn how to authenticate email and password using Firebase. We will start by setting up a project. After that, we will register a user and then we will log in with the same credentials to demonstrate the authentication.

Setting React project

Navigate to your desired folder location through command prompt or open the folder through your code editor and run the following command in your terminal.

npx create-react-app auth-example

The above command will create a folder named ‘auth-example’ and will install all the required node modules and packages for basic react app. After the folder is created, navigate to the folder by typing,

cd auth-example

Now that you are inside the required folder, type the below line to install react-router-dom, firebase, bootstrap and react-bootstrap packages.

npm i react-router-dom firebase bootstrap react-bootstrap 

After the packages are installed, create a folder called ‘components’ inside the ‘src’ folder.

In the ‘App.js’ inside the ‘src’ folder, copy paste the code given below.

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import 'bootstrap/dist/css/bootstrap.min.css';
import Home from './components/Home';
import Register from './components/Register';
import Login from './components/Login';
import Dashboard from './components/Dashboard';
import Header from './components/Header';

function App() {
  return (
    <>
      <Router>
        <Header />
        <Switch>
          <Route exact path='/login' component={Login} />
          <Route exact path='/dashboard' component={Dashboard} />
          <Route exact path='/register' component={Register} />
          <Route exact path='/' component={Home} />
        </Switch>
      </Router >
    </>
  );
}

export default App;

Create a file named ‘firebase.js’ inside the ‘src’ folder. Import firebase by typing the first line of the code snippet below. Remember the config code that you copied to your text editor, we’ll use that now. Copy and paste the code below your import line. (Note that the values of firebaseConfig in the code below are dummy and won’t work for you).  Use the code snippet that you saved before. Finally, initialize your app and export the component by typing last three lines.

import firebase from 'firebase';

const firebaseConfig = {
  apiKey: 'AIzaSyAZXy4ZH7NJkEwiAm_4rt8f4OF-jhhD7fI',
  authDomain: 'auth-example-21213.firebaseapp.com',
  projectId: 'auth-example-21213',
  storageBucket: 'auth-example-21213.appspot.com',
  messagingSenderId: '1054831087244',
  appId: '1:1054831087243:web:28d4dd276ff9e50d0c8e8e',
};

firebase.initializeApp(firebaseConfig);
const auth = firebase.auth();

export { auth };

Create a file named ‘Dashboard.js’ inside the ‘components’ folder you’ve created earlier. The below file contains message that will be displayed when your authentication is successful.

import React from 'react';

const Dashboard = () => {
  return (
    <div>
      <h1>Congo you are authenticated</h1>
    </div>
  );
};

export default Dashboard;

Inside the same ‘components’ folder, create a file called ‘Header.js’ and copy paste the code present below.

import React from 'react';
import { Navbar, Nav, Container } from 'react-bootstrap';
import { Link } from 'react-router-dom';

const Header = () => {
  return (
    <Navbar bg='light' expand='lg'>
      <Container>
        <Navbar.Brand to='/' as={Link}>
          E-Commerce
        </Navbar.Brand>
        <Navbar.Toggle aria-controls='basic-navbar-nav' />
        <Navbar.Collapse id='basic-navbar-nav'>
          <Nav className='ml-auto'>
            <Nav.Link to='/login' as={Link}>
              Login
            </Nav.Link>
            <Nav.Link to='/register' as={Link}>
              Register
            </Nav.Link>
          </Nav>
        </Navbar.Collapse>
      </Container>
    </Navbar>
  );
};

export default Header;

Inside the same ‘components’ folder create ‘Home.js’ and copy paste the below code.

import React from 'react';

const Home = () => {
  return (
    <div className='container'>
      <h1>Home Page</h1>
    </div>
  );
};

export default Home;
Discussion

3