How to determine whether the user is authenticated to implement protected routes in React?

Library

• msal@1.x.x or @azure/msal@1.x.x
• @azure/msal-browser@2.x.x
• @azure/msal-node@1.x.x
• @azure/msal-react@1.x.x
• @azure/msal-angular@0.x.x
• @azure/msal-angular@1.x.x
• @azure/msal-angular@2.x.x
• @azure/msal-angularjs@1.x.x

Description

I have a React SPA in which I have been able to implement authentication. However I would like to protect some of the routes, and have tried implementing it using something like:

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

const ProtectedRoute = ({ component: Component, ...rest }) => {
  function isAuthenticated () {
    //Need Help
  }

  return (
    <>
      <Route
        {...rest}
        render={(props) => {
          if (isAuthenticated()) {
            return <Component {...props} />;
          } else {
            return (
              <Redirect
                to={{
                  pathname: "/",
                  state: {
                    from: props.location,
                  },
                }}
              />
            );
          }
        }}
      />
    </>
  );
};

export default ProtectedRoute;

with App.jsx looking like:

import React from "react";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";

import Home from "./components/Home";
import Profile from "./components/Profile";
import ProtectedRoute from "./ProtectedRoute";

const App = () => {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={Home} />
        <ProtectedRoute exact path="/profile" component={Profile} />
      </Switch>
    </Router>
  );
};

export default App;

It seems that the pattern for implementing ProtectedRoute hinges on being able to implement isAuthenticated(), however this is where I am stuck. I tried using something like calling acquireTokenSilent but have not had success. The main motivation for trying to use ProtectedRoute was to avoid having to put <AuthenticatedTemplate> and <UnauthenticatedTemplate> in all my components. Is there some obvious method or pattern that I am missing? Thank you.

Source

[tnorling]

@pjchungmd What you have here should work, let me know if you’re still facing any issues or if I can close this. The MsalAuthenticationTemplate is, admittedly, not very well documented at the moment besides being demonstrated in the samples so you can be forgiven for missing it. I will make sure this gets added to the docs soon.

[pjchungmd]

Thank you all for pointing me in the right direction. It was my fault for not realizing that MsalAuthenticationTemplate existed (should have figured there would be something like that). I also upgraded to 1.0.0-alpha.5. I still haven’t been fully able to implement protected routes, so I implemented a ProtectedPage component, which ultimately does the same thing. My implementation looks like:

import React from "react";

// Msal imports
import {
  MsalAuthenticationTemplate,
} from "@azure/msal-react";

import { InteractionType } from "@azure/msal-browser";
import { loginRequest } from "../authConfig";

import { Loading } from "../authentication-ui/Loading";
import { ErrorComponent } from "../authentication-ui/ErrorComponent";

const ProtectedPage = (props) => {
  const authRequest = {
    ...loginRequest,
  };

  return (
    <MsalAuthenticationTemplate
      interactionType={InteractionType.Redirect}
      authenticationRequest={authRequest}
      errorComponent={ErrorComponent}
      loadingComponent={Loading}
    >
      {props.children}
    </MsalAuthenticationTemplate>
  );
};

export default ProtectedPage;

Are there any glaring errors with doing it this way? Again many thanks for the help and feedback.