How to implement authenticated routes in React Router 4

Question

I was trying to implement authenticated routes but found that React Router 4 now prevents this from working     lt Route exact path     component  Index    gt   lt Route path   auth  component  UnauthenticatedWrapper  gt       lt Route path   auth login  component  LoginBotBot    gt   lt  Route gt   lt Route path   domains  component  AuthenticatedWrapper  gt       lt Route exact path   domains  component  DomainsIndex    gt   lt  Route gt    The error is       Warning  You should not use  lt Route component gt  and  lt Route children gt  in the same route   lt Route children gt  will be ignored   In that case  whats the correct way to implement this    It appears in react-router  v4  docs  it suggests something like    lt Router gt       lt div gt       lt AuthButton  gt       lt ul gt           lt li gt  lt Link to   public  gt Public Page lt  Link gt  lt  li gt           lt li gt  lt Link to   protected  gt Protected Page lt  Link gt  lt  li gt       lt  ul gt       lt Route path   public  component  Public   gt       lt Route path   login  component  Login   gt       lt PrivateRoute path   protected  component  Protected   gt       lt  div gt   lt  Router gt    But isit possible to achieve this while grouping a bunch of routes together      UPDATE  Ok  after some research  I came up with this    import React   PropTypes  from  react  import  Route  from  react-router-dom   export default class AuthenticatedRoute extends React Component     render         if   this props isLoggedIn          this props redirectToLogin         return null           return  lt Route     this props    gt         AuthenticatedRoute propTypes       isLoggedIn  PropTypes bool isRequired    component  PropTypes element    redirectToLogin  PropTypes func isRequired     Isit correct to dispatch an action in render   it feels wrong  It doesnt really seem correct with componentDidMount or some other hook either

User · Answer

Here is the simple clean protected route

const ProtectedRoute 
  = ({ isAllowed, ...props }) => 
     isAllowed 
     ? <Route {...props}/> 
     : <Redirect to="/authentificate"/>;
const _App = ({ lastTab, isTokenVerified })=> 
    <Switch>
      <Route exact path="/authentificate" component={Login}/>
      <ProtectedRoute 
         isAllowed={isTokenVerified} 
         exact 
         path="/secrets" 
         component={Secrets}/>
      <ProtectedRoute 
         isAllowed={isTokenVerified} 
         exact 
         path="/polices" 
         component={Polices}/>
      <ProtectedRoute 
         isAllowed={isTokenVerified} 
         exact 
         path="/grants" component={Grants}/>
      <Redirect from="/" to={lastTab}/>
    </Switch>

isTokenVerified is a method call to check the authorization token basically it returns boolean.

User · Answer

Based on the answer of  Tyler McGinnis  I made a different approach using ES6 syntax and nested routes with wrapped components   import React    cloneElement  Children   from  react  import   Route  Redirect   from  react-router-dom   const PrivateRoute      children  authed     rest      gt     lt Route         rest      render   props    gt  authed          lt div gt           Children map children  child   gt  cloneElement child       child props             lt  div gt                 lt Redirect to    pathname       state    from  props location        gt       gt   export default PrivateRoute   And using it    lt BrowserRouter gt     lt div gt       lt PrivateRoute path   home  authed  auth  gt         lt Navigation gt           lt Route component  Home  path   home    gt         lt  Navigation gt       lt  PrivateRoute gt        lt Route exact path     component  PublicHomePage    gt     lt  div gt   lt  BrowserRouter gt

User · Answer

I know it s been a while but I ve been working on an npm package for private and public routes   Here s how to make a private route    lt PrivateRoute  exact  path   private   authed  true   redirectTo   login   component  Title   text  This  is  a  private  route   gt    And you can also make Public routes that only unauthed user can access   lt PublicRoute  exact  path   public   authed  false   redirectTo   admin   component  Title   text  This  route  is  for  unauthed  users   gt    I hope it helps

User · Answer

