In this article, we will learn how to implement Firebase authentication in a React app.

Firebase is an increasingly popular platform that enables rapid development of web and mobile apps. It offers a number of services such as a real-time database, cloud functions and authentication against various providers.

In the following sections, we will build a React app that has three screens:

Once the project is created, we will navigate to the 'Authentication' tab to set up sign-in methods. For now, let us enable sign-ins with a username and password.

The only other thing left to do before we start building our React app, is to add it to the Firebase project. Once we add a web app to our project, Firebase gives us the app configuration, that looks somewhat like this:

<script src="https://www.gstatic.com/firebasejs/8.2.6/firebase-app.js"></script>



<script>
  // Your web app's Firebase configuration
  var firebaseConfig = {
    apiKey: "api_key",
    authDomain: "auth_domain",
    projectId: "project_id",
    storageBucket: "storage_bucket",
    messagingSenderId: "messaging_sender_id",
	appId: "app_id"
  };
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);
</script>

We will add these configuration values into the 

 to generate a stock React app. We'll call our app 

Once this is done, we need to add a few dependencies using 

 file, we need to add the values supplied by Firebase in Step 1 like so:

REACT_APP_FIREBASE_KEY=api_key
REACT_APP_FIREBASE_DOMAIN=auth_domain
REACT_APP_FIREBASE_PROJECT_ID=project_id
REACT_APP_FIREBASE_STORAGE_BUCKET=storage_bucket
REACT_APP_FIREBASE_SENDER_ID=messaging_sender_id

More information about how environment variables work can be found in the 

 file where we will set up the Firebase SDK.

import * as firebase from "firebase/app";
import "firebase/auth";

const app = firebase.initializeApp({
  apiKey: process.env.REACT_APP_FIREBASE_KEY,
  authDomain: process.env.REACT_APP_FIREBASE_DOMAIN,
  databaseURL: process.env.REACT_APP_FIREBASE_DATABASE,
  projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
  storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_FIREBASE_SENDER_ID
});

export default app;


 which will allow us to use routes, links and redirects.

import React from "react";
import "./App.css";
import { BrowserRouter as Router, Route } from "react-router-dom";
import Home from "./Home";
import Login from "./Login";
import SignUp from "./SignUp";

const App = () => {
  return (
    <Router>
      <div>
        <Route exact path="/" component={Home} />
        <Route exact path="/login" component={Login} />
        <Route exact path="/signup" component={SignUp} />
      </div>
    </Router>
  );
};

export default App;


In order to store the authentication status and make it globally available within our app, we will use React's context API to create an 

 hook, and add an effect that will set this variable whenever the Firebase auth state changes.

 boolean variable that will show a 'Loading' message when true.

import React, { useEffect, useState } from "react";
import app from "./base.js";

export const AuthContext = React.createContext();

export const AuthProvider = ({ children }) => {
  const [currentUser, setCurrentUser] = useState(null);
  const [pending, setPending] = useState(true);

  useEffect(() => {
    app.auth().onAuthStateChanged((user) => {
      setCurrentUser(user);
      setPending(false);
    });
  }, []);

  if (pending) {
    return <>Loading...</>;
  }

  return (
    <AuthContext.Provider
      value={{
        currentUser,
      }}
    >
      {children}
    </AuthContext.Provider>
  );
};


 when logged out and be a defined object when the user is logged in. We can use this to build a 

 component which allows the user to access a route only when logged in.

import React, { useContext } from "react";
import { Route, Redirect } from "react-router-dom";
import { AuthContext } from "./Auth";

const PrivateRoute = ({ component: RouteComponent, ...rest }) => {
  const { currentUser } = useContext(AuthContext);
  return (
    <Route
      {...rest}
      render={(routeProps) =>
        !!currentUser ? (
          <RouteComponent {...routeProps} />
        ) : (
          <Redirect to={"/login"} />
        )
      }
    />
  );
};

export default PrivateRoute;


 prop which is rendered when the user is logged in. Otherwise, it redirects to the 

