DEV Community

Protected Routes with React Function Components

mychal on January 21, 2020

Protected routes allow us to ensure only logged in users can access certain parts of our site that may contain private user information. In this ...

Read full post

juanortizoviedo • May 11 '20

Not work if i refresh '/dashboard'

Francisco Benedict (DfMS) • Jul 12 '20 • Edited

@juanortizoviedo - I had the exact same problem so once the web browser is refreshed whilst the URL is /dashboard, the page is automatically redirected to /unauthorized which makes sense as this is specified in ProtectedRoute.

I tried refreshing the browser whilst on /unauthorized page and it worked as expected (reloaded /unauthorized as normal).

I've since created a fresh create-react-app project with firebase and authenticating a user with either email or google provider and this exact same refresh issue is happening. It's almost as if the user is authenticated quickly enough on page load so the browser redirects the specified page or back to the root (/) URL.

So if a user (authenticated or not authenticated) refreshes the browser on a non-protected page, everything is fine but they are redirected if already on a protected page.

Have you managed to figure out how to overcome this issue? Any help would be greatly appreciated @mychal

Anthony Humphreys • Aug 17 '20

Have a read over the answer here: stackoverflow.com/questions/279283...

Client side routing is hard! Basically what you're seeing is the server try to find something at /route, when your SPA loads from /index.html - /route doesn't 'really' exist - until your index.html is read and your JS kicks in. It really blows your mind until you get it. Using react router you can evade this issue by using hashrouting

Jonny • Aug 5 '21 • Edited

@franciscobenedict I had this exact same issue. Firebase will persist an authenticated users details in local storage, however to retrieve them initially is asynchronous which as you've experienced doesn't work when refreshing the page and you get taken to a login screen, etc.

As we will be wanting to know about this user state across multiple components its advised to wrap all this logic into a context provider. To start solving this we can utilise onAuthStateChanged from Firebase which is the recommend way of retrieving a user as it allows Firebase to initialise, it will provide either the user object or null in the callback. What we also need is a loading state, which is true on initial launch and when the user has been loaded or if there isn't one we can stop loading. To get this behaviour we can wrap onAuthStateChanged in a promise which resolves the user and call it on initial launch using useEffect. We can then wait for this promise to settle before we manage our final loading state. Finally we can decide what to do once we've finished loading and we either have or don't have a user.

Here's my code:

Helper function

const getCurrentUser = () =>
  new Promise((res, rej) => {
    functionsApp.auth().onAuthStateChanged((user) => res(user));
  });

AuthContext.js

const AuthContext = createContext({
  user: null,
  loadingUser: true,
  setCurrentUser: () => {},
  unsetCurrentUser: () => {},
});

export const AuthContextProvider = (props) => {
  const [user, setUser] = useState(null);
  const [loadingUser, setLoadingUser] = useState(true);

  useEffect(() => {
    getCurrentUser().then((user) => {
      setUser(user);
      setLoadingUser(false);
    });
  }, []);

  const setCurrentUser = (user) => setUser(user);
  const unsetCurrentUser = () => signOutUser().then(() => setUser(null));

  const contextValue = {
    user,
    loadingUser,
    setCurrentUser,
    unsetCurrentUser,
  };

  return (
    <AuthContext.Provider value={contextValue}>
      {props.children}
    </AuthContext.Provider>
  );
};

ProtectedRoute.js

function ProtectedRoute({ component: Component, ...restOfProps }) {
  const { user, loadingUser } = useContext(AuthContext);

  if (loadingUser) {
    return <p>Loading..</p>;
  }

  return (
    <Route
      {...restOfProps}
      render={(props) =>
        user ? <Component {...props} /> : <Redirect to="/auth" />
      }
    />
  );
}

Chris Camp • Jul 25 '21

The issue seems to be as simple as the demo application doesn't have a persisting state of the user's auth. Since it's just artificially creating auth for a user and storing it in memory. The state of the user being logged in can't survive a page refresh. So naturally when you login and going to dashboard via the on page links it works but when you do a page refresh the user's current logged in state is lost from memory and defaults back to its original state of false. Look at the React Developer Tools and monitor the components state regarding the user's auth. A solution to this in a real application would be to have some state management system like context or Redux to persist the state so the accurate page shows when expected.

Faizan • Jun 22 '21 • Edited

I came across this issue when working with protected routes. The reason as you've already figured out, is due to the user state initially being sent to our components (defaults as false), so when it hits our protected route, it redirects the user to 401 unauthorised. What I did to solve this issue was check the user state before returning the routes. To "load" the app before it actually hit the router. I've attached some sample code, hopefully helps someone stuck with this.

gist.github.com/FaizanH/88ede257df...

ahmad-devsinc • Jul 13 '21

There must be a typo

maBradBirney • May 10 '20 • Edited

What a wonderful guide!
There were a couple things that caught me while following along:

You misspelled "components" in "import Unauthorized from './comoponents/Unauthorized';"
Also it seems like you don't need the prop "handleLogin" in the Route component for "<Route exact path='/' handleLogin={handleLogin} render={..." unless it's there for some reason I'm unaware of.

Thank you so much for this article though! It was very helpful for me!

Dave M • Aug 3 '20 • Edited

Unfortunately when I try this approach and hit the protected route, I get a show-stopping error: 'Invariant failed: You should not use <Route> outside a <Router>'. Seems like it doesn't like me composing something around the Route component, but I don't know why you and I get different results for that.

lydstyl • Jan 26 '20

Thank you :-)

mychal • Jan 26 '20

No problem, thanks for reading!

Code4kongo • Jun 30 '20

great article
i have tried to do the same thing in my application but i have a problem
the data that i passed to the ProtectedRoutes are undefined i don't know why

at first the date are present but once i click on the login button which must change the Auth state to true after an API call.
but once i receive the data they are lost in the ProtectedRoute and are set to undefined

NiyongaboEric • May 5 '20

Thanks for sharing your knowledge. I don't understand why implementing this idea in my other project took me a long time. You made it so simple to protect private routes in ReactJS. Thanks again.

OnlyInSpace • Jan 18 '21 • Edited

Anyway to implement this with page refresh?

Luis Uriel Leaño • May 29 '20

Thank you , it was very helpful

Zhe Bao • May 27 '20

Very useful, thank you very much!

Francisco Benedict (DfMS) • Jul 12 '20

This is really good guide. I quite enjoyed it. Very easy to follow and concise too. Well done @mychal

AHMAD • May 14 '20

great job.... thanks

ahmad-devsinc • Jul 13 '21

This is a highly understandable guide. Kudos to you sir

José Martínez • May 19 '20

Thanks for the knowledge!

sumit mehra • Sep 24 '21

what if someone just add /dashboard in url? Thats the problem i have to deal with. Any solution to it?

srinivas-challa1 • Sep 22 '21

After so many days of struggle finally i found it

Asif Foysal Meem • May 13 '20

Thank you for the detailed breakdown of Protected Routing Mychal!

Terrodar • Apr 19 '20

Thanks! I was struggling with other tutorials to understand the HOC that abstract the logic of protecting the components but now I understand thanks to you.