Prevent user from go back to the login page when user logged in React js

user_15819691 0
Viewed 5928

In login functionality, I just want once user logged in the website,user can not go back on login page but don't want to disable browser back button on dashboard,I want user to redirect to the browser first page on click browser back button.

react-router-dom reactjs
4 Answers

As per react-router version-6 you can follow below steps:-

Here, isAuth is boolean value...if the user is loggedIn it will become true else false.

we are sending isAuth, to ProtectedRoutes as props, based on that boolean value it will show components(<Outlet/>)

// In ProtectedRoutes.js
import { Navigate, Outlet } from "react-router-dom";
const ProtectedRoutes = ({auth}) => {
    
    return (auth === true ? <Outlet /> : <Navigate to="/" replace/>)
}
export default ProtectedRoutes;


// In App.js (or) routes.js

       <Routes>
          <Route path='/' element={<LandingPage />} />
          <Route path='/signup' element={isAuth ? <Navigate to="/" /> : <SignUp />} />
          <Route path='/login' element={isAuth ? <Navigate to="/" /> : <Login />} />
          <Route path='/forgetpassword' element={isAuth ? <Navigate to="/" /> : <ForgetPassword />} />
          <Route path='/contactus' element={<ContactUs />} />
          {/* Protected Routes starts from here */}
          <Route element={<ProtectedRoutes auth={isAuth}/>}>
            <Route path='/dashboard' element={<Dashboard />} />
            <Route path='/availablechitplans' element={<AvailableChitPlans/>}/>
            <Route path='/notifications' element={<Notifications/>}/>
            <Route path='/chitplaninfo' element={<ChitPlanInfo/>}/>
            <Route path='/payment' element={<PaymentPage />}/>
          </Route>
        </Routes>
user_156354830

You can create a HOC for this where you can check against the cookie or localStorage (where you are storing authtoken/userid or any valid identifier) when API gives reponse on submitting valid login details.

Below is an HOC component named ProtectedRoutes which you can use accordingly to your needs. This will redirect the validate user to the passes route if token is found. If not then will be redirected to HomePage(/).

import React from "react";
import { Route, Redirect } from "react-router-dom";

export const ProtectedRoute = ({ component: Component, ...rest }) => {
  var login = localStorage.getItem("token");
  return (
    <Route
      {...rest}
      render={(props) => {
        if (login) {
          return <Component {...props} />;
        } else {
          return (
            <Redirect
              to={{
                pathname: "/",
                state: {
                  from: props.location,
                },
              }}
            />
          );
        }
      }}
    />
  );
};

Example Usage : <ProtectedRoute path="/dashboard" exact component={Dashboard} />.
This will redirect the user to /dashboard after Login.

And for user to prevent going back to the login screen you can implement check something like this in your routes.js

var isLoggedIn = localStorage.getItem("token");

<Route path="/" exact component={isLoggedIn ? Dashboard : Login} />
user_47515930

I don't know exactly how you verify that someone is logged in. As long as there is a statement making you able to verify that the user is logged in. A solution might be the useHistory hook. Try to use history.push to redirect the user. More info here: https://reactrouter.com/web/api/Redirect/push-bool

user_95372530

if the request is successfull, you will get the token from the backend response, store that in the localStorage using localStorage.getItem() method. Then access that token in the localStorage, whereever you want to prevent the user to going back to the login page.

const setToken = localStorage.setItem('userToken',token) --> here token is comming from backend & userToken is nothing but accessing key.

const isToken = localStorage.getItem(userToken)

if isToken is true make use of the ternary operator

Note: use jwt in backend to generate the token after hashing the password. Important point: make sure to delete the localStorage key and value once the user is signed out.

refer this article

user_148378060
Related