Deploying React web app on Apache with authentication using .htaccess

About

This is a simple tutorial and example on how to create a react and deploy a React web app on Apache. The web app has 3 pages: home, public, and private. The private page requires user authentication, which is implemented using an .htaccess file. If you choose to download this source code, please skip to Build and Deploy the app to Apache.

System Setup

Install Node.js, npm, and Apache

sudo apt update 
sudo apt install nodejs npm apache2

Install the following react packages

sudo npm install react-router-dom

Create React app

Create the project

npx create-react-app my-app 

Add the following files:

1. Public.js

import React from 'react'; 

function Public() {
    return (
        <div style={{textAlign: 'center'}}>
            <h1>Test Page</h1>
            <p>This content is not protected. </p>
        </div>
    );
}

export default Public; 

2. Private.js

import React from 'react'; 

function Private() {
    return (
        <div style={{textAlign: 'center'}}>
            <h1>Secret Page</h1>
            <p>This content is protected. </p>
        </div>
    );
}

export default Private; 

Update Home.js to

import logo from './logo.svg';
import React from 'react'; 
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';

function Home() {
    return (
        <div className="App">
            <header className="App-header">
                <img src={logo} className="App-logo" alt="logo" />
                <p>
                    Edit <code>src/App.js</code> and save to reload.
                    Haha, I edited the code 
                    Test
                </p>
                {/* Using a href forces the browser to send a fresh HTTP request to /private
                    Which allows Apache to handle authentication and rewriting */}
                <a href="/private">
                    <button>Go to Secret Page</button>
                </a>
                <Link to="/public">
                    <button>Go to Test Page</button>
                </Link>
            </header>
        </div>
    );
}

export default Home;

Update App.js to

import './App.css';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Home from './Home'; 
import Private from './Private';
import Public from './Public';

function App() {
  return (
    <>
      <Router>
        <Routes>
          <Route path = '/' element = {<Home/>} /> 
          <Route path = '/private' element = {<Private/>} /> 
          <Route path = '/public' element = {<Public/>} />
        </Routes>
      </Router>
    </>
  );
}

export default App;

Testing your React app

To test your react app by running the following within the my-app directory:

npm run start 

Build and Deploy the app to Apache

Once you are finished creating your react app, build and deploy by running the following commands within the my-app directory:

npm run build 
sudo cp -r build/* /var/www/html/ 

Adding Authentication

.htaccess

The .htaccess file is the high-level configuration file for Apache websites. It will be how we add authentication to our app. Within /var/www/html add the .htaccess file with the following content (if you downloaded the source code, just copy .htaccess over):

<If "%{REQUEST_URI} =~ m#^/secret#">
    AuthType Basic 
    AuthName "Restricted Content"
    AuthUserFile /etc/apache2/.htpasswd 
    Require valid-user
</If>

RewriteEngine On
RewriteBase /

RewriteCond %{REQUEST_FILENAME} !-f 
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^ index.html [L]

Make sure Apache's Basic Authentication module is enabled by running the following:

sudo a2enmod auth_basic
sudo a2enmod auth_file

If Apache doesn't recognize the RewriteEngine, run the following:

sudo a2enmod rewrite

Adding users

Use the htpasswd command to create a password file and add users. For example, the following creates the password file and adds the user username

sudo htpasswd -c /etc/apache2/.htpasswd usename

htpasswd will promt you to enter a password. To add more users, run the same command, but without the -c flag.

Update Apache's configuration

To allow .htaccess to override, edit the relevant block in /etc/apache2/apache2.conf

<Directory /var/www/>
	Options Indexes FollowSymLinks
	AllowOverride All
	Require all granted
</Directory>

Deploying your web app

Now that everything is added run:

sudo systemctl restart apache2 

In your browser's address bar, enter localhost to explore your new app! When you want to stop the web server, run:

sudo service apache2 stop