{"id":4959,"date":"2020-07-20T09:00:48","date_gmt":"2020-07-20T16:00:48","guid":{"rendered":"https:\/\/officedevblogs.wpengine.com\/?p=4959"},"modified":"2020-07-20T09:00:48","modified_gmt":"2020-07-20T16:00:48","slug":"msal-js-2-0-supports-authorization-code-flow-is-now-generally-available","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/msal-js-2-0-supports-authorization-code-flow-is-now-generally-available\/","title":{"rendered":"MSAL.js 2.0 is now generally available with support for authorization code flow"},"content":{"rendered":"<p>The <a href=\"https:\/\/github.com\/AzureAD\/microsoft-authentication-library-for-js\/tree\/dev\/lib\/msal-browser\">Microsoft Authentication Library (MSAL) for JavaScript<\/a> has now released version 2.0 and allows you to use the authorization code flow in production. MSAL.js 2.0 will first make a request to the \/authorize endpoint to receive an authorization code protected by <a href=\"https:\/\/tools.ietf.org\/html\/rfc7636\">Proof Key for Code Exchange<\/a> (PKCE). This code is sent to the <a href=\"https:\/\/fetch.spec.whatwg.org\/\">Cross Origin Resource Sharing<\/a> (CORS) enabled \/token endpoint and exchanged for an access token and 24 hour refresh token, which can be used to silently obtain new access tokens.<\/p>\n<p><strong>Why use auth code flow<\/strong><\/p>\n<p>Safari, along with other popular browsers following suit, has implemented an on-by-default privacy feature: <a href=\"https:\/\/webkit.org\/tracking-prevention-policy\/\">Intelligent Tracking Protection<\/a> (ITP). ITP blocks cookies from being sent across domains, thus breaking the standard pattern for implementing the <a href=\"https:\/\/docs.microsoft.com\/en-us\/azure\/active-directory\/develop\/v2-oauth2-implicit-grant-flow\">implicit flow<\/a> in single-page apps (SPAs), where silent iframes are used for single sign-on in the browser.<\/p>\n<p>In response to browser cookie limitations, <a href=\"https:\/\/tools.ietf.org\/html\/draft-ietf-oauth-browser-based-apps-04\">OAuth published a draft<\/a> recommending that browser based applications now use the authorization code flow. The Microsoft identity platform now enables this through <a href=\"https:\/\/docs.microsoft.com\/en-us\/azure\/active-directory\/develop\/reference-third-party-cookies-spas\">updates to our client library and Secure Token Server<\/a>.<\/p>\n<p><strong>Get started<\/strong><\/p>\n<p>To take advantage of the latest recommended authentication flow in your browser-based application, follow the <a href=\"https:\/\/docs.microsoft.com\/azure\/active-directory\/develop\/quickstart-v2-javascript-auth-code\">quickstart<\/a> or <a href=\"https:\/\/docs.microsoft.com\/en-us\/azure\/active-directory\/develop\/tutorial-v2-javascript-auth-code\">tutorial<\/a>. You will need to update your application to use the latest MSAL version and update your application registration in the Azure Portal.<\/p>\n<p>-Microsoft identity platform team<\/p>\n","protected":false},"excerpt":{"rendered":"<p>MSAL.js 2.0 supports authorization code flow for single-page applications with PKCE and CORS is now generally available.<\/p>\n","protected":false},"author":69081,"featured_media":25159,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[3,5],"tags":[22,66],"class_list":["post-4959","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-microsoft-graph","category-microsoft-identity-platform","tag-azure-ad","tag-oauth-2-0"],"acf":[],"blog_post_summary":"<p>MSAL.js 2.0 supports authorization code flow for single-page applications with PKCE and CORS is now generally available.<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts\/4959","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/users\/69081"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/comments?post=4959"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts\/4959\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/media\/25159"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/media?parent=4959"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/categories?post=4959"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/tags?post=4959"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}