title: MSAL authentication and authrization with React.js
body: <p>I am fairly new to React and trying to implement Single Sign On Authentication in my React App.</p>
  
  <p><strong>Objectives:</strong></p>
  
  <ul>
  <li>Provide a login page where the user can enter their email address</li>
  <li>On click of Sign-in user get the SSO popup (based Azure AD) to accept the terms and sign-in</li>
  <li>Call graph API to retrieve user details (email ID, etc.)</li>
  <li>Retrieve the sign in token and store in browser cache (localStorage) and use it for subsequent URL accesses (React routes).</li>
  </ul>
  
  <p>I have come across MSAL (<a href="https://github.com/AzureAD/microsoft-authentication-library-for-js" rel="nofollow noreferrer">https://github.com/AzureAD/microsoft-authentication-library-for-js</a>) which seems to be useful for this.</p>
  
  <p><strong>What I have tried:</strong></p>
  
  <ul>
  <li><p>Based on the MSDN docs: <a href="https://docs.microsoft.com/en-us/azure/active-directory/develop/tutorial-v2-javascript-spa" rel="nofollow noreferrer">https://docs.microsoft.com/en-us/azure/active-directory/develop/tutorial-v2-javascript-spa</a>, I have registered my React SPA app in the Azure and got the client ID.</p></li>
  <li><p>I have created a single js file (<code>Auth.js</code>) to handle sign-in, token generation and graph API call as mentioned in the docs: <a href="https://docs.microsoft.com/en-us/azure/active-directory/develop/tutorial-v2-javascript-spa#use-the-microsoft-authentication-library-msal-to-sign-in-the-user" rel="nofollow noreferrer">https://docs.microsoft.com/en-us/azure/active-directory/develop/tutorial-v2-javascript-spa#use-the-microsoft-authentication-library-msal-to-sign-in-the-user</a></p></li>
  <li>In my <code>index.js</code> I have configured the routes:</li>
  </ul>
  
  <p><code>ReactDOM.render(&lt;MuiThemeProvider theme={theme}&gt;
          &lt;Router&gt;
              &lt;Switch&gt;
                  &lt;Route path="/" exact component={Projects}/&gt;
                  &lt;Route path="/projects" exact component={Projects}/&gt;
                  &lt;Route path="/admin" exact component={Admin}/&gt;
                  &lt;Route path="/projectstages/:projectNumber" exact component={ProjectStages}/&gt;
                  &lt;Route path="/formspage" exact component={FormsPage}/&gt;
                  &lt;Route path="/users" exact component={UserManagement}/&gt;
              &lt;/Switch&gt;
          &lt;/Router&gt;
      &lt;/MuiThemeProvider&gt;, document.getElementById('root'));</code></p>
  
  <ul>
  <li>These routes (components) gets rendered within the main <code>App.jsx</code> component:</li>
  </ul>
  
  <p><code>class App extends Component {
    render(){
      return(
          &lt;div className="App"&gt;
            {this.props.children}
          &lt;/div&gt;
      );
    }
  }</code></p>
  
  <p>How do I integrate this within my React app so that only authenticated users can access the React routes along with the objectives I mentioned above? Please let me know if I can provide more details or explain more about this.</p>