msal-20-spfx

Summary

This webpart demosntrates the authentication and access token acquisition with MSAL.js 2.0 inside SharePoint Framework (SPFx). On a button click it tries three login options

• silent
• popup
• redirect and in case a login already took place previously it first tries to acquire in access token from cache or per refresh.

msal-20-spfx in action

A detailed functionality and technical description can be found in the author's blog post

Used SharePoint Framework Version

Applies to

Usage of MSAL.js 2.0 Authorization Code Flow

Solution

Solution	Author(s)
outlook-2-sp-spfx	Markus Moeller (@moeller2_0)

Version history

Version	Date	Comments
1.0	August 15, 2020	Initial release

Disclaimer

THIS CODE IS PROVIDED AS IS WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.

---

Minimal Path to Awesome

• Clone this repository
• in the command line run:
  • restore dependencies: npm install
  • build solution gulp build --ship
  • bundle solution: gulp bundle --ship
  • package solution: gulp package-solution --ship
  • locate solution at .\sharepoint\solution\msal-20-spfx.sppkg
  • upload it to your tenant app catalog
  • Register an app in Azure AD as SPA with a redirect URI
  • Install your webpart on a given site
  • Instantiate your webpart on a page in that site
  • Configure it with app id, your redirect URI (best: That page's url) and your tenant domain (YOURTENANT.onmicrosoft.com)

Features

This webpart shows the following capabilities on top of the SharePoint Framework:

• MSAL 2.0 authorization code flow including
  • silent login
  • popup login
  • redirect login
  • token acquisition