Updated tutorial through step 4

Author: jasonjoh

tutorial/01-intro.md

@@ -15,17 +15,7 @@ You should also have either a personal Microsoft account with a mailbox on Outlo
 - You can [sign up for the Office 365 Developer Program](https://developer.microsoft.com/office/dev-program) to get a free Office 365 subscription.
 
 > [!NOTE]
-> This tutorial was written with Node version 12.18.4. The steps in this guide may work with other versions, but that has not been tested.
-
-## Watch the tutorial
-
-This module has been recorded and is available in the Office Development YouTube channel.
-
-<!-- markdownlint-disable MD033 MD034 -->
-<br/>
-
-> [!VIDEO https://www.youtube-nocookie.com/embed/KUPRTTOUzz8]
-<!-- markdownlint-enable MD033 MD034 -->
+> This tutorial was written with Node version 14.15.0. The steps in this guide may work with other versions, but that has not been tested.
 
 ## Feedback
 

tutorial/02-create-app.md

@@ -5,13 +5,14 @@ In this section, you'll create a new Angular project.
 1. Open your command-line interface (CLI), navigate to a directory where you have rights to create files, and run the following commands to install the [Angular CLI](https://www.npmjs.com/package/@angular/cli) tool and create a new Angular app.
 
     ```Shell
-    npm install -g @angular/cli@10.1.7
+    npm install -g @angular/cli@11.2.9
     ng new graph-tutorial
     ```
 
 1. The Angular CLI will prompt for more information. Answer the prompts as follows.
 
     ```Shell
+    ? Do you want to enforce stricter type checking and stricter bundle budgets in the workspace? Yes
     ? Would you like to add Angular routing? Yes
     ? Which stylesheet format would you like to use? CSS
     ```
@@ -38,9 +39,10 @@ Before moving on, install some additional packages that you will use later:
 1. Run the following commands in your CLI.
 
     ```Shell
-    npm install [email protected] @ng-bootstrap/[email protected] [email protected] @azure/[email protected]
-    npm install [email protected] [email protected] [email protected]
-    npm install @microsoft/[email protected] @microsoft/[email protected]
+    npm install [email protected] @ng-bootstrap/[email protected]
+    npm install @azure/[email protected] @azure/[email protected]
+    npm install [email protected] [email protected]
+    npm install @microsoft/[email protected] @microsoft/[email protected]
     ```
 
 1. Run the following command in your CLI to add the Angular localization package (required by ng-bootstrap).
@@ -86,7 +88,7 @@ In this section you'll create the user interface for the app.
 
 1. Create a new file in the **./src/app** folder named **user.ts** and add the following code.
 
-    :::code language="typescript" source="../demo/graph-tutorial/src/app/user.ts" id="user":::
+    :::code language="typescript" source="../demo/graph-tutorial/src/app/user.ts" id="UserSnippet":::
 
 1. Generate an Angular component for the top navigation on the page. In your CLI, run the following command.
 
@@ -109,19 +111,15 @@ In this section you'll create the user interface for the app.
     export class NavBarComponent implements OnInit {
 
       // Should the collapsed nav show?
-      showNav: boolean;
+      showNav: boolean = false;
       // Is a user logged in?
-      authenticated: boolean;
+      authenticated: boolean = false;
       // The user
-      user: User;
+      user?: User = undefined;
 
       constructor() { }
 
-      ngOnInit() {
-        this.showNav = false;
-        this.authenticated = false;
-        this.user = null;
-      }
+      ngOnInit() { }
 
       // Used by the Bootstrap navbar-toggler button to hide/show
       // the nav in a collapsed state
@@ -135,14 +133,15 @@ In this section you'll create the user interface for the app.
         this.user = {
           displayName: 'Adele Vance',
           email: '[email protected]',
-          avatar: null
+          avatar: '',
+          timeZone: ''
         };
       }
 
       signOut(): void {
         // Temporary
         this.authenticated = false;
-        this.user = null;
+        this.user = undefined;
       }
     }
     ```
@@ -172,23 +171,22 @@ In this section you'll create the user interface for the app.
     export class HomeComponent implements OnInit {
 
       // Is a user logged in?
-      authenticated: boolean;
+      authenticated: boolean = false;
       // The user
-      user: any;
+      user?: User = undefined;
 
       constructor() { }
 
-      ngOnInit() {
-        this.authenticated = false;
-        this.user = {};
-      }
+      ngOnInit() { }
 
       signIn(): void {
         // Temporary
         this.authenticated = true;
         this.user = {
           displayName: 'Adele Vance',
-          email: '[email protected]'
+          email: '[email protected]',
+          avatar: '',
+          timeZone: ''
         };
       }
     }
@@ -200,7 +198,7 @@ In this section you'll create the user interface for the app.
 
 1. Create a simple `Alert` class. Create a new file in the **./src/app** directory named **alert.ts** and add the following code.
 
-    :::code language="typescript" source="../demo/graph-tutorial/src/app/alert.ts" id="alert":::
+    :::code language="typescript" source="../demo/graph-tutorial/src/app/alert.ts" id="AlertSnippet":::
 
 1. Create an alert service that the app can use to display messages to the user. In your CLI, run the following command.
 
@@ -220,11 +218,11 @@ In this section you'll create the user interface for the app.
 
 1. Once the command completes, open **./src/app/alerts/alerts.component.ts** and replace its contents with the following.
 
-    :::code language="typescript" source="../demo/graph-tutorial/src/app/alerts/alerts.component.ts" id="alertComponent":::
+    :::code language="typescript" source="../demo/graph-tutorial/src/app/alerts/alerts.component.ts" id="AlertsComponentSnippet":::
 
 1. Open **./src/app/alerts/alerts.component.html** and replace its contents with the following.
 
-    :::code language="html" source="../demo/graph-tutorial/src/app/alerts/alerts.component.html" id="alertHtml":::
+    :::code language="html" source="../demo/graph-tutorial/src/app/alerts/alerts.component.html" id="AlertHtml":::
 
 1. Open **./src/app/app-routing.module.ts** and replace the `const routes: Routes = [];` line with the following code.
 
@@ -238,7 +236,7 @@ In this section you'll create the user interface for the app.
 
 1. Open **./src/app/app.component.html** and replace its entire contents with the following.
 
-    :::code language="html" source="../demo/graph-tutorial/src/app/app.component.html" id="appHtml":::
+    :::code language="html" source="../demo/graph-tutorial/src/app/app.component.html" id="AppHtml":::
 
 1. Add an image file of your choosing named **no-profile-photo.png** in the **./src/assets** directory. This image will be used as the user's photo when the user has no photo in Microsoft Graph.
 

tutorial/03-register-app.md

@@ -12,14 +12,10 @@ In this exercise, you will create a new Azure AD web application registration us
 
     - Set **Name** to `Angular Graph Tutorial`.
     - Set **Supported account types** to **Accounts in any organizational directory and personal Microsoft accounts**.
-    - Under **Redirect URI**, set the first drop-down to `Web` and set the value to `http://localhost:4200`.
+    - Under **Redirect URI**, set the first drop-down to `Single-page application (SPA)` and set the value to `http://localhost:4200`.
 
     ![A screenshot of the Register an application page](./images/aad-register-an-app.png)
 
 1. Select **Register**. On the **Angular Graph Tutorial** page, copy the value of the **Application (client) ID** and save it, you will need it in the next step.
 
     ![A screenshot of the application ID of the new app registration](./images/aad-application-id.png)
-
-1. Select **Authentication** under **Manage**. Locate the **Implicit grant** section and enable **Access tokens** and **ID tokens**. Select **Save**.
-
-    ![A screenshot of the Implicit grant section](./images/aad-implicit-grant.png)

tutorial/04-add-aad-auth.md

@@ -14,13 +14,26 @@ In this exercise you will extend the application from the previous exercise to s
 1. Open **./src/app/app.module.ts** and add the following `import` statements to the top of the file.
 
     ```typescript
-    import { MsalModule } from '@azure/msal-angular';
+    import { IPublicClientApplication,
+             PublicClientApplication,
+             BrowserCacheLocation } from '@azure/msal-browser';
+    import { MsalModule,
+             MsalService,
+             MSAL_INSTANCE } from '@azure/msal-angular';
     import { OAuthSettings } from '../oauth';
     ```
 
-1. Add the `MsalModule` to the `imports` array inside the `@NgModule` declaration, and initialize it with the app ID.
+1. Add the following function below the `import` statements.
 
-    :::code language="typescript" source="../demo/graph-tutorial/src/app/app.module.ts" id="imports" highlight="6-11":::
+    :::code language="typescript" source="../demo/graph-tutorial/src/app/app.module.ts" id="MSALFactorySnippet":::
+
+1. Add the `MsalModule` to the `imports` array inside the `@NgModule` declaration.
+
+    :::code language="typescript" source="../demo/graph-tutorial/src/app/app.module.ts" id="ImportsSnippet" highlight="6":::
+
+1. Add the `MSALInstanceFactory` and `MsalService` to the `providers` array inside the `@NgModule` declaration.
+
+    :::code language="typescript" source="../demo/graph-tutorial/src/app/app.module.ts" id="ProvidersSnippet" highlight="2-5":::
 
 ## Implement sign-in
 
@@ -38,6 +51,7 @@ In this section you'll create an authentication service and implement sign-in an
 
     ```typescript
     import { Injectable } from '@angular/core';
+    import { AccountInfo } from '@azure/msal-browser';
     import { MsalService } from '@azure/msal-angular';
 
     import { AlertsService } from './alerts.service';
@@ -50,25 +64,29 @@ In this section you'll create an authentication service and implement sign-in an
 
     export class AuthService {
       public authenticated: boolean;
-      public user: User;
+      public user?: User;
 
       constructor(
         private msalService: MsalService,
         private alertsService: AlertsService) {
 
         this.authenticated = false;
-        this.user = null;
+        this.user = undefined;
       }
 
       // Prompt the user to sign in and
       // grant consent to the requested permission scopes
       async signIn(): Promise<void> {
-        let result = await this.msalService.loginPopup(OAuthSettings)
+        const result = await this.msalService
+          .loginPopup(OAuthSettings)
+          .toPromise()
           .catch((reason) => {
-            this.alertsService.addError('Login failed', JSON.stringify(reason, null, 2));
+            this.alertsService.addError('Login failed',
+              JSON.stringify(reason, null, 2));
           });
 
         if (result) {
+          this.msalService.instance.setActiveAccount(result.account);
           this.authenticated = true;
           // Temporary placeholder
           this.user = new User();
@@ -79,15 +97,19 @@ In this section you'll create an authentication service and implement sign-in an
       }
 
       // Sign out
-      signOut(): void {
-        this.msalService.logout();
-        this.user = null;
+      async signOut(): Promise<void> {
+        await this.msalService.logout().toPromise();
+        this.user = undefined;
         this.authenticated = false;
       }
 
       // Silently request an access token
       async getAccessToken(): Promise<string> {
-        let result = await this.msalService.acquireTokenSilent(OAuthSettings)
+        const result = await this.msalService
+          .acquireTokenSilent({
+            scopes: OAuthSettings.scopes
+          })
+          .toPromise()
           .catch((reason) => {
             this.alertsService.addError('Get token failed', JSON.stringify(reason, null, 2));
           });
@@ -100,14 +122,14 @@ In this section you'll create an authentication service and implement sign-in an
 
         // Couldn't get a token
         this.authenticated = false;
-        return null;
+        return '';
       }
     }
     ```
 
 1. Open **./src/app/nav-bar/nav-bar.component.ts** and replace its contents with the following.
 
-    :::code language="typescript" source="../demo/graph-tutorial/src/app/nav-bar/nav-bar.component.ts" id="navBarSnippet" highlight="3,15-22,24,26-28,36-38,40-42":::
+    :::code language="typescript" source="../demo/graph-tutorial/src/app/nav-bar/nav-bar.component.ts" id="navBarSnippet" highlight="3,15-22,24,34-36,38-40":::
 
 1. Open **./src/app/home/home.component.ts** and replace its contents with the following.
 
@@ -128,7 +150,7 @@ Right now the authentication service sets constant values for the user's display
 
 1. Add a new function to the `AuthService` class called `getUser`.
 
-    :::code language="typescript" source="../demo/graph-tutorial/src/app/auth.service.ts" id="getUserSnippet":::
+    :::code language="typescript" source="../demo/graph-tutorial/src/app/auth.service.ts" id="GetUserSnippet":::
 
 1. Locate and remove the following code in the `getAccessToken` method that adds an alert to display the access token.
 
@@ -157,7 +179,7 @@ Right now the authentication service sets constant values for the user's display
 
 1. Change the `constructor` for the `AuthService` class to check if the user is already logged in and load their details if so. Replace the existing `constructor` with the following.
 
-    :::code language="typescript" source="../demo/graph-tutorial/src/app/auth.service.ts" id="constructorSnippet" highlight="5-6":::
+    :::code language="typescript" source="../demo/graph-tutorial/src/app/auth.service.ts" id="ConstructorSnippet" highlight="5-7":::
 
 1. Remove the temporary code from the `HomeComponent` class. Open **./src/app/home/home.component.ts** and replace the existing `signIn` function with the following.
 

tutorial/images/aad-implicit-grant.png

@@ -10,18 +10,19 @@ import { User } from '../user';
   styleUrls: ['./home.component.css']
 })
 export class HomeComponent implements OnInit {
+
   // Is a user logged in?
   get authenticated(): boolean {
     return this.authService.authenticated;
   }
   // The user
-  get user(): User {
+  get user(): User | undefined {
     return this.authService.user;
   }
 
   constructor(private authService: AuthService) { }
 
-  ngOnInit() {}
+  ngOnInit() { }
 
   async signIn(): Promise<void> {
     await this.authService.signIn();