import React from "react";
import "./App.css";
import { BrowserRouter as Router, Route } from "react-router-dom";
import Home from "./Home";
import Login from "./Login";
import SignUp from "./SignUp";
import { AuthProvider } from "./Auth";
import PrivateRoute from "./PrivateRoute";

const App = () => {
  return (
    <AuthProvider>
      <Router>
        <div>
          <PrivateRoute exact path="/" component={Home} />
          <Route exact path="/login" component={Login} />
          <Route exact path="/signup" component={SignUp} />
        </div>
      </Router>
    </AuthProvider>
  );
};

export default App;


Let us now implement the screens that make up our app.

We can start with the simplest one, which is the home screen. All it will have is the title 'Home' and a 'Sign out' button that logs the user out of the app. This is done by calling the 

import React from "react";
import app from "./base";

const Home = () => {
  return (
    <>
      <h1>Home</h1>
      <button onClick={() => app.auth().signOut()}>Sign out</button>
    </>
  );
};

export default Home;


Let's now move on to the signup page, which is slightly more complex.

It will have the header 'Sign up', with a form that includes text inputs for email and password, and a submit button. We wrap the component with the 

When the form is submitted, we will use the 

We display an alert in case something goes wrong during this process.

If the user creation succeeds, we redirect the user to the home (

import React, { useCallback } from "react";
import { withRouter } from "react-router";
import app from "./base";

const SignUp = ({ history }) => {
  const handleSignUp = useCallback(
    async (event) => {
      event.preventDefault();
      const { email, password } = event.target.elements;
      try {
        await app
          .auth()
          .createUserWithEmailAndPassword(email.value, password.value);
        history.push("/");
      } catch (error) {
        alert(error);
      }
    },
    [history]
  );

  return (
    <div>
      <h1>Sign up</h1>
      <form onSubmit={handleSignUp}>
        <label>
          Email
          <input name="email" type="email" placeholder="Email" />
        </label>
        <label>
          Password
          <input name="password" type="password" placeholder="Password" />
        </label>
        <button type="submit">Sign Up</button>
      </form>
    </div>
  );
};

export default withRouter(SignUp);


The login page is very similar to the sign up page, with an identical-looking form. The only difference is that we will log the user in rather than create a new user when the form is submitted.

import React, { useCallback, useContext } from "react";
import { withRouter, Redirect } from "react-router";
import app from "./base.js";
import { AuthContext } from "./Auth.js";

const Login = ({ history }) => {
  const handleLogin = useCallback(
    async event => {
      event.preventDefault();
      const { email, password } = event.target.elements;
      try {
        await app
          .auth()
          .signInWithEmailAndPassword(email.value, password.value);
        history.push("/");
      } catch (error) {
        alert(error);
      }
    },
    [history]
  );

  const { currentUser } = useContext(AuthContext);

  if (currentUser) {
    return <Redirect to="/" />;
  }

  return (
    <div>
      <h1>Log in</h1>
      <form onSubmit={handleLogin}>
        <label>
          Email
          <input name="email" type="email" placeholder="Email" />
        </label>
        <label>
          Password
          <input name="password" type="password" placeholder="Password" />
        </label>
        <button type="submit">Log in</button>
      </form>
    </div>
  );
};

export default withRouter(Login);


And there we have it - we have just implemented a React app with sign up, login and home screens that uses Firebase authentication to register and authenticate users with their email and password.

We have now learned how to implement Firebase authentication with a React app.

The code used in this article is available at 

https://github.com/satansdeer/react-firebase-auth

 and a video version of this article can be found on 

<h1 data-node-type="titlePlaceholder" class="titlePlaceholder">Firebase Authentication with React</h1><div data-node-type="summary" class="summary-block">In this article, we will learn how to implement Firebase authentication in a React app.</div><p>Firebase is an increasingly popular platform that enables rapid development of web and mobile apps. It offers a number of services such as a real-time database, cloud functions and authentication against various providers.</p><p>In the following sections, we will build a React app that has three screens:</p><ul><li><p>A login screen (<code>/login</code>).</p></li><li><p>A signup screen (<code>/signup</code>).</p></li><li><p>A home route (<code>/</code>) which is only accessible when authenticated.</p></li></ul><h3 class="heading-anchor-text" id="prerequisites"><span>Prerequisites<a href="#prerequisites" rel="noopener noreferrer nofollow">#</a></span><a class="d-inline" href="#prerequisites">#</a></h3><ul><li><p><a href="https://nodejs.org/en/download/" rel="noopener noreferrer nofollow">Node.js</a> and <code><a href="https://yarnpkg.com/" rel="noopener noreferrer nofollow">yarn</a></code>.</p></li><li><p><a href="https://code.visualstudio.com/" rel="noopener noreferrer nofollow">Visual Studio Code</a> (or another code editor of your choice).</p></li><li><p>Fair working knowledge of JavaScript/TypeScript and <a href="https://reactjs.org/" rel="noopener noreferrer nofollow">React</a>.</p></li></ul><h3 class="heading-anchor-text" id="step-1-set-up-a-firebase-project"><span>Step 1: Set up a Firebase project</span><a class="d-inline" href="#step-1-set-up-a-firebase-project">#</a></h3><p>Let's create a new project on the <a href="https://console.firebase.google.com/" rel="noopener noreferrer nofollow">Firebase Console</a>. We will call our project <code>react-firebase-auth</code></p><figure class="photo figure-position-inline"><img src="https://s3.amazonaws.com/assets.fullstack.io/n/20210210194315073_Screenshot%202021-02-10%20at%2019.42.59.png" attachmentid="6f75fe63-e7c0-4c42-bbee-9d66d0839116" contenteditable="false" data-width="1450" data-height="1404"><div></div></figure><p>Once the project is created, we will navigate to the 'Authentication' tab to set up sign-in methods. For now, let us enable sign-ins with a username and password.</p><p>The only other thing left to do before we start building our React app, is to add it to the Firebase project. Once we add a web app to our project, Firebase gives us the app configuration, that looks somewhat like this:<br></p><textarea data-iscodemirror="true" data-mode="text/html" data-uniqueid="cm-lgr5D" id="cm-lgr5D">&lt;!-- The core Firebase JS SDK is always required and must be listed first --&gt;
&lt;script src="https://www.gstatic.com/firebasejs/8.2.6/firebase-app.js"&gt;&lt;/script&gt;

&lt;!-- TODO: Add SDKs for Firebase products that you want to use
     https://firebase.google.com/docs/web/setup#available-libraries --&gt;

&lt;script&gt;
  // Your web app's Firebase configuration
  var firebaseConfig = {
    apiKey: "api_key",
    authDomain: "auth_domain",
    projectId: "project_id",
    storageBucket: "storage_bucket",
    messagingSenderId: "messaging_sender_id",
	appId: "app_id"
  };
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);
&lt;/script&gt;</textarea><p>We will add these configuration values into the <code>.env</code> file in our app.</p><h3 class="heading-anchor-text" id="step-2-create-a-react-app"><span>Step 2: Create a React App</span><a class="d-inline" href="#step-2-create-a-react-app">#</a></h3><p>Let's use <code>create-react-app</code> to generate a stock React app. We'll call our app <code>react-firebase-auth</code>.</p><textarea data-iscodemirror="true" data-mode="text/x-sh" data-uniqueid="cm-dKRLK" id="cm-dKRLK">npx create-react-app react-firebase-auth</textarea><p>Once this is done, we need to add a few dependencies using <code>yarn add</code>:</p><ul><li><p><code>firebase</code> for interfacing with our Firebase project.</p></li><li><p><code>react-router</code> and <code>react-router-dom</code> to add routing to our app.</p></li></ul><h3 class="heading-anchor-text" id="step-3-configure-firebase"><span>Step 3: Configure Firebase</span><a class="d-inline" href="#step-3-configure-firebase">#</a></h3><p>In the app's <code>.env</code> file, we need to add the values supplied by Firebase in Step 1 like so:</p><textarea data-iscodemirror="true" data-mode="javascript" data-uniqueid="cm-6aSW6" id="cm-6aSW6">REACT_APP_FIREBASE_KEY=api_key
REACT_APP_FIREBASE_DOMAIN=auth_domain
REACT_APP_FIREBASE_PROJECT_ID=project_id
REACT_APP_FIREBASE_STORAGE_BUCKET=storage_bucket
REACT_APP_FIREBASE_SENDER_ID=messaging_sender_id</textarea><p>More information about how environment variables work can be found in the <a href="https://create-react-app.dev/docs/adding-custom-environment-variables/" rel="noopener noreferrer nofollow">Create React App documentation</a>.</p><p>In the <code>src</code> folder, let us create a <code>base.js</code> file where we will set up the Firebase SDK.</p><textarea data-iscodemirror="true" data-mode="javascript" data-uniqueid="cm-2z3KO" id="cm-2z3KO">import * as firebase from "firebase/app";
import "firebase/auth";

