How not to clear local storage on page refresh with react?

I have a simple react app using firebase authentication. After successful Login the token is stored in localStorage. But on every page refresh localStorage is being cleared and the session is lost. Browsing through other pages doesn't clear localStorage though.

Here is what it looks like in code:

  1. Index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

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

reportWebVitals();
  1. App.js
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import Login from './Login';
import Main from './Main';
import Info from './Info';
import './App.css';

function App() {
  return (
    <div className="App">
        <Router>
          <Routes>
            <Route path="/login" element={<Login/>} />
            <Route path="/" element={<Main/>} />
            <Route path="/info" element={<Info/>} />
          </Routes>
        </Router>
    </div>
  );
}

export default App;

  1. Info.js → random page that I can view without authentication needed. Refreshing while on this page (http://localhost:3000/info) also clears localStorage
import { useNavigate } from "react-router-dom";

function Info() {

    const navigate = useNavigate();
        return (
            <div>
                <div>
                    Info page
                </div>
                <button
                    onClick={() => {
                            navigate('/');
                        }
                    }>
                        Go to Main
                </button>
            </div>
        );
}

export default Info;

Here is firebase.js I use to authenticate user

import { initializeApp } from 'firebase/app';
import { getAuth, createUserWithEmailAndPassword, signInWithEmailAndPassword, signOut, setPersistence, browserLocalPersistence } from 'firebase/auth';

const firebaseConfig = {
  // Here is my config
};

initializeApp(firebaseConfig);

// Auth
const auth = getAuth();
var email;
var password;

// Auth - set persistance
setPersistence(auth, browserLocalPersistence);

// Auth - create
createUserWithEmailAndPassword(auth, email, password)
  .then((userCredential) => {
    // Signed in 
    const user = userCredential.user;
  })
  .catch((error) => {
    const errorCode = error.code;
    const errorMessage = error.message;
  });

// Auth - Login
signInWithEmailAndPassword(auth, email, password)
  .then((userCredential) => {
    // Signed in 
    const user = userCredential.user;
  })
  .catch((error) => {
    const errorCode = error.code;
    const errorMessage = error.message;
  });

// Auth - signOut
signOut(auth).then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});

export {
  auth,
  db,
  createUserWithEmailAndPassword,
  signInWithEmailAndPassword,
  signOut
};

Ответы (0 шт):