title: MSAL and React-Admin integration
body: <p>How do I integrate MSAL with React-Admin properly.</p>
  
  <p>I used the code provided by Microsoft and put it in the Constructor in App.js and it works fine using a redirect method, except that I keep getting a default React-Admin login screen for split second before it redirects to MS authentication page.</p>
  
  <p>If I put the MSAL code in my custom login page (empty page), it goes into a loop and authentication does not work.</p>
  
  <p>How do I get rid of the React-Admin login screen?</p>
  
  <pre><code>import { UserAgentApplication } from 'msal';
  
  class App extends Component {
  
      constructor(props) {
        super(props);
  
        this.userAgentApplication = new UserAgentApplication({
          auth: {
            clientId: config.appId,
            authority: config.authEndPoint,
          },
          cache: {
            cacheLocation: "localStorage",
            storeAuthStateInCookie: true
          }
        });
  
        this.userAgentApplication.handleRedirectCallback(this.authCallback.bind(this));
  
        var user = this.userAgentApplication.getAccount();
        if (user != null) {
          localStorage.setItem('token', user.idToken);
          localStorage.setItem('userName', user.userName);
          const userName = user.userName.toString();
  
          fetch('http://localhost:5000/getuserid', {
            mode: 'cors',
            method: "GET",
            headers: {
              'Accept': 'application/json',
              'Content-Type': 'application/json',
              'USERNAME': userName
            },
          }).then(res =&gt; res.json())
            .then(res =&gt; {
              if (res.id != null) {
                  localStorage.setItem('userID', res.id);
              } else {
                console.log('Failed to retreived id');
              }
            }).catch(
              err =&gt; console.log(err))
        }
  
        this.state = {
          isAuthenticated: (user !== null),
          user: {},
          error: null
        };
  
        if (user) {
          // Enhance user object with data from Graph
          //this.getUserProfile();
        }
        else {
          const loginRequest = {
            scopes: ["https://graph.microsoft.com/User.Read"]
          }
  
          this.userAgentApplication.loginRedirect(loginRequest);
        }
      }
  
      authCallback(error, response) {
        //handle redirect response
        this.setState({
          authenticated: true
        });
      }
  
    render() {
      return (
        &lt;Admin title="MyApp" &gt;
      ...
        &lt;/Admin&gt;
      );
    }
  }
  export default App;
  </code></pre>