How to add IsLoggedIn fuction in React and change Navbars everytime a user logs in?-CodePudding

Hello guys I got the following code inside my App.js file:

const history = createHistory();

function App({ calendarStore }) {
const [isLoggedIn, setIsLoggedIn] = useState(
    !!localStorage.getItem("isLoggedIn")
  );

  
  return (
    <div>
      
      <Router history={history}>
        <Navbar bg="primary" expand="lg" variant="dark">
          <Navbar.Brand href="/">Home</Navbar.Brand>
          <Navbar.Toggle aria-controls="basic-navbar-nav" />
          <Navbar.Collapse id="basic-navbar-nav">
          <Navbar.Brand href="/">About Us</Navbar.Brand>
          <Navbar.Brand href="/register">Register</Navbar.Brand>
          <Navbar.Brand href="/login">Login</Navbar.Brand>
          </Navbar.Collapse>
        </Navbar>
        <Route
          path="/"
          exact
          component={props => (
            <HomePage {...props} calendarStore={calendarStore} />
          )}
         />
          <Route 
          path='/login'
          exact
           component={login} 
           
          />
          <Route 
          path='/register'
          exact
           component={register} 
           />
      </Router>
    </div>
  );
}
  


export default App;

I was wandering How i can attach LoggedIn value inside my Code so if user is notLoggedIn he can see only Register and Login page and when he logs he will only can see the homepage from the Navbar.

CodePudding user response：

Take a look at conditional rendering https://reactjs.org/docs/conditional-rendering.html

{isLoggedIn && <Navbar.Brand href="/">Home</Navbar.Brand>} // show only if logged in
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Navbar.Brand href="/">About Us</Navbar.Brand>
{!isLoggedIn && <Navbar.Brand href="/register">Register</Navbar.Brand>} // show only if not logged in
{!isLoggedIn && <Navbar.Brand href="/login">Login</Navbar.Brand>}

CodePudding user response：

You could always use the useState feature in react, for example:

const [loggedIn, setLoggedIn] = useState(false)

and then inside the return of the component

{loggedIn ? <NavbarLoggedIn /> : <Navbar />}

You could also use Redux toolkit for global states, that would be a better solution to be fair, but yeah thats a basic way of implementing this

CodePudding user response：

Both above answers are correct in that you can use conditional rendering to ensure that the page does not render the component dependent upon if the user is logged in or not.

However, this does not stop people from accessing the route by entering it into the browser.

You should check out private-routes from React-Router-Dom V6, this will ensure that even if by accident, the link to the register page, cannot be accessed by those who have already registered.

Just an added extra to ensure that people cannot create multiple accounts etc.

How to use Private route in react-router-dom@v6

Edit: You can use useEffect to detect the object (if it is saved in LS) and then set the state too true if it does exist.

useEffect(() => {
if(localStorage.getItem("isLoggedIn")){
  setIsLoggedIn(true)
 } else {
   setIsLoggedIn(false)
  }
})

This will check if the localStorage.getItem("isLoggedIn") exists and then set the loggedIn state to true if found, else, it will keep it false.

I would set the initial state of

const [isLoggedIn, setIsLoggedIn]=useState(false)