const app = firebase.initializeApp({
  apiKey: process.env.REACT_APP_FIREBASE_KEY,
  authDomain: process.env.REACT_APP_FIREBASE_DOMAIN,
  databaseURL: process.env.REACT_APP_FIREBASE_DATABASE,
  projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
  storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_FIREBASE_SENDER_ID
});

export default app;
</textarea><p></p><h3 class="heading-anchor-text" id="step-4-set-up-routing"><span>Step 4: Set up routing</span><a class="d-inline" href="#step-4-set-up-routing">#</a></h3><p>In <code>app.js</code>, we will wrap our app with the <code>Router</code> component from <code>react-router-dom</code> which will allow us to use routes, links and redirects.</p><textarea data-iscodemirror="true" data-mode="text/jsx" data-uniqueid="cm-3IbsW" id="cm-3IbsW">import React from "react";
import "./App.css";
import { BrowserRouter as Router, Route } from "react-router-dom";
import Home from "./Home";
import Login from "./Login";
import SignUp from "./SignUp";

const App = () =&gt; {
  return (
    &lt;Router&gt;
      &lt;div&gt;
        &lt;Route exact path="/" component={Home} /&gt;
        &lt;Route exact path="/login" component={Login} /&gt;
        &lt;Route exact path="/signup" component={SignUp} /&gt;
      &lt;/div&gt;
    &lt;/Router&gt;
  );
};