Using Redux for state management   If user try to access any url  first i am going to check if access token available  if not redirect to login page   Once user logs in using login page  we do store that in localstorage as well as in our redux state   localstorage or cookies  we keep this topic out of context for now   since redux state as updated and privateroutes will be rerendered  now we do have access token so we gonna redirect to home page   Store the decoded authorization payload data as well in redux state and pass it to react context   We dont have to use context but to access authorization in any of our nested child components it makes easy to access from context instead  connecting each and every child component to redux     All the routes that don t need special roles can be accessed directly after login   If it need role like admin  we made a protected route which checks whether he had desired role if not redirects to unauthorized component   similarly in any of your component if you have to disable button or something based on role   simply you can do in this way   const authorization   useContext AuthContext   const  hasAdminRole    checkAuth  authorization  roleType  admin     const  hasLeadRole    checkAuth  authorization  roleType  lead      lt Button disable   hasAdminRole    gt Admin can access lt  Button gt   lt Button disable   hasLeadRole     hasAdminRole    gt admin or lead can access lt  Button gt    So what if user try to insert dummy token in localstorage  As we do have access token  we will redirect to home component  My home component will make rest call to grab data  since jwt token was dummy  rest call will return unauthorized user  So i do call logout  which will clear localstorage and redirect to login page again     If home page has static data and not making any api calls then you should have token-verify api call in the backend so that you can check if token is REAL before loading home page   index js  import React from  react   import ReactDOM from  react-dom   import   Router  Route  Switch   from  react-router-dom   import history from    utils history     import Store from    statemanagement store configureStore   import Privateroutes from    Privateroutes   import Logout from    components auth Logout    ReactDOM render     lt Store gt       lt Router history  history  gt         lt Switch gt           lt Route path   logout  exact component  Logout    gt           lt Route path     exact component  Privateroutes    gt           lt Route path    someParam  component  Privateroutes    gt         lt  Switch gt       lt  Router gt     lt  Store gt     document querySelector   root        History js  import   createBrowserHistory as history   from  history    export default history        Privateroutes js  import React    Fragment  useContext   from  react   import   Route  Switch  Redirect   from  react-router-dom   import   connect   from  react-redux   import   AuthContext  checkAuth   from    checkAuth   import App from    components App   import Home from    components home   import Admin from    components admin   import Login from    components auth Login   import Unauthorized from    components Unauthorized    import Notfound from    components 404    const ProtectedRoute      component  Component  roleType     rest     gt     const authorization   useContext AuthContext   const  hasRequiredRole    checkAuth  authorization  roleType    return    lt Route       rest    render  props   gt  hasRequiredRole       lt Component     props    gt        lt Unauthorized     props    gt        gt       const Privateroutes   props   gt      const   accessToken  authorization     props authData    if  accessToken        return          lt Fragment gt          lt AuthContext Provider value  authorization  gt           lt App gt             lt Switch gt               lt Route exact path     component  Home    gt               lt Route path   login  render       gt   lt Redirect to       gt     gt               lt Route exact path   home  component  Home    gt               lt ProtectedRoute             exact             path   admin              component  Admin              roleType  admin              gt               lt Route path   404  component  Notfound    gt               lt Route path     render       gt   lt Redirect to   404    gt     gt             lt  Switch gt           lt  App gt           lt  AuthContext Provider gt         lt  Fragment gt             else       return          lt Fragment gt           lt Route exact path   login  component  Login    gt           lt Route exact path     render       gt   lt Redirect to   login    gt     gt         lt  Fragment gt                    my user reducer sample    const accessToken   localStorage getItem  token          JSON parse localStorage getItem  token    accessToken        false      const initialState          accessToken  accessToken   accessToken   null       authorization  accessToken          jwtDecode JSON parse localStorage getItem  token    accessToken              authorization          null           export default function state   initialState  action       switch  action type       case actionTypes FETCH LOGIN SUCCESS       let token                         accessToken  action payload token                          localStorage setItem  token   JSON stringify token        return             state         accessToken  action payload token         authorization  jwtDecode action payload token  authorization               default             return state                   const mapStateToProps   state   gt      const   authData     state user    return       authData  authData          export default connect mapStateToProps  Privateroutes     checkAuth js  import React from  react    export const AuthContext   React createContext     export const checkAuth      authorization  roleType      gt      let hasRequiredRole   false     if  authorization roles         let roles   authorization roles map item   gt        item toLowerCase               hasRequiredRole   roles includes roleType          return  hasRequiredRole        DECODED JWT TOKEN SAMPLE       authorization          roles            admin          operator                exp   1591733170     user id   1     orig iat   1591646770     email    hemanthvrm stackoverflow      username    hemanthvrm

