Update auth step for new scopes

Also added code to save user's time zone and time format.

Author: jasonjoh

demo/graph-tutorial/src/AuthProvider.tsx

@@ -133,7 +133,9 @@ export default function withAuthProvider<T extends React.Component<AuthComponent
             isAuthenticated: true,
             user: {
               displayName: user.displayName,
-              email: user.mail || user.userPrincipalName
+              email: user.mail || user.userPrincipalName,
+              timeZone: user.mailboxSettings.timeZone,
+              timeFormat: user.mailboxSettings.timeFormat
             },
             error: null
           });

demo/graph-tutorial/src/Config.ts.example

@@ -3,6 +3,7 @@ export const config = {
   redirectUri: 'http://localhost:3000',
   scopes: [
     'user.read',
-    'calendars.read'
+    'mailboxsettings.read',
+    'calendars.readwrite'
   ]
 };

demo/graph-tutorial/src/GraphService.ts

@@ -20,7 +20,12 @@ function getAuthenticatedClient(accessToken: string) {
 export async function getUserDetails(accessToken: string) {
   const client = getAuthenticatedClient(accessToken);
 
-  const user = await client.api('/me').get();
+  const user = await client
+    .api('/me')
+    .select('displayName,mail,mailboxSettings,userPrincipalName')
+    .get();
+
+  console.log(JSON.stringify(user));
   return user;
 }
 // </graphServiceSnippet1>

tutorial/04-add-aad-auth.md

@@ -234,7 +234,7 @@ In this section you will get the user's details from Microsoft Graph.
 
 1. Replace the existing `getUserProfile` function with the following code.
 
-    :::code language="typescript" source="../demo/graph-tutorial/src/AuthProvider.tsx" id="getUserProfileSnippet" highlight="6-15":::
+    :::code language="typescript" source="../demo/graph-tutorial/src/AuthProvider.tsx" id="getUserProfileSnippet" highlight="6-18":::
 
 1. Save your changes and start the app, after sign-in you should end up back on the home page, but the UI should change to indicate that you are signed-in.