export default App;
</textarea><h3 class="heading-anchor-text" id="step-4-implement-authentication"><span>Step 4: Implement authentication</span><a class="d-inline" href="#step-4-implement-authentication">#</a></h3><p>In order to store the authentication status and make it globally available within our app, we will use React's context API to create an <code>AuthContext</code> in <code>src/Auth.js</code>.</p><p>We will hold the <code>currentUser</code> in the state using the <code>useState</code> hook, and add an effect that will set this variable whenever the Firebase auth state changes.</p><p>We also store a <code>pending</code> boolean variable that will show a 'Loading' message when true.</p><textarea data-iscodemirror="true" data-mode="text/jsx" data-uniqueid="cm-VsVq2" id="cm-VsVq2">import React, { useEffect, useState } from "react";
import app from "./base.js";

export const AuthContext = React.createContext();

export const AuthProvider = ({ children }) =&gt; {
  const [currentUser, setCurrentUser] = useState(null);
  const [pending, setPending] = useState(true);

  useEffect(() =&gt; {
    app.auth().onAuthStateChanged((user) =&gt; {
      setCurrentUser(user);
      setPending(false);
    });
  }, []);

  if (pending) {
    return &lt;&gt;Loading...&lt;/&gt;;
  }

  return (
    &lt;AuthContext.Provider
      value={{
        currentUser,
      }}
    &gt;
      {children}
    &lt;/AuthContext.Provider&gt;
  );
};
</textarea><p>In essence, the <code>currentUser</code> will be <code>null</code> when logged out and be a defined object when the user is logged in. We can use this to build a <code>PrivateRoute</code> component which allows the user to access a route only when logged in.</p><textarea data-iscodemirror="true" data-mode="text/jsx" data-uniqueid="cm-AYxDG" id="cm-AYxDG">import React, { useContext } from "react";
import { Route, Redirect } from "react-router-dom";
import { AuthContext } from "./Auth";