User · Answer

I was also looking for some answer  Here all answers are quite good  but none of them give answers how we can use it if user starts application after opening it back   I meant to say using cookie together    No need to create even different privateRoute Component  Below is my code      import React    Component    from  react       import   Route  Switch  BrowserRouter  Redirect   from  react-router-dom       import   Provider   from  react-redux       import store from    stores       import requireAuth from    components authentication authComponent      import SearchComponent from    components search searchComponent      import LoginComponent from    components login loginComponent      import ExampleContainer from    containers ExampleContainer      class App extends Component       state          auth  true            componentDidMount          if     Cookies get  auth             this setState  auth false                      render          return          lt Provider store  store  gt          lt BrowserRouter gt           lt Switch gt            lt Route exact path   searchComponent  component  requireAuth SearchComponent     gt            lt Route exact path   login  component  LoginComponent    gt            lt Route exact path     component  requireAuth ExampleContainer     gt             this state auth  amp  amp    lt Redirect push to   login   gt             lt  Switch gt          lt  BrowserRouter gt         lt  Provider gt                             export default App    And here is authComponent  import React  from  react   import   withRouter   from  react-router   import   as Cookie from  js-cookie   export default function requireAuth Component    class AuthenticatedComponent extends React Component    constructor props      super props     this state        auth  Cookie get  auth           componentDidMount       this checkAuth        checkAuth       const location   this props location    const redirect   location pathname   location search    if     Cookie get  auth         this props history push   login redirect   redirect            render       return Cookie get  auth         lt Component      this props     gt       null          return  withRouter AuthenticatedComponent      Below I have written blog  you can get more depth explanation there as well   Create Protected routes in ReactJS

User · Answer

You re going to want to use the Redirect component  There s a few different approaches to this problem  Here s one I like  have a PrivateRoute component that takes in an authed prop and then renders based on that props   function PrivateRoute   component  Component  authed     rest       return        lt Route           rest        render   props    gt  authed     true            lt Component     props    gt             lt Redirect to   pathname    login   state   from  props location      gt         gt          Now your Routes can look something like this   lt Route path     exact component  Home    gt   lt Route path   login  component  Login    gt   lt Route path   register  component  Register    gt   lt PrivateRoute authed  this state authed  path   dashboard  component  Dashboard    gt    If you re still confused  I wrote this post that may help -  Protected routes and authentication with React Router v4

User · Answer

I implemented using-   lt Route path   dashboard  render       gt        this state user isLoggedIn          lt Dashboard authenticate  this authenticate  user  this state user    gt            lt Redirect to   login    gt        gt    authenticate props will be passed to components e g  signup using which user state can be changed  Complete AppRoutes-  import React from  react   import   Switch  Route   from  react-router-dom   import   Redirect   from  react-router    import Home from     pages home   import Login from     pages login   import Signup from     pages signup   import Dashboard from     pages dashboard    import   config   from     utils Config    export default class AppRoutes extends React Component        constructor props            super props               initially assuming that user is logged out         let user                 isLoggedIn  false                       if user is logged in  his details can be found from local storage         try               let userJsonString   localStorage getItem config localStorageKey               if  userJsonString                    user   JSON parse userJsonString                           catch  exception                          updating the state         this state                 user  user                     this authenticate   this authenticate bind this                 this function is called on login logout     authenticate user            this setState               user  user                         updating user s details         localStorage setItem config localStorageKey  JSON stringify user               render             return                lt Switch gt                   lt Route exact path     component  Home    gt                   lt Route exact path   login  render       gt   lt Login authenticate  this authenticate    gt     gt                   lt Route exact path   signup  render       gt   lt Signup authenticate  this authenticate    gt     gt                   lt Route path   dashboard  render       gt                        this state user isLoggedIn                                  lt Dashboard authenticate  this authenticate  user  this state user    gt                                    lt Redirect to   login    gt                        gt               lt  Switch gt                        Check the complete project here  https   github com varunon9 hello-react

