Firebase AuthenticationでReactアプリに認証機能を作っており、provider.tsファイルについてエラーが出て動かない。

Question

こんにちは!
Reactアプリに認証機能を付けたくて、Firebase Authenticationを使っています。

【React】 Firebaseを使用して認証機能の実装
上記サイトを見ながら、認証機能を付けているのですが、うまく動作しません。
どのように対処したら良いのでしょうか、ご教授頂ければと思います。
また、他に良い実装方法があれば、教えて頂けると大変嬉しいです。
よろしくお願い致します。

出ているエラー

FirebaseのコンソールでもAPI Keyを見直してみましたが、全く同じでしたので、打ち間違えてはいないようでした。
また、TypeScriptでは記述しておらず、エラーに出てくるprovider.tsファイルは自分が作ったファイルではありません。

私のコード

App.jsファイル

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

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;

PrivateRoute.jsファイル

import React, { useContext } from 'react';
import { Route } from 'react-router-dom';
import { AuthContext } from './auth';
import Login from './Login';

const PrivateRoute = ({ component: RouteComponent, ...options }) => {
    const { currentUser } = useContext(AuthContext);
    const Component = currentUser ? RouteComponent : Login;
    return (
        <Route { ...options } component={ Component } />
    );
};

export default PrivateRoute;

auth.jsファイル

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

// contextの作成
export const AuthContext = React.createContext();

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

    // loginさせる関数
    const login = async(email, password, history) => {
        try {
            await app.auth().signInWithEmailAndPassword(email, password);
            history.push('/');
        } catch(error) {
            alert(error);
        }
    };

    // signUpさせる関数
    const signup = async (email, password, history) => {
        try {
          await app.auth().createUserWithEmailAndPassword(email, password);
          history.push("/");
        } catch (error) {
          alert(error);
        }
      };
    
      useEffect(() => {
        app.auth().onAuthStateChanged(setCurrentUser);
      }, []);
    
    return (
        <AuthContext.Provider
            value={{ 
                login: login,
                signup: signup,
                currentUser
            }}
        >
            { children }
        </AuthContext.Provider>
    );
    /*useEffect(() => {
        app.auth().onAuthStateChanged((user) => {
            setCurrentUser(user);
            setPending(false);
        });
    }, []);

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

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

Login.jsファイル

import React, { useContext } from 'react';
import { withRouter } from "react-router";
import { AuthContext } from "./auth";

const Login = ({ history }) => {
  const { login } = useContext(AuthContext);

  // AuthContextからlogin関数を受け取る
  const handleSubmit = event => {
    event.preventDefault();
    const { email, password } = event.target.elements;
    login(email.value, password.value, history);
  };

  return (
    <div>
      <h1>Log in</h1>
      <form onSubmit={handleSubmit}>
        <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);

SignUp.jsファイル

import React, { useContext } from "react";
import { withRouter } from "react-router";
import { AuthContext } from "./auth";

const SignUp = ({ history }) => {
  const { signup } = useContext(AuthContext);
  // AuthContextからsignup関数を受け取る
  const handleSubmit = event => {
    event.preventDefault();
    const { email, password } = event.target.elements;
    signup(email.value, password.value, history);
  };

  return (
    <div>
      <h1>Sign up</h1>
      <form onSubmit={handleSubmit}>
        <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);

Home.jsファイル

import React from 'react';
import { app } from '../base';

function Home(props) {
    return (
        <div>
            <h2>Home Page</h2>
            {/* ログアウトさせる */}
            <button onClick={() => app.auth().signOut()}>Sign Out</button>
        </div>
    );
}

export default Home;

index.jsファイル

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(
    <App />,
  document.getElementById('root')
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

ファイル構成

補足

.envファイルのファイル名を、credentials.envから、.envに変更してみましたが、
以下のエラーになりました。同じく、provider.tsファイルのエラーです。

Answer 1

初めてReactを触ってみたが、ログイン周りの決定打が見つからなかったので自分で書いてみた。
上記のサイトを参考に、Firebaseの利用は諦めて、Reactだけで実装してみました。無事、ログインはできました。