const PrivateRoute = ({ component: RouteComponent, ...rest }) =&gt; {
  const { currentUser } = useContext(AuthContext);
  return (
    &lt;Route
      {...rest}
      render={(routeProps) =&gt;
        !!currentUser ? (
          &lt;RouteComponent {...routeProps} /&gt;
        ) : (
          &lt;Redirect to={"/login"} /&gt;
        )
      }
    /&gt;
  );
};

export default PrivateRoute;
</textarea><p>The <code>PrivateRoute</code> component takes a <code>component</code> prop which is rendered when the user is logged in. Otherwise, it redirects to the <code>/login</code> route.</p><p>We can now use this in our <code>app.js</code> file after wrapping our app with the <code>AuthProvider</code>:</p><textarea data-iscodemirror="true" data-mode="text/jsx" data-uniqueid="cm-0TK8I" id="cm-0TK8I">import React from "react";
import "./App.css";
import { BrowserRouter as Router, Route } from "react-router-dom";
import Home from "./Home";
import Login from "./Login";
import SignUp from "./SignUp";
import { AuthProvider } from "./Auth";
import PrivateRoute from "./PrivateRoute";

const App = () =&gt; {
  return (
    &lt;AuthProvider&gt;
      &lt;Router&gt;
        &lt;div&gt;
          &lt;PrivateRoute exact path="/" component={Home} /&gt;
          &lt;Route exact path="/login" component={Login} /&gt;
          &lt;Route exact path="/signup" component={SignUp} /&gt;
        &lt;/div&gt;
      &lt;/Router&gt;
    &lt;/AuthProvider&gt;
  );
};

export default App;
</textarea><h3 class="heading-anchor-text" id="step-5-build-the-screens"><span>Step 5: Build the screens</span><a class="d-inline" href="#step-5-build-the-screens">#</a></h3><p>Let us now implement the screens that make up our app.</p><p>We can start with the simplest one, which is the home screen. All it will have is the title 'Home' and a 'Sign out' button that logs the user out of the app. This is done by calling the <code>signOut</code> method from Firebase's <code>auth</code> module.</p><textarea data-iscodemirror="true" data-mode="text/jsx" data-uniqueid="cm-yD8ZL" id="cm-yD8ZL">import React from "react";
import app from "./base";

const Home = () =&gt; {
  return (
    &lt;&gt;
      &lt;h1&gt;Home&lt;/h1&gt;
      &lt;button onClick={() =&gt; app.auth().signOut()}&gt;Sign out&lt;/button&gt;
    &lt;/&gt;
  );
};

export default Home;
</textarea><p>Let's now move on to the signup page, which is slightly more complex.</p><p>It will have the header 'Sign up', with a form that includes text inputs for email and password, and a submit button. We wrap the component with the <code>withRouter</code> HOC to provide access to the <code>history</code> object.</p><p>When the form is submitted, we will use the <code>createUserWithEmailAndPassword</code> method from Firebase's <code>auth</code> module to sign the user up.</p><p>We display an alert in case something goes wrong during this process.</p><p>If the user creation succeeds, we redirect the user to the home (<code>/</code>) page using the <code>history.push</code> API.</p><textarea data-iscodemirror="true" data-mode="text/jsx" data-uniqueid="cm-OfP5j" id="cm-OfP5j">import React, { useCallback } from "react";
import { withRouter } from "react-router";
import app from "./base";

const SignUp = ({ history }) =&gt; {
  const handleSignUp = useCallback(
    async (event) =&gt; {
      event.preventDefault();
      const { email, password } = event.target.elements;
      try {
        await app
          .auth()
          .createUserWithEmailAndPassword(email.value, password.value);
        history.push("/");
      } catch (error) {
        alert(error);
      }
    },
    [history]
  );

  return (
    &lt;div&gt;
      &lt;h1&gt;Sign up&lt;/h1&gt;
      &lt;form onSubmit={handleSignUp}&gt;
        &lt;label&gt;
          Email
          &lt;input name="email" type="email" placeholder="Email" /&gt;
        &lt;/label&gt;
        &lt;label&gt;
          Password
          &lt;input name="password" type="password" placeholder="Password" /&gt;
        &lt;/label&gt;
        &lt;button type="submit"&gt;Sign Up&lt;/button&gt;
      &lt;/form&gt;
    &lt;/div&gt;
  );
};