User · Answer

Heres how I solved it with React and Typescript  Hope it helps    x000D   x000D  import   as React from  react   import   FC   from  react   import   Route  RouteComponentProps  RouteProps  Redirect   from  react-router    const PrivateRoute  FC lt RouteProps gt       component  Component     rest      gt        if   Component          return null            const isLoggedIn   true     Add your provider here     return          lt Route             rest              render   props  RouteComponentProps lt    gt     gt  isLoggedIn     lt Component     props    gt       lt Redirect to    pathname       state    from  props location        gt            gt               export default PrivateRoute           lt PrivateRoute component  SignIn  path   signin    gt  x000D   x000D   x000D

User · Answer

Tnx Tyler McGinnis for solution  I make my idea from Tyler McGinnis idea   const DecisionRoute      trueComponent  falseComponent  decisionFunc     rest      gt      return        lt Route           rest         render           decisionFunc               trueComponent             falseComponent               gt          You can implement that like this   lt DecisionRoute path   signin  exact  true              trueComponent  redirectStart              falseComponent  SignInPage              decisionFunc  isAuth              gt    decisionFunc just a function that return true or false  const redirectStart   props   gt   lt Redirect to   orders    gt

User · Answer

The accepted answer is good  but it does NOT solve the problem when we need our component to reflect changes in URL  Say  your component s code is something like  export const Customer    props    gt        const history   useHistory               And you change URL  const handleGoToPrev        gt        history push   app customer   prevId        The component will not reload   A better solution  import React from  react   import   Redirect  Route   from  react-router-dom   import store from     store store    export const PrivateRoute      component  Component     rest      gt       let isLoggedIn     store getState   data user     return        lt Route     rest  render  props   gt  isLoggedIn                    lt Component key  props match params id     empty       props    gt                       lt Redirect to    pathname    login   state    from  props location        gt                  gt          Usage   lt PrivateRoute exact path  quot  app customer  id quot  component  Customer    gt

User · Answer

const Root      session      gt      const isLoggedIn   session  amp  amp  session getCurrentUser   return        lt Router gt          isLoggedIn              lt Switch gt             lt Route path   signin  component   lt Signin   gt     gt             lt Redirect to   signin    gt           lt  Switch gt                       lt Switch gt             lt Route path     exact component  Home    gt             lt Route path   about  component  About    gt             lt Route path   something-else  component  SomethingElse    gt             lt Redirect to       gt           lt  Switch gt                lt  Router gt

User · Answer

install react-router-dom  then create two components one for valid users and other for invalid users   try this on app js  import React from  react    import   BrowserRouter as Router  Route  Link  Switch  Redirect   from  react-router-dom    import ValidUser from    pages validUser validUser   import InValidUser from    pages invalidUser invalidUser   const loggedin   false   class App extends React Component    render         return           lt Router gt         lt div gt           lt Route exact path     render       gt             loggedin      lt Route  component  ValidUser    gt                 lt Route component  InValidUser    gt                gt            lt  div gt         lt  Router gt              export default App

User · Answer

