React.js with PKCE on MSAL.js v2

Author: Paige

README.md

@@ -5,7 +5,10 @@ This sample application modifies the [react-sample-app](https://github.com/Azure
 1. It calls a [ASP.NET Core Web API](aspnet-core-webapi/Controllers/WeatherForecastController.cs) built with [Microsoft.Identity.Web](https://github.com/AzureAD/microsoft-identity-web) which helps integrating ASP.<span></span>NET Core middleware with [Microsoft Identity Platform](https://docs.microsoft.com/en-us/azure/active-directory/develop/) (formerly _Azure AD v2.0 endpoint_).
 2. With a configuration change in the frontend [.env](react-sample-app/.env.sample) and backend [AppSettings.json](aspnet-core-webapi/appsettings.json), this app can authenticate with Azure AD (Single Tenant or B2B) or Azure AD B2C.
 3. When used with Azure AD B2B, it calls a [Web API](aspnet-core-webapi/Controllers/UserController.cs) which further calls a Graph API to invite a B2B user, or to check the user's invitation status.
-4. It also works with a [sample Next.js frontend](next-sample-app). This is enabled by [loading MSAL on the client side](next-sample-app/components/auth-utils.js#L39) rather than server side. 
+4. There are 3 frontend samples:
+  * [react-sample-app](react-sample-app) is a React.js SPA using MSAL v1 which supports OAuth2 Implicit flow.
+  * [next-sample-app](next-sample-app) is a Next.js frontend also using MSAL v1 with implicit flow. Note that MSAL references `window` object so this is enabled by [loading MSAL on the client side](next-sample-app/components/auth-utils.js#L39) rather than server side. 
+  * [react-pkce-sample-app](react-pkce-sample-app) is a React.js sample using MSAL v2 which support PKCE. At the time of this writing, I can only make it work with @azure/msal-browser 2.0.0-beta.2 due to [this issue](https://github.com/AzureAD/microsoft-authentication-library-for-js/issues/1846) in 2.0.0-beta.4. Make sure you register your app in Azure AD to enable PKCE on SPA as documented [here](https://docs.microsoft.com/en-us/azure/active-directory/develop/quickstart-v2-javascript-auth-code). 
 
 ## Register and configure an Azure AD Application
 Before you can run this app, your must register an application in Azure AD B2C and/or Azure AD. You can register a single application for both frontend UI and backend web service. Refer to the documentation on how to [register an application for Azure AD](https://docs.microsoft.com/en-us/azure/active-directory/develop/quickstart-register-app) or [for Azure AD B2C](https://docs.microsoft.com/en-us/azure/active-directory-b2c/tutorial-register-applications?tabs=app-reg-ga) in general. Customize the app as following for B2B and B2C respectively.

react-pkce-sample-app/.env.sample

@@ -0,0 +1,18 @@
+SKIP_PREFLIGHT_CHECK=true
+BROWSER=none
+REACT_APP_API_URL=https://localhost:5001/api
+REACT_APP_AUTH_REDIRECT_URI=http://localhost:3000
+REACT_APP_AUTH_SCHEME=B2B
+#============B2C============
+REACT_APP_AUTH_AUTHORITY_URL_B2C=https://{your-b2c-account}.b2clogin.com/tfp/{your-b2c-account}.onmicrosoft.com/{your-b2c-signup-signin-flow}
+REACT_APP_AUTH_API_SCOPES_B2C={your-exposed-api-scope}
+REACT_APP_AUTH_CLIENT_ID_B2C={your-b2c-client-app-id}
+REACT_APP_AUTH_VALIDATE_AUTHORITY_B2C=false
+REACT_APP_AUTH_LOGIN_SCOPES_B2C=openid profile
+#============B2B============
+REACT_APP_AUTH_AUTHORITY_URL_B2B=https://login.microsoftonline.com/{your-aad-account}.onmicrosoft.com
+REACT_APP_AUTH_API_SCOPES_B2B={your-exposed-api-scope}
+REACT_APP_AUTH_CLIENT_ID_B2B={your-aad-client-app-id}
+REACT_APP_AUTH_VALIDATE_AUTHORITY_B2B=true
+REACT_APP_AUTH_LOGIN_SCOPES_B2B=openid profile
+REACT_APP_AUTH_DOMAIN_NAME={your-aad-account}.onmicrosoft.com

react-pkce-sample-app/.gitignore

@@ -0,0 +1,26 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+.env
+