export default withRouter(SignUp);
</textarea><p></p><figure class="photo figure-position-inline"><img src="https://s3.amazonaws.com/assets.fullstack.io/n/20210210203103715_Screenshot%202021-02-10%20at%2020.30.21.png" attachmentid="bcd79925-e743-4bb2-84a5-9d13ad8eeae8" contenteditable="false" data-width="896" data-height="664"><div></div></figure><p>The login page is very similar to the sign up page, with an identical-looking form. The only difference is that we will log the user in rather than create a new user when the form is submitted.</p><p>The component also uses the <code>currentUser</code> value from our <code>AuthContext</code>, and will redirect to the <code>/</code> route when the user is logged in.</p><textarea data-iscodemirror="true" data-mode="text/jsx" data-uniqueid="cm-gOliR" id="cm-gOliR">import React, { useCallback, useContext } from "react";
import { withRouter, Redirect } from "react-router";
import app from "./base.js";
import { AuthContext } from "./Auth.js";

const Login = ({ history }) =&gt; {
  const handleLogin = useCallback(
    async event =&gt; {
      event.preventDefault();
      const { email, password } = event.target.elements;
      try {
        await app
          .auth()
          .signInWithEmailAndPassword(email.value, password.value);
        history.push("/");
      } catch (error) {
        alert(error);
      }
    },
    [history]
  );

  const { currentUser } = useContext(AuthContext);

  if (currentUser) {
    return &lt;Redirect to="/" /&gt;;
  }

  return (
    &lt;div&gt;
      &lt;h1&gt;Log in&lt;/h1&gt;
      &lt;form onSubmit={handleLogin}&gt;
        &lt;label&gt;
          Email
          &lt;input name="email" type="email" placeholder="Email" /&gt;
        &lt;/label&gt;
        &lt;label&gt;
          Password
          &lt;input name="password" type="password" placeholder="Password" /&gt;
        &lt;/label&gt;
        &lt;button type="submit"&gt;Log in&lt;/button&gt;
      &lt;/form&gt;
    &lt;/div&gt;
  );
};

export default withRouter(Login);
</textarea><figure class="photo figure-position-inline"><img src="https://s3.amazonaws.com/assets.fullstack.io/n/20210210203155676_Screenshot%202021-02-10%20at%2020.31.40.png" attachmentid="fa229d4b-783c-467d-9d0b-1ac3b80b4252" contenteditable="false" data-width="902" data-height="832"><div></div></figure><p>And there we have it - we have just implemented a React app with sign up, login and home screens that uses Firebase authentication to register and authenticate users with their email and password.</p><figure class="photo figure-position-inline"><img src="https://s3.amazonaws.com/assets.fullstack.io/n/20210210204051012_react-firebase-auth.gif" attachmentid="77fcb2dc-b092-49d9-8c3f-7eac9dbf435b" contenteditable="false" data-width="508" data-height="416"><div></div></figure><p></p><h3 class="heading-anchor-text" id="conclusion"><span>Conclusion</span><a class="d-inline" href="#conclusion">#</a></h3><p>We have now learned how to implement Firebase authentication with a React app.</p><p>The code used in this article is available at <a href="https://github.com/satansdeer/react-firebase-auth" rel="noopener noreferrer nofollow">https://github.com/satansdeer/react-firebase-auth</a> and a video version of this article can be found on <a href="https://www.youtube.com/watch?v=unr4s3jd9qA" rel="noopener noreferrer nofollow">YouTube</a>.</p>

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Firebase Authentication with React

Tags

Responses (0)

Masterclasses

Tutorials

Fullstack React with TypeScript