title: How to make a Private Route without AuthContext
body: <p>I'm trying to make a private route from my login and signup pages to my dashboard page, but all the tutorials and guides that I've stumbled upon all require some sorta AuthContext thing and I didn't implement my authentication procedure using AuthContext.<br />
  I've tried different ways but none of them work and just end up giving me a blank page when I get to the dashboard page, what can I do to make it a private route? Using Firebase v9 btw.</p>
  <p><strong>SignUp.js</strong></p>
  <pre><code>import './Signup.css'
  import React, { useState } from 'react';
  import { Link, useHistory } from 'react-router-dom';
  import { auth }from '../../../firebase';
  import { createUserWithEmailAndPassword, onAuthStateChanged } from 'firebase/auth';
  import { Typography, Container, TextField, Button, Alert } from '@mui/material';
  
  const Signup = () =&gt; {
      const [email, setEmail] = useState('');
      const [password, setPassword] = useState('');
      const [confirmPassword, setConfirmPassword] = useState('');
      const [error, setError] = useState('');
      const [user, setUser] = useState({});
      const history = useHistory();
  
      onAuthStateChanged(auth, (currentUser) =&gt; {
          setUser(currentUser);
      })
      
      const signup = async (e) =&gt; {
          e.preventDefault();
  
          if (password !== confirmPassword) {
              return setError(&quot;Passwords do not match&quot;)
          }
  
          try {
              const user = await createUserWithEmailAndPassword(
                  auth, 
                  email,
                  password
              );
              history.push(&quot;/dashboard/canvas&quot;);
          } catch (err) {
              setError(err.message);
          }
      }
  
      return (
          &lt;&gt;
              &lt;div className=&quot;text-div&quot;&gt;
                  &lt;Typography textAlign=&quot;center&quot; variant=&quot;h3&quot;&gt;Create a new account&lt;/Typography&gt;
              &lt;/div&gt;
              
              &lt;Container className=&quot;cont&quot; maxWidth=&quot;xl&quot; sx={{ backgroundColor: &quot;#ffffff&quot;, width: 500, height: &quot;auto&quot;, borderRadius: 4, marginTop: 5, display: &quot;flex&quot;, flexDirection: &quot;column&quot;, padding: 5, }}&gt;
                  { error &amp;&amp; &lt;Alert severity=&quot;error&quot;&gt;{error}&lt;/Alert&gt; }
                  &lt;TextField label=&quot;Email&quot; margin=&quot;dense&quot; type=&quot;email&quot; onChange={ (e) =&gt; {
                      setEmail(e.target.value);
                  }}/&gt;
  
                  &lt;TextField label=&quot;Password&quot; margin=&quot;dense&quot; type=&quot;password&quot; onChange={ (e) =&gt; {
                      setPassword(e.target.value);
                  }}/&gt;
  
                  &lt;TextField label=&quot;Confirm Password&quot; margin=&quot;dense&quot; type=&quot;password&quot; onChange={ (e) =&gt; {
                      setConfirmPassword(e.target.value);
                  }}/&gt;
                  &lt;Button onClick={signup} variant=&quot;contained&quot; sx={{ marginTop: 2, }}&gt;Sign Up&lt;/Button&gt;
  
                  &lt;div&gt;
                      Already have an account? &lt;Link to=&quot;/login&quot; style={{ color: '#000' }}&gt;Log In&lt;/Link&gt;
                  &lt;/div&gt;
              &lt;/Container&gt;
          &lt;/&gt;
      )
  }
  
  export default Signup;
  
  </code></pre>
  <p><strong>Login.js</strong></p>
  <pre><code>import './Login.css'
  import React, { useState } from 'react';
  import { Link, useHistory } from 'react-router-dom';
  import { signInWithEmailAndPassword } from 'firebase/auth';
  import { auth }from '../../../firebase';
  import { Typography, Container, TextField, Button, Alert } from '@mui/material';
  
  
  const Login = () =&gt; {
      const [email, setEmail] = useState('');
      const [password, setPassword] = useState('');
      const [error, setError] = useState('');
      const history = useHistory();
  
      const login = async () =&gt; {
          try {
              const user = await signInWithEmailAndPassword(
                  auth, 
                  email,
                  password
              );
              //alert(&quot;Success, user is recognized&quot;);
              history.push(&quot;/dashboard/canvas&quot;);
          } catch (err) {
              setError(&quot;The email or password you entered is incorrect&quot;);
          }
      }
  
      return (
          &lt;&gt;
              &lt;div className=&quot;text-div&quot;&gt;
                  &lt;Typography textAlign=&quot;center&quot; variant=&quot;h3&quot;&gt;Login&lt;/Typography&gt;
              &lt;/div&gt;
              
              &lt;Container className=&quot;cont&quot; maxWidth=&quot;xl&quot; sx={{ backgroundColor: &quot;#ffffff&quot;, width: 500, height: &quot;auto&quot;, borderRadius: 4, marginTop: 5, display: &quot;flex&quot;, flexDirection: &quot;column&quot;, padding: 5, }}&gt;
                  { error &amp;&amp; &lt;Alert severity=&quot;error&quot;&gt;{error}&lt;/Alert&gt; }
                  &lt;TextField label=&quot;Email&quot; margin=&quot;dense&quot; type=&quot;email&quot; onChange={(e) =&gt; {
                      setEmail(e.target.value);
                  }}/&gt;
  
                  &lt;TextField label=&quot;Password&quot; margin=&quot;dense&quot; type=&quot;password&quot; onChange={(e) =&gt; {
                      setPassword(e.target.value);
                  }}/&gt;
  
                  &lt;Button onClick={login} variant=&quot;contained&quot; sx={{ marginTop: 2, }}&gt;Login&lt;/Button&gt;
  
                  &lt;div&gt;
                      Don't have an account? &lt;Link to=&quot;/signup&quot; style={{ color: '#000' }}&gt;Create one here&lt;/Link&gt;
                  &lt;/div&gt;
                  &lt;div&gt;
                      &lt;Link to=&quot;/request-password-reset&quot; style={{ color: '#000' }}&gt;Forgot your password?&lt;/Link&gt;
                  &lt;/div&gt;
              &lt;/Container&gt;
          &lt;/&gt;
      )
  }
  
  export default Login;
  
  </code></pre>
  <p><strong>firebase.js</strong></p>
  <pre><code>import { initializeApp } from 'firebase/app';
  import { getAuth } from 'firebase/auth';
  
  const firebaseConfig = {
      apiKey,
      authDomain,
      projectId,
      storageBucket,
      messagingSenderId,
      appId,
      measurementId
  }
  
  const app = initializeApp(firebaseConfig);
  const auth = getAuth(app);
  
  export {
      auth
  };
  </code></pre>
  <p><strong>App.js</strong></p>
  <pre><code>import './App.css';
  import Home from './components/Pages/Home';
  import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
  import Signup from './components/Pages/Signup/Signup';
  import Login from './components/Pages/Login/Login';
  import UserDashboard from './components/Pages/UserDashboard/UserDashboard';
  import ForgotPassword from './components/Pages/Forgot-Password';
  
  function App() {
    return (
        &lt;Router&gt;
            &lt;div&gt;
              &lt;Switch&gt;
                &lt;Route exact path=&quot;/&quot; component={Home}/&gt;
                &lt;Route path=&quot;/signup&quot; component={Signup}/&gt;
                &lt;Route path=&quot;/login&quot; component={Login}/&gt;
                &lt;Route path=&quot;/dashboard&quot; component={UserDashboard}/&gt;
                &lt;Route path=&quot;/request-password-reset&quot; component={ForgotPassword}/&gt;
              &lt;/Switch&gt;
            &lt;/div&gt;
        &lt;/Router&gt;
    );
  }
  
  export default App;
  
  </code></pre>