My Previous answer is not scalable  Here is what I think is good approach-  Your Routes-   lt Switch gt     lt Route     exact path         component  matchStateToProps InitialAppState          routeOpen  true    no auth is needed to access this route           gt     lt Route     exact path   profile      component  matchStateToProps Profile          routeOpen  false    can set it false or just omit this key           gt     lt Route     exact path   login      component  matchStateToProps Login          routeOpen  true           gt     lt Route     exact path   forgot-password      component  matchStateToProps ForgotPassword          routeOpen  true           gt     lt Route     exact path   dashboard      component  matchStateToProps DashBoard     gt   lt  Switch gt    Idea is to use a wrapper in component props which would return original component if no auth is required or already authenticated otherwise would return default component e g  Login   const matchStateToProps   function Component  defaultProps      return  props    gt        let authRequired   true       if  defaultProps  amp  amp  defaultProps routeOpen          authRequired   false             if  authRequired             check if loginState key exists in localStorage  Your auth logic goes here        if  window localStorage getItem STORAGE KEYS LOGIN STATE             return  lt Component      defaultProps     gt      authenticated  good to go         else           return  lt InitialAppState      defaultProps     gt      not authenticated                   return  lt Component      defaultProps     gt      no auth is required

User · Answer

The solution which ultimately worked best for my organization is detailed below  it just adds a check on render for the sysadmin route and redirects the user to a different main path of the application if they are not allowed to be in the page   SysAdminRoute tsx  import React from  react   import   Route  Redirect  RouteProps   from  react-router-dom   import AuthService from     services AuthService   import   appSectionPageUrls   from    appSectionPageUrls   interface IProps extends RouteProps    export const SysAdminRoute    props  IProps    gt        var authService   new AuthService        if   authService getIsSysAdmin        example         authService logout            return   lt Redirect to                pathname  appSectionPageUrls site   front-facing              gt              return   lt Route     props    gt        There are 3 main routes for our implementation  the public facing  site  the logged in client  app  and sys admin tools at  sysadmin  You get redirected based on your  authiness  and this is the page at  sysadmin   SysAdminNav tsx   lt Switch gt       lt SysAdminRoute exact path  sysadminUrls someSysAdminUrl  render       gt   lt SomeSysAdminUrl  gt      gt        etc  lt  Switch gt

User · Answer

It seems your hesitation is in creating your own component and then dispatching in the render method  Well you can avoid both by just using the render method of the  lt Route gt  component  No need to create a  lt AuthenticatedRoute gt  component unless you really want to  It can be as simple as below  Note the     routeProps  spread making sure you continue to send the properties of the  lt Route gt  component down to the child component   lt MyComponent gt  in this case     lt Route path   someprivatepath  render  routeProps   gt        if   this props isLoggedIn          this props redirectToLogin         return null           return  lt MyComponent     routeProps  anotherProp  somevalue    gt       gt    See the React Router V4 render documentation  If you did want to create a dedicated component  then it looks like you are on the right track  Since React Router V4 is purely declarative routing  it says so right in the description  I do not think you will get away with putting your redirect code outside of the normal component lifecycle  Looking at the code for React Router itself  they perform the redirect in either componentWillMount or componentDidMount depending on whether or not it is server side rendering  Here is the code below  which is pretty simple and might help you feel more comfortable with where to put your redirect logic   import React    PropTypes   from  react          The public API for updating the location programatically    with a component      class Redirect extends React Component     static propTypes         push  PropTypes bool      from  PropTypes string      to  PropTypes oneOfType         PropTypes string        PropTypes object               static defaultProps         push  false        static contextTypes         router  PropTypes shape         history  PropTypes shape           push  PropTypes func isRequired          replace  PropTypes func isRequired          isRequired        staticContext  PropTypes object        isRequired        isStatic         return this context router  amp  amp  this context router staticContext        componentWillMount         if  this isStatic          this perform          componentDidMount         if   this isStatic          this perform          perform         const   history     this context router     const   push  to     this props      if  push          history push to        else         history replace to               render         return null        export default Redirect

[javascript] How to implement authenticated routes in React Router 4?

Examples related to javascript

Examples related to reactjs

Examples related to react-router

Examples related to react-router-v4