Search⌘ K
Home
Courses
Integrating Firebase with React

Exercise 10: Protected Routes

Explore how to implement protected routes in a React app using Firebase authorization techniques. Learn to restrict access to user-specific pages, ensuring redirection to sign-up when unauthorized users try to access protected routes. Gain foundational knowledge to extend role-based or permission-based authorization in your applications.

We'll cover the following...

Project

import React from 'react';

import { AuthUserContext } from '../Session';
import { PasswordForgetForm } from '../PasswordForget';
import PasswordChangeForm from '../PasswordChange';
import { withAuthorization } from '../Session';

const AccountPage = () => (
  <AuthUserContext.Consumer>
    {authUser => (
      <div>
        <h1>Account: {authUser.email}</h1>
        <PasswordForgetForm />
        <PasswordChangeForm />
      </div>
    )}
  </AuthUserContext.Consumer>
);

const authCondition = authUser => !!authUser;

export default withAuthorization(authCondition)(AccountPage);

Now, all the user-specific routes are protected. Without signing in, we cannot access a protected page such as Home or Landing.

If we try replacing the ...