Checking if user is authorized in React Reactor 6

Question

I am using a YouTube tutorial to learn React. They are using an older version of react-router-dom. I have been able to figure out how to use v6 in simple stuff but now I am at PrivateRoutes. I can't seem to figure out what to change.

# /src/reducers/auth.js

const initialState = {
    token: localStorage.getItem('token'),
    isAuthenticated: null,
    isLoading: false,
    user: null
};

export default function(state = initialState, action) {
    switch (action.type) {
        default:
            return state;
    }

}

# /src/reducers/index.js
mport { combineReducers } from "redux";
import leads from './leads';
import errors from './errors';
import messages from "./messages";
import auth from "./auth";

export default combineReducers({
    leads,
    errors,
    messages,
    auth,
});

// /src/common/PrivateRoute.js

import React from 'react';
import { Route, Navigate } from "react-router-dom";
import { connect } from "react-redux";
import PropTypes from "prop-types";

const PrivateRoute = () =>  (
//    const { user } = useAuth;
    <Navigate to='/register' />
)

// const mapStateToProps = state => ({
//     auth: state.auth
// });

export default (PrivateRoute);
// export default connect(mapStateToProps)(PrivateRoute);

// App.js

import PrivateRoute from './common/PrivateRoute';

<Routes>
                                <Route path="/" element={<Dashboard/>} />
                                <Route path="/login" element={<PrivateRoute><Login/></PrivateRoute>} />
                                <Route path="/register" element={<Register/>} />
                            </Routes>

If I don't do anything but use a Navigate in the PrivateRoute it works. If I try using ({ children }) I get a lot of errors.

I tried to go through the auth example on reactor documentation but I think I might be too new to React to understand what I am doing wrong.

sedhal · Answer 1 · 2022-07-18T12:47:42.170

-1

You can do it using react-router dom-v6. create a PrivateRoutes component and add in app.js and use it.

 // App.js
 const App: FC = () => {
  const isAuthorized = useSelector<RootState>(({auth}) => auth.user, shallowEqual)
  return (
   <>
     <BrowserRouter>
       <Routes>
         {isAuthorized ? (
           <Route path='/*' element={<PrivateRoutes />} />
         ):(
           <Route path='/login' element={<LoginPage />} />
         )}
         <Route path='error/*' element={<ErrorsPage />} />
       </Routes>
     </BrowserRouter>
   </>
 );
}
       
// /src/common/PrivateRoute.js
import React from 'react';
import { Route, Navigate } from "react-router-dom";
import { connect } from "react-redux";
import PropTypes from "prop-types";

const PrivateRoute = () =>  (
  const DashboardPage = lazy(() => import('../pages/Dashboard'))
  return (
      <Routes>
        <Route element={<DashboardPage />}>
      </Routes>
    );
)
export default (PrivateRoute)

edited Jul 18 '22 at 12:47

answered Jul 18 '22 at 12:22

sedhal

522
4
13

Thanks. Is there user authentication check here? – Sid Jul 18 '22 at 12:39
Yes, You can do it with authentication. I have updated my answer please check. – sedhal Jul 18 '22 at 12:49
Let me know if it's working for you? – sedhal Jul 18 '22 at 13:25
I might be totally wrong here, but would it be possible to pull in state from the files I have given in my question? I mean the `state` should already have whether logged in or not? – Sid Jul 18 '22 at 13:25
Yes, I'm getting auth variable from redux. You can get the auth user and update the state value and use it simply. – sedhal Jul 18 '22 at 13:27
Would it be possible to give me an example on that? I can't seem to figure it out. I tried using `const useAuth = () => { return state.auth; }; function PrivateRoute ({ children }) { const auth = useAuth(children.state); return auth ? children : ; // }` but I keep getting errors. – Sid Jul 18 '22 at 13:28
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/246542/discussion-between-sid-and-sedhal). – Sid Jul 18 '22 at 13:37

Checking if user is authorized in React Reactor 6

1 Answers1