ReactでFirebaseを使用してEmail・パスワードでの認証機能

デプロイ時は.envファイルを削除して、プラットフォームのキー管理システムを使用する。
APIキーを非表示にする方法 - Qiita
// .env

REACT_APP_FIREBASE_KEY="your_key"
REACT_APP_FIREBASE_DOMAIN="your_app_id.firebaseapp.com"
REACT_APP_FIREBASE_PROJECT_ID="your_app_id"
REACT_APP_FIREBASE_STORAGE_BUCKET="your_storage_bucket"
REACT_APP_FIREBASE_SENDER_ID="sender_id"
REACT_APP_FIREBASE_APP_ID="app_id"

// src/components/base.js

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

const firebaseConfig = {
  apiKey: process.env.REACT_APP_FIREBASE_KEY,
  authDomain: process.env.REACT_APP_FIREBASE_DOMAIN,
  projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
  storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_FIREBASE_SENDER_ID,
  appId: process.env.REACT_APP_FIREBASE_APP_ID
};

app.initializeApp(firebaseConfig);

export default app;

// src/App.js

import { BrowserRouter as Router, Route, Switch, withRouter } from 'react-router-dom';
import routes from './routes';
import './App.css';

import PrivateRoute from "./page/firebase/auth/PrivateRoute";
import { AuthProvider } from "./page/firebase/auth/AuthProvider";
import Home from "./page/firebase/components/Home";

function App() {
  return (
    <AuthProvider>
      <Router>
         <Switch>
           <PrivateRoute exact path="/react-pages/home" component={Home} />
             {routes.map((route, idx) => (
                <Route
                    path={route.path}
                    exact={route.exact}
                    component={route.component}
                    key={idx}
                />
             ))}
          </Switch>
      </Router>
    </AuthProvider>
  );
}

export default withRouter(App);

SignUpすると、Firebaseにメールアドレスとパスワードが登録され、
ログインできるようになる。
ログインすると、認証が必要なページ(Home)が表示される。
ログインしていない時は、認証が必要なページ(Home)はURLを入力しても表示できない。404 not found.
ログインしていない状態で、認証が必要なページ(Home)へのリンクを開くと、アドレスは、homeのアドレスで、ログイン画面が表示される。

http://localhost:3000
http://localhost:3000/signup
http://localhost:3000/login

【React】 Firebaseを使用してEmail・パスワードでの認証機能の実装 - Qiita

ReactでFirebase Authenticationを使う - Qiita

初心者がReact & Firebaseを使って収支管理アプリを作成（解説編） - Qiita

Reactプロジェクトで.envを使う - Qiita