Creating a Private Route function for React Router

#1

Hi,

I’m working on the last section of ACA-authentication-client and having a little trouble finding information on-line to create a <PrivateRoute /> that you cannot access unless you are logged in.

I’ve searched through docs and forums and can’t seem to get the private route to work without errors.

    import React, { Component } from "react";
    import { Route, Switch } from "react-router";
    import { Redirect } from "react-router-dom";
    import cookie from "cookie";
    import Home from "./components/Home";
    import Dashboard from "./containers/Dashboard";
    import NotFound from "./components/NotFound";

    const PrivateRoute = ({ component: Component, ...rest }) => (
      <Route
        {...rest}
        render={props =>
          cookie.isAuthenticated ? (
            <Component {...props} />
          ) : (
            <Redirect
              to={{
                pathname: "/"
              }}
            />
          )
        }
      />
    );

    const Router = () => (
      <Switch>
        <Route exact path="/" component={Home} />
        <Switch>
          <PrivateRoute path="/dashboard" component={Dashboard} />
        </Switch>
        <Route component={NotFound} />
      </Switch>
    );

    export default Router;

I’ve been reading through the following:
https://tylermcginnis.com/react-router-protected-routes-authentication/
https://medium.com/@tomlarge/private-routes-with-react-router-dom-28e9f40c7146

And here is a link to my repo in case you want to look at any other files (though i don’t think that should matter):
https://github.com/konarie1990/advanced-react-router-practice

Any tips or suggestions are appreciated!
Thanks

#2

ok, so I was able to figure out the fix which was actually quite simple and the one thing I overlooked on the slides from class lol

  import React, { Component } from "react";
  import { Route, Switch } from "react-router";
  import { Redirect } from "react-router-dom";
  import cookie from "cookie";
  import Home from "./components/Home";
  import Dashboard from "./containers/Dashboard";
  import NotFound from "./components/NotFound";

  const checkAuth = () => {
    const cookies = cookie.parse(document.cookie);
    if (cookies.id_token) {
      return true;
    }
    return false;
  };

  const PrivateRoute = ({ component: Component, ...rest }) => (
    <Route
      {...rest}
      render={props =>
        checkAuth() === true ? (
          <Component {...props} />
        ) : (
          <Redirect
            to={{
              pathname: "/",
              state: { from: props.location }
            }}
          />
        )
      }
    />
  );

  const Router = () => (
    <Switch>
      <Route exact path="/" component={Home} />
      <PrivateRoute path="/dashboard" component={Dashboard} />
      <Route component={NotFound} />
    </Switch>
  );

  export default Router;

I knew I needed to check the cookie authorization but the example made it much more clear on the proper syntax.

1 Like