Refactored auth into separate provider

Using  the higher-order component model described in React docs to "wrap" those components that need auth.

Author: jasonjoh

demo/graph-tutorial/src/App.tsx

@@ -1,184 +1,53 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 import React, { Component } from 'react';
-import { BrowserRouter as Router, Route } from 'react-router-dom';
+import { BrowserRouter as Router, Route, Redirect } from 'react-router-dom';
 import { Container } from 'reactstrap';
-import { UserAgentApplication } from 'msal';
+import withAuthProvider, { AuthComponentProps } from './AuthProvider';
 import NavBar from './NavBar';
 import ErrorMessage from './ErrorMessage';
 import Welcome from './Welcome';
 import Calendar from './Calendar';
-import { config } from './Config';
-import { getUserDetails } from './GraphService';
 import 'bootstrap/dist/css/bootstrap.css';
 
-interface AppState {
-  error: any;
-  isAuthenticated: boolean;
-  user: any;
-}
-
-class App extends Component<any, AppState> {
-  private userAgentApplication: UserAgentApplication;
-
-  // <constructorSnippet>
-  constructor(props: any) {
-    super(props);
-
-    this.userAgentApplication = new UserAgentApplication({
-      auth: {
-          clientId: config.appId,
-          redirectUri: config.redirectUri
-      },
-      cache: {
-          cacheLocation: "sessionStorage",
-          storeAuthStateInCookie: true
-      }
-    });
-
-    var account = this.userAgentApplication.getAccount();
-
-    this.state = {
-      isAuthenticated: (account !== null),
-      user: {},
-      error: null
-    };
-
-    if (account) {
-      // Enhance user object with data from Graph
-      this.getUserProfile();
-    }
-  }
-  // </constructorSnippet>
-
+class App extends Component<AuthComponentProps> {
   render() {
     let error = null;
-    if (this.state.error) {
-      error = <ErrorMessage message={this.state.error.message} debug={this.state.error.debug} />;
+    if (this.props.error) {
+      error = <ErrorMessage
+        message={this.props.error.message}
+        debug={this.props.error.debug} />;
     }
 
     // <renderSnippet>
     return (
       <Router>
         <div>
           <NavBar
-            isAuthenticated={this.state.isAuthenticated}
-            authButtonMethod={this.state.isAuthenticated ? this.logout.bind(this) : this.login.bind(this)}
-            user={this.state.user}/>
+            isAuthenticated={this.props.isAuthenticated}
+            authButtonMethod={this.props.isAuthenticated ? this.props.logout : this.props.login}
+            user={this.props.user}/>
           <Container>
             {error}
             <Route exact path="/"
               render={(props) =>
                 <Welcome {...props}
-                  isAuthenticated={this.state.isAuthenticated}
-                  user={this.state.user}
-                  authButtonMethod={this.login.bind(this)} />
+                  isAuthenticated={this.props.isAuthenticated}
+                  user={this.props.user}
+                  authButtonMethod={this.props.login} />
               } />
             <Route exact path="/calendar"
               render={(props) =>
-                <Calendar {...props}
-                  showError={this.setErrorMessage.bind(this)} />
+                this.props.isAuthenticated ?
+                  <Calendar {...props} /> :
+                  <Redirect to="/" />
               } />
           </Container>
         </div>
       </Router>
     );
     // </renderSnippet>
   }
-
-  setErrorMessage(message: string, debug: string) {
-    this.setState({
-      error: {message: message, debug: debug}
-    });
-  }
-
-  // <loginSnippet>
-  async login() {
-    try {
-      await this.userAgentApplication.loginPopup(
-          {
-            scopes: config.scopes,
-            prompt: "select_account"
-        });
-      await this.getUserProfile();
-    }
-    catch(err) {
-      var error = {};
-
-      if (typeof(err) === 'string') {
-        var errParts = err.split('|');
-        error = errParts.length > 1 ?
-          { message: errParts[1], debug: errParts[0] } :
-          { message: err };
-      } else {
-        error = {
-          message: err.message,
-          debug: JSON.stringify(err)
-        };
-      }
-
-      this.setState({
-        isAuthenticated: false,
-        user: {},
-        error: error
-      });
-    }
-  }
-  // </loginSnippet>
-
-  // <logoutSnippet>
-  logout() {
-    this.userAgentApplication.logout();
-  }
-  // </logoutSnippet>
-
-  // <getUserProfileSnippet>
-  async getUserProfile() {
-    try {
-      // Get the access token silently
-      // If the cache contains a non-expired token, this function
-      // will just return the cached token. Otherwise, it will
-      // make a request to the Azure OAuth endpoint to get a token
-
-      var accessToken = await this.userAgentApplication.acquireTokenSilent({
-          scopes: config.scopes
-        });
-
-      if (accessToken) {
-        // Get the user's profile from Graph
-        var user = await getUserDetails(accessToken.accessToken);
-        this.setState({
-          isAuthenticated: true,
-          user: {
-            displayName: user.displayName,
-            email: user.mail || user.userPrincipalName
-          },
-          error: null
-        });
-      }
-    }
-    catch(err) {
-      var error = {};
-      if (typeof(err) === 'string') {
-        var errParts = err.split('|');
-        error = errParts.length > 1 ?
-          { message: errParts[1], debug: errParts[0] } :
-          { message: err };
-      } else {
-        error = {
-          message: err.message,
-          debug: JSON.stringify(err)
-        };
-      }
-
-      this.setState({
-        isAuthenticated: false,
-        user: {},
-        error: error
-      });
-    }
-  }
-  // </getUserProfileSnippet>
 }
 
-export default App;
+export default withAuthProvider(App);

demo/graph-tutorial/src/AuthProvider.tsx

@@ -0,0 +1,186 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+import React from 'react';
+import { UserAgentApplication } from 'msal';
+
+import { config } from './Config';
+import { getUserDetails } from './GraphService';
+
+export interface AuthComponentProps {
+  error: any;
+  isAuthenticated: boolean;
+  user: any;
+  login: Function;
+  logout: Function;
+  getAccessToken: Function;
+  setError: Function;
+}
+
+interface AuthProviderState {
+  error: any;
+  isAuthenticated: boolean;
+  user: any;
+}
+
+export default function withAuthProvider<T extends React.Component<AuthComponentProps>>
+  (WrappedComponent: new(props: AuthComponentProps, context?: any) => T): React.ComponentClass {
+  return class extends React.Component<any, AuthProviderState> {
+    private userAgentApplication: UserAgentApplication;
+
+    constructor(props: any) {
+      super(props);
+      this.state = {
+        error: null,
+        isAuthenticated: false,
+        user: {}
+      };
+
+      // Initialize the MSAL application object
+      this.userAgentApplication = new UserAgentApplication({
+        auth: {
+            clientId: config.appId,
+            redirectUri: config.redirectUri
+        },
+        cache: {
+            cacheLocation: "sessionStorage",
+            storeAuthStateInCookie: true
+        }
+      });
+    }
+
+    componentDidMount() {
+      // If MSAL already has an account, the user
+      // is already logged in
+      var account = this.userAgentApplication.getAccount();
+
+      if (account) {
+        // Enhance user object with data from Graph
+        this.getUserProfile();
+      }
+    }
+
+    render() {
+      return <WrappedComponent
+        error = { this.state.error }
+        isAuthenticated = { this.state.isAuthenticated }
+        user = { this.state.user }
+        login = { () => this.login() }
+        logout = { () => this.logout() }
+        getAccessToken = { (scopes: string[]) => this.getAccessToken(scopes)}
+        setError = { (message: string, debug: string) => this.setErrorMessage(message, debug)}
+        {...this.props} {...this.state} />;
+    }
+
+    async login() {
+      try {
+        // Login via popup
+        await this.userAgentApplication.loginPopup(
+            {
+              scopes: config.scopes,
+              prompt: "select_account"
+          });
+        // After login, get the user's profile
+        await this.getUserProfile();
+      }
+      catch(err) {
+        this.setState({
+          isAuthenticated: false,
+          user: {},
+          error: this.normalizeError(err)
+        });
+      }
+    }
+
+    logout() {
+      this.userAgentApplication.logout();
+    }
+
+    async getAccessToken(scopes: string[]): Promise<string> {
+      try {
+        // Get the access token silently
+        // If the cache contains a non-expired token, this function
+        // will just return the cached token. Otherwise, it will
+        // make a request to the Azure OAuth endpoint to get a token
+        var silentResult = await this.userAgentApplication.acquireTokenSilent({
+          scopes: scopes
+        });
+
+        return silentResult.accessToken;
+      } catch (err) {
+        // If a silent request fails, it may be because the user needs
+        // to login or grant consent to one or more of the requested scopes
+        if (this.isInteractionRequired(err)) {
+          var interactiveResult = await this.userAgentApplication.acquireTokenPopup({
+            scopes: scopes
+          });
+
+          return interactiveResult.accessToken;
+        } else {
+          throw err;
+        }
+      }
+    }
+
+    // <getUserProfileSnippet>
+    async getUserProfile() {
+      try {
+        var accessToken = await this.getAccessToken(config.scopes);
+
+        if (accessToken) {
+          // Get the user's profile from Graph
+          var user = await getUserDetails(accessToken);
+          this.setState({
+            isAuthenticated: true,
+            user: {
+              displayName: user.displayName,
+              email: user.mail || user.userPrincipalName
+            },
+            error: null
+          });
+        }
+      }
+      catch(err) {
+        this.setState({
+          isAuthenticated: false,
+          user: {},
+          error: this.normalizeError(err)
+        });
+      }
+    }
+    // </getUserProfileSnippet>
+
+    setErrorMessage(message: string, debug: string) {
+      this.setState({
+        error: {message: message, debug: debug}
+      });
+    }
+
+    normalizeError(error: string | Error): any {
+      var normalizedError = {};
+      if (typeof(error) === 'string') {
+        var errParts = error.split('|');
+        normalizedError = errParts.length > 1 ?
+          { message: errParts[1], debug: errParts[0] } :
+          { message: error };
+      } else {
+        normalizedError = {
+          message: error.message,
+          debug: JSON.stringify(error)
+        };
+      }
+      return normalizedError;
+    }
+
+    isInteractionRequired(error: Error): boolean {
+      if (!error.message || error.message.length <= 0) {
+        return false;
+      }
+
+      return (
+        error.message.indexOf('consent_required') > -1 ||
+        error.message.indexOf('interaction_required') > -1 ||
+        error.message.indexOf('login_required') > -1
+      );
+    }
+  }
+}