added loginPop with loginHint

salman90 · salman90 · commit 9a9ee1e7227d · 2022-04-22T11:48:17.000-07:00
diff --git a/6-AdvancedScenarios/4-hybrid-SPA/App/client/src/App.jsx b/6-AdvancedScenarios/4-hybrid-SPA/App/client/src/App.jsx
@@ -29,33 +29,40 @@ export const App = ({ instance }) => {
   const { inProgress } = useMsal();
   const [data, setdata] = useState(null);
 
+  /**
+   * We render the SPA code that was acquired server-side, and provide it to the acquireTokenByCode API on the MSAL.js PublicClientApplication instance.
+   * The application should also render any account hints, as they will be needed for any interactive requests to ensure the same user is used for both requests.
+   * For more information about using loginHint and sid, visit:
+   * https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/lib/msal-core#2-login-the-user
+   */
   useEffect(() => {
-
-    if(getCode){
+    if(getCode && !data){
       callApiToGetSpaCode()
-        .then((data) => {
+        .then((response) => {
         if(inProgress === "none"){
-          // SPA auth code
-          let code = data.code;
-          instance.acquireTokenByCode({code})
-            .then((res) => {
+          const { code, loginHint, sid, referredUsername } = response;
+          instance.acquireTokenByCode({
+            code
+          }).then((res) => {
               setdata(res)
-            }).catch((error) => {
+            }).catch((error ) => {
               if(error instanceof InteractionRequiredAuthError){
                  if (inProgress === "none") {
-                   instance.acquireTokenPopup({code})
-                      .then((res) => {
-                        setdata(res)
-                      }).catch((error) => {
-                        console.log(error)
-                      })
+                   //If loginHint claim is provided, dont use sid
+                   instance.loginPopup({
+                     loginHint //Prefer loginHint claim over referredUsername (email)
+                    }).then((res) => {
+                      setdata(res)
+                    }).catch((error) => {
+                      console.log(error)
+                    })
                  }
               }
           })
         }
       })
     }
-  });
+  }, [instance, inProgress]);
 
 /**
  * msal-react is built on the React context API and all parts of your app that require authentication must be 
diff --git a/6-AdvancedScenarios/4-hybrid-SPA/App/controllers/authController.js b/6-AdvancedScenarios/4-hybrid-SPA/App/controllers/authController.js
@@ -32,9 +32,21 @@ exports.handleRedirectWithCode = (req, res) => {
     
     msalInstance.acquireTokenByCode(tokenRequest)
         .then((response) => {
-            const { code } = response;
+
+            const { code } = response; //SPA authorization code
+            const {
+                sid, // Session ID claim, used for non-hybrid
+                login_hint: loginHint, // New login_hint claim (used instead of sid or email)
+                preferred_username: preferredUsername // Email
+            } = response.idTokenClaims;
+
+
             req.session.code = code;
+            req.session.loginHint = loginHint;
+            req.session.sid = sid;
+            req.session.referredUsername = preferredUsername;
             req.session.authenticated = true;
+
             const urlFrom = (urlObject) => String(Object.assign(new URL("http://localhost:5000"), urlObject))
             res.redirect(urlFrom({
                  protocol: 'http',
@@ -55,7 +67,7 @@ exports.logoutUser = (req, res) => {
 exports.sendSPACode = (req, res) => {
 
     if(req.session.authenticated) {
-        res.status(200).json({code: req.session.code});
+        res.status(200).json({ ...req.session});
     }else {
         res.status(401).json({ message: "user is not authenticated"})
     }
diff --git a/6-AdvancedScenarios/4-hybrid-SPA/AppCreationScripts/Configure.ps1 b/6-AdvancedScenarios/4-hybrid-SPA/AppCreationScripts/Configure.ps1
@@ -196,7 +196,7 @@ Function ConfigureApplications
                                                          } `
                                                          -Spa `
                                                          @{ `
-                                                             RedirectUris = "http://localhost:5000"
+                                                            RedirectUris = "http://localhost:5000";
                                                          } `
                                                         -SignInAudience AzureADMyOrg `
                                                        #end of command
@@ -315,6 +315,7 @@ Function ConfigureApplications
     Write-Host "- For service"
     Write-Host "  - Navigate to $servicePortalUrl"
     Write-Host "  - Navigate to the Manifest page, find the property 'accessTokenAcceptedVersion' and set it to '2'" -ForegroundColor Red 
+    Write-Host "  - Navigate to the Manifest page, find the 'optionalClaims' section and change its default value to request  'idToken' claims" -ForegroundColor Red 
     Write-Host -ForegroundColor Green "------------------------------------------------------------------------------------------------" 
        if($isOpenSSL -eq 'Y')
     {
diff --git a/6-AdvancedScenarios/4-hybrid-SPA/AppCreationScripts/sample.json b/6-AdvancedScenarios/4-hybrid-SPA/AppCreationScripts/sample.json
@@ -55,9 +55,13 @@
             "ManualSteps": [
                 {
                     "Comment": "Navigate to the Manifest page, find the property 'accessTokenAcceptedVersion' and set it to '2'"
+                },
+                {
+                    "Comment": "Navigate to the Manifest page, find the 'optionalClaims' section and change its default value to request  'idToken' claims"
+
                 }
             ],
-            "RequiredResourcesAccess": [ 
+            "RequiredResourcesAccess": [    
                 {
                     "Resource": "Microsoft Graph",
                     "DelegatedPermissions": [
diff --git a/6-AdvancedScenarios/4-hybrid-SPA/README.md b/6-AdvancedScenarios/4-hybrid-SPA/README.md
@@ -171,6 +171,28 @@ The first thing that we need to do is to declare the unique [resource](https://d
         * Select the **Add scope** button on the bottom to save this scope.
 1. Select the `Manifest` blade on the left.
    * Set `accessTokenAcceptedVersion` property to **2**.
+   * Set the `optionalClaims` property as shown below to request client capabilities claim `idToken`:
+   ```json
+   "optionalClaims": {
+        "idToken": [
+            {
+                "name": "sid",
+                "source": null,
+                "essential": false,
+                "additionalProperties": []
+            },
+            {
+                "name": "login_hint",
+                "source": null,
+                "essential": false,
+                "additionalProperties": []
+            }
+        ],
+        "accessToken": [],
+        "saml2Token": []
+    }
+   ```
+
    * Click on **Save**.
 
 #### Configure the service app (msal-hybrid-spa) to use your app registration
@@ -252,28 +274,43 @@ Next, parse the authorization code, and invoke the acquireTokenByCode API on the
 
 When invoking this API, set enableSpaAuthorizationCode to true, which will enable MSAL to acquire a second authorization code to be redeemed by your single-page application.
 
+Your application should parse this second authorization code, as well as any account hints (e.g. sid, login_hint, preferred_username) and return them such that they can be rendered client-side:
+
 ```javascript
-  const tokenRequest = {
-              code: req.body.code,
-              redirectUri: process.env.REDIRECT_URI,
-              enableSpaAuthorizationCode: true
-          };
-
-      
-      msalInstance.acquireTokenByCode(tokenRequest)
-          .then((response) => {
-              const { code } = response;
-              req.session.code = code;
-              req.session.authenticated = true;
-              const urlFrom = (urlObject) => String(Object.assign(new URL("http://localhost:5000"), urlObject))
-              res.redirect(urlFrom({
-                  protocol: 'http',
-                  pathname: '/',
-                  search: 'getCode=true'
-              }))
-          }).catch((err) => {
-              console.log(err)
-          })
+   const tokenRequest = {
+            code: req.body.code,
+            redirectUri: process.env.REDIRECT_URI,
+            enableSpaAuthorizationCode: true
+        };
+
+
+    
+    msalInstance.acquireTokenByCode(tokenRequest)
+        .then((response) => {
+
+            const { code } = response; //SPA authorization code
+            const {
+                sid, // Session ID claim, used for non-hybrid
+                login_hint: loginHint, // New login_hint claim (used instead of sid or email)
+                preferred_username: preferredUsername // Email
+            } = response.idTokenClaims;
+
+
+            req.session.code = code;
+            req.session.loginHint = loginHint;
+            req.session.sid = sid;
+            req.session.referredUsername = preferredUsername;
+            req.session.authenticated = true;
+
+            const urlFrom = (urlObject) => String(Object.assign(new URL("http://localhost:5000"), urlObject))
+            res.redirect(urlFrom({
+                 protocol: 'http',
+                 pathname: '/',
+                 search: 'getCode=true'
+            }))
+        }).catch((err) => {
+            console.log(err)
+        })
 ```
 
 ### Public client
@@ -293,33 +330,36 @@ ReactDOM.render(
 
 Next, render the code that was acquired server-side, and provide it to the acquireTokenByCode API on the MSAL.js PublicClientApplication instance.
 
+The application should also render any account hints, as they will be needed for any interactive requests to ensure the same user is used for both requests.
+
 ```javascript
-seEffect(() => {
-  if(getCode){
-    callApiToGetSpaCode()
-      .then((data) => {      
+if(getCode && !data){
+      callApiToGetSpaCode()
+        .then((response) => {
         if(inProgress === "none"){
-          // SPA auth code
-          let code = data.code;
-          instance.acquireTokenByCode({code})
-            .then((res) => {
+          const { code, loginHint, sid, referredUsername } = response;
+          instance.acquireTokenByCode({
+            code
+          }).then((res) => {
               setdata(res)
-            }).catch((error) => {
+            }).catch((error ) => {
               if(error instanceof InteractionRequiredAuthError){
                  if (inProgress === "none") {
-                   instance.acquireTokenPopup({code})
-                      .then((res) => {
-                        setdata(res)
-                      }).catch((error) => {
-                        console.log(error)
-                      })
+                   //If loginHint claim is provided, dont use sid
+                   instance.loginPopup({
+                     loginHint //Prefer loginHint claim over referredUsername (email)
+                    }).then((res) => {
+                      setdata(res)
+                    }).catch((error) => {
+                      console.log(error)
+                    })
                  }
               }
           })
         }
       })
     }
-  });
+  }, [instance, inProgress]);
 ```
 
 ## Troubleshooting
diff --git a/6-AdvancedScenarios/4-hybrid-SPA/ReadmeFiles/ReadmeAboutTheCode.md b/6-AdvancedScenarios/4-hybrid-SPA/ReadmeFiles/ReadmeAboutTheCode.md
@@ -44,19 +44,35 @@ Next, parse the authorization code, and invoke the acquireTokenByCode API on the
 
 When invoking this API, set enableSpaAuthorizationCode to true, which will enable MSAL to acquire a second authorization code to be redeemed by your single-page application.
 
+Your application should parse this second authorization code, as well as any account hints (e.g. sid, login_hint, preferred_username) and return them such that they can be rendered client-side:
+
 ```javascript
 
-    const tokenRequest = {
+     const tokenRequest = {
             code: req.body.code,
-            redirectUri: appSettings.appCredentials.redirectUri,
-            enableSpaAuthorizationCode: appSettings.appCredentials.enableSpaAuthorizationCode
+            redirectUri: process.env.REDIRECT_URI,
+            enableSpaAuthorizationCode: true
         };
 
+
+    
     msalInstance.acquireTokenByCode(tokenRequest)
         .then((response) => {
 
-            const { code } = response;
+            const { code } = response; //SPA authorization code
+            const {
+                sid, // Session ID claim, used for non-hybrid
+                login_hint: loginHint, // New login_hint claim (used instead of sid or email)
+                preferred_username: preferredUsername // Email
+            } = response.idTokenClaims;
+
+
             req.session.code = code;
+            req.session.loginHint = loginHint;
+            req.session.sid = sid;
+            req.session.referredUsername = preferredUsername;
+            req.session.authenticated = true;
+
             const urlFrom = (urlObject) => String(Object.assign(new URL("http://localhost:5000"), urlObject))
             res.redirect(urlFrom({
                  protocol: 'http',
@@ -86,31 +102,34 @@ ReactDOM.render(
 
 Next, render the code that was acquired server-side, and provide it to the acquireTokenByCode API on the MSAL.js PublicClientApplication instance.
 
+The application should also render any account hints, as they will be needed for any interactive requests to ensure the same user is used for both requests.
+
 ```javascript
-seEffect(() => {
-  if(getCode){
-    callApiToGetSpaCode()
-      .then((data) => {      
+if(getCode && !data){
+      callApiToGetSpaCode()
+        .then((response) => {
         if(inProgress === "none"){
-          // SPA auth code
-          let code = data.code;
-          instance.acquireTokenByCode({code})
-            .then((res) => {
+          const { code, loginHint, sid, referredUsername } = response;
+          instance.acquireTokenByCode({
+            code
+          }).then((res) => {
               setdata(res)
-            }).catch((error) => {
+            }).catch((error ) => {
               if(error instanceof InteractionRequiredAuthError){
                  if (inProgress === "none") {
-                   instance.acquireTokenPopup({code})
-                      .then((res) => {
-                        setdata(res)
-                      }).catch((error) => {
-                        console.log(error)
-                      })
+                   //If loginHint claim is provided, dont use sid
+                   instance.loginPopup({
+                     loginHint //Prefer loginHint claim over referredUsername (email)
+                    }).then((res) => {
+                      setdata(res)
+                    }).catch((error) => {
+                      console.log(error)
+                    })
                  }
               }
           })
         }
       })
     }
-  });
+  }, [instance, inProgress]);
 ```

Original file line number	Diff line number	Diff line change
`@@ -55,9 +55,13 @@`
`55`	`55`	`"ManualSteps": [`
`56`	`56`	`{`
`57`	`57`	`"Comment": "Navigate to the Manifest page, find the property 'accessTokenAcceptedVersion' and set it to '2'"`
	`58`	`+ },`
	`59`	`+ {`
	`60`	`+ "Comment": "Navigate to the Manifest page, find the 'optionalClaims' section and change its default value to request 'idToken' claims"`
	`61`	`+`
`58`	`62`	`}`
`59`	`63`	`],`
`60`		`- "RequiredResourcesAccess": [`
	`64`	`+ "RequiredResourcesAccess": [`
`61`	`65`	`{`
`62`	`66`	`"Resource": "Microsoft Graph",`
`63`	`67`	`"DelegatedPermissions": [`