azure-samples/ms-identity-javascript-react-tutorial

A chapterwise tutorial that will take you through the fundamentals of modern authentication with Microsoft identity platform in React using MSAL React

page_type	languages	products	description	urlFragment
sample	javascript	msal-react ms-graph azure-storage azure-app-service azure-functions azure-resource-manager azure-app-service-static azure-active-directory azure-active-directory-b2c	Tutorial: Enable your React single-page application to sign-in users, call the Graph API and deploy on Azure	ms-identity-javascript-react-tutorial

Tutorial: Enable your React single-page application to sign-in users and call APIs with the Microsoft identity platform

The Microsoft identity platform, along with Azure Active Directory (Azure AD) and Azure Azure Active Directory B2C (Azure AD B2C) are central to the Azure cloud ecosystem. This tutorial aims to take you through the fundamentals of modern authentication with React, using the Microsoft Authentication Library for React (MSAL React).

We recommend following the chapters in successive order. However, the code samples are self-contained, so feel free to pick samples by topics that you may need at the moment.

⚠️ This is a work in progress. Come back frequently to discover more samples.

ℹ️ Samples in this tutorial use functional React components. If you want to use MSAL React with class-based React components, see: Docs: Class Components

Prerequisites

• Node.js v14 LTS or later
• Visual Studio Code
• A modern web browser (to use popup experience during sign-in and token acquisition, your browser should allow popups.)

Please refer to each sample's README for sample-specific prerequisites.

Recommendations

• jwt.ms for inspecting your tokens
• Fiddler for monitoring your network activity and troubleshooting
• Check MSAL.js FAQ and MSAL React FAQ for your questions
• Follow the Azure AD Blog to stay up-to-date with the latest developments

Please refer to each sample's README for sample-specific recommendations.

Contents

• For Azure AD, start the tutorial from here
• For Azure AD B2C, start the tutorial from here

Alternatively, choose below the sample you want to review.

Chapter 1: Sign-in a user to your application

	Sign-in with Azure AD Sign-in your users with the Azure AD and learn to work with ID Tokens. Learn how single sign-on (SSO) works. Learn to secure your apps to operate in national clouds.
	Sign-in with Azure AD B2C Sign-in your customers with Azure AD B2C. Learn to integrate with external social identity providers. Learn how to use user-flows and custom policies.

Chapter 2: Sign-in a user and get an Access Token for Microsoft Graph

	Get an Access Token from Azure AD and call Microsoft Graph Authenticate your users and acquire an Access Token for Microsoft Graph and then call the Microsoft Graph API. Handle Continous Access Evaluation (CAE) events.
	Get an Access Token from Azure AD and call Azure REST API and Azure Storage REST API Authenticate your users and acquire an Access Token for Azure Management Resource and Azure Storage then call the Azure REST API and Azure Storage REST API.

Chapter 3: Protect an API and call the API from your client app

	Protect and call a web API on Azure AD Protect your web API with the Azure AD. Use a client application to sign-in a user, acquire an Access Token for your web API and call your protected web API.
	Protect and call a web API on Azure AD B2C Protect your web API with Azure AD B2C. Use a client application to sign-in a user, acquire an Access Token for your web API and call your protected web API.

Chapter 4: Deploy your application to Azure

	Deploy to Azure Static Web Apps Prepare your app for deployment to Azure Static Web Apps. Learn how to protect and call an Azure Function API. Learn how to configure authentication parameters and use Azure services for managing your operations.

Chapter 5: Control access to your protected API using App Roles and Security Groups

	Use App Roles for access control Define App Roles and use roles claim in a token to implement Role-based Access Control (RBAC) for your SPA and protected web API.
	Use Security Groups for access control Create Security Groups and use groups claim in a token to implement Role-based Access Control (RBAC) for your SPA and protected web API. Handle overage scenarios.

Chapter 6: Dive into advanced scenarios

	Call a web API that calls Microsoft Graph on behalf of a user Enhance your protected web API to acquire an Access Token for Microsoft Graph on-behalf-of a user signed-in to the client app. Enable Conditional Access for your downstream API and handle MFA requirement.
	Use Conditional Access Authentication Context Enable conditional access for your web API. Use auth context to implement granular access control to resources. Handle claims challenge in client applications.
	Use the hybrid SPA flow to authenticate users on both server-side and client-side applications Authenticate users both server side and client side. Use hybrid SPA flow to achieve SSO between backend and frontend applications.

We'd love your feedback

Were we successful in addressing your learning objective? Consider taking a moment to share your experience with us.

More information

Learn more about the Microsoft identity platform:

• Microsoft identity platform
• Azure Active Directory B2C
• Overview of Microsoft Authentication Library (MSAL)
• Application types for Microsoft identity platform
• Understanding Azure AD application consent experiences
• Understand user and admin consent
• Application and service principal objects in Azure Active Directory
• Microsoft identity platform best practices and recommendations

See more code samples:

• MSAL code samples
• MSAL B2C code samples

Community Help and Support

Use Stack Overflow to get support from the community. Ask your questions on Stack Overflow first and browse existing issues to see if someone has asked your question before. Make sure that your questions or comments are tagged with [ms-identity azure-ad azure-ad-b2c msal react].

If you find a bug in the sample, please raise the issue on GitHub Issues.

To provide a recommendation, visit the following User Voice page.

Contributing

This project welcomes contributions and suggestions. Most contributions require you to agree to a Contributor License Agreement (CLA) declaring that you have the right to, and actually do, grant us the rights to use your contribution. For details, visit cla.opensource.microsoft.com.

Code of Conduct

This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact [email protected] with any additional questions or comments.

ms-identity-javascript-react-tutorial's Issues

Getting the authorization code in frontend but generating token from the backend of our SPA

I want to know while authenticating the react app using Azure AD B2C we receive token in the redirect URI is it possible that we only get the authorization code in the redirect URI of the frontend and then I send that authorization code to the backend of my react app to make a request to Azure AD B2C for token generation.

Documentation not aligned in 3-Authorization-II/2-call-api-b2c/

Issue

Please provide us with the following information:

This issue is for the sample

    - [ ] 1-1) Sign-in with Azure AD
    - [ ] 1-2) Sign-in with Azure AD B2C
    - [ ] 2-1) Acquire a Token and call Microsoft Graph
    - [ ] 3-1) Protect and call a web API on Azure AD
    - [x] 3-2) Protect and call a web API on Azure AD B2C
    - [ ] 4-1) Deploy to Azure Storage and App Service
    - [ ] 4-2) Deploy to Azure Static App Service
    - [ ] 5-1) Call a web API using App Roles
    - [ ] 5-2) Call a web API using Security Groups
    - [ ] 6-1) Call Microsoft Graph using on-behalf-of flow
    - [ ] 6-2) Call a web API using Proof of Possession tokens
    - [ ] 6-3) Call a web API using Conditional Access Auth Context

This issue is for a

    - [ ] bug report -> please search issues before submitting
    - [ ] question
    - [ ] feature request
    - [x] documentation issue or request

Minimal steps to reproduce

Follow exact steps to setup the two applications

Any log messages given by the failure

GET http://localhost:5000/hello 401 (Unauthorized)

Expected/desired behavior

GET http://localhost:5000/hello 200

Library version

7fe2cc6

Browser and version

Chrome, Edge, Firefox, Safari

Mention any other details that might be useful

It's very nice to have this kind of samples but the readme is not aligned with the application configurations.

API\config.json

• Documentation mention tenantID when the key is tenantName
• Documentation does not mention anything about the scopes defined in protectedRoutes when by default the value is "demo.read" when in the documentation the steps to follow creates access_as_user scope

SPA\src\authConfig.js

• Documentation mention follow values like Enter_the_Application_Id_Here that does not exists.
• Documentation does not mention anything about loginRequest and protectedResources

Refactor component to handle claims challenge

Issue

Refactor Profile.jsx to handle claims challenge in a hook, interceptor or utility function etc.

Please provide us with the following information:

This issue is for the sample

    - [ ] 1-1) Sign-in with Azure AD
    - [ ] 1-2) Sign-in with Azure AD B2C
    - [ x ] 2-1) Acquire a Token and call Microsoft Graph
    - [ ] 3-1) Protect and call a web API on Azure AD
    - [ ] 3-2) Protect and call a web API on Azure AD B2C
    - [ ] 4-1) Deploy to Azure Storage and App Service
    - [ ] 4-2) Deploy to Azure Static App Service
    - [ ] 5-1) Call a web API using App Roles
    - [ ] 5-2) Call a web API using Security Groups
    - [ ] 6-1) Call Microsoft Graph using on-behalf-of flow
    - [ ] 6-3) Call a web API using Conditional Access Auth Context
    - [ ] 6-4) Sign-in with Hybrid SPA flow

This issue is for a

    - [ ] bug report -> please search issues before submitting
    - [ ] question
    - [ x ] feature request
    - [ ] documentation issue or request

Handling form default values when creating Auth Context item

Issue

Please provide us with the following information: The default values would be incorrect if the user didn't click any of the options when creating an Auth context item which will cause an error in the front-end

This issue is for the sample

    - [ ] 1-1) Sign-in with Azure AD
    - [ ] 1-2) Sign-in with Azure AD B2C
    - [ ] 2-1) Acquire a Token and call Microsoft Graph
    - [ ] 3-1) Protect and call a web API on Azure AD
    - [ ] 3-2) Protect and call a web API on Azure AD B2C
    - [ ] 4-1) Deploy to Azure Storage and App Service
    - [ ] 4-2) Deploy to Azure Static App Service
    - [ ] 5-1) Call a web API using App Roles
    - [ ] 5-2) Call a web API using Security Groups
    - [ ] 6-1) Call Microsoft Graph using on-behalf-of flow
    - [ ] 6-2) Call a web API using Proof of Possession tokens
    - [x] 6-3) Call a web API using Conditional Access Auth Context

This issue is for a

    - [x] bug report -> please search issues before submitting
    - [ ] question
    - [ ] feature request
    - [ ] documentation issue or request

Minimal steps to reproduce

sign in as admin --> click on fetch or create --> select an http action and don't select an auth context --> in SPA try delete an item from the todo list.

Any log messages given by the failure

No

Expected/desired behavior

Add default values to form

Library version

Browser and version

Chrome, Edge, Firefox, Safari?

Mention any other details that might be useful

Chrome

Thanks! We'll be in touch soon.

Missing the Call API button

Issue

Please provide us with the following information:

This issue is for the sample

    - [ ] 1-1) Sign-in with Azure AD
    - [ ] 1-2) Sign-in with Azure AD B2C
    - [ ] 2-1) Acquire a Token and call Microsoft Graph
    - [ ] 3-1) Protect and call a web API on Azure AD
    - [ ] 3-2) Protect and call a web API on Azure AD B2C
    - [ ] 4-1) Deploy to Azure Storage and App Service
    - [ ] 4-2) Deploy to Azure Static App Service
    - [ ] 5-1) Call a web API using App Roles
    - [ ] 5-2) Call a web API using Security Groups
    - [x] 6-1) Call Microsoft Graph using on-behalf-of flow
    - [ ] 6-3) Call a web API using Conditional Access Auth Context
    - [ ] 6-4) Sign-in with Hybrid SPA flow

This issue is for a

    - [ ] bug report -> please search issues before submitting
    - [ ] question
    - [ ] feature request
    - [x] documentation issue or request

Minimal steps to reproduce

Follow all steps in tutorial up to Explore the sample

Any log messages given by the failure

n/a

Expected/desired behavior

Once you authenticate, Select the Call API button on the navigation bar. -- I do not see the Call API button, on screen or in code

Library version

main

Browser and version

Edge

Mention any other details that might be useful

Is this because I am not authenticated? I don't get any errors or other indication that this is the case.

Thanks! We'll be in touch soon.

Body must include client_secret or client_assertion

Please provide us with the following information:

This issue is for a: (mark with an x)

- [x ] bug report -> please search issues before submitting
- [ ] feature request
- [ ] documentation issue or request
- [ ] regression (a behavior that used to work and stopped in a new release)

Minimal steps to reproduce

Clone the repository and follow the instructions for 3-Authorization-II/1-call-api

Any log messages given by the failure

AADSTS7000218: The request body must contain the following parameter: 'client_assertion' or 'client_secret'.Trace ID: 702e16ef-2f43-43f6-b52c-363030d61102Correlation ID: be8f545a-df36-4283-83d7-145531655fa0Timestamp: 2021-05-03 19:38:57Z

Expected/desired behavior

Expected to be able to login and call the local API protected by azure ad.

Browser and version?

Firefox 88.0

Versions

Mention any other details that might be useful

---

Thanks! We'll be in touch soon.

[Question] What is the reason to perform mapping with the storage in the database for the ARCS claim demo?

Question

For the provided demo "3-call-api-acrs" user needs to configure mapping between the operation and Auth context manually and store them into the DB.

1. Is there is any reason to make this mapping 'dynamic' by requesting the avaliable contexts from the azure identity provider?
   I exactly know which endpoints should be protected can we just check context in the acrs claim in the similar way like it's done for the roles access?

2. Is it supported for B2C?

See reference here:
https://github.com/Azure-Samples/ms-identity-javascript-react-tutorial/blob/main/6-AdvancedScenarios/3-call-api-acrs/README.md

Will appreciate an answer.

    - [ ] 1-1) Sign-in with Azure AD
    - [x] 1-2) Sign-in with Azure AD B2C
    - [ ] 2-1) Acquire a Token and call Microsoft Graph
    - [ ] 3-1) Protect and call a web API on Azure AD
    - [x] 3-2) Protect and call a web API on Azure AD B2C
    - [ ] 4-1) Deploy to Azure Storage and App Service
    - [ ] 4-2) Deploy to Azure Static App Service
    - [] 5-1) Call a web API using App Roles
    - [ ] 5-2) Call a web API using Security Groups
    - [ ] 6-1) Call Microsoft Graph using on-behalf-of flow
    - [x ] 6-3) Call a web API using Conditional Access Auth Context
    - [ ] 6-4) Sign-in with Hybrid SPA flow

This issue is for a

    - [ ] bug report -> please search issues before submitting
    - [x] question
    - [ ] feature request
    - [ ] documentation issue or request

"prov_data" object breaking render

Issue

Please provide us with the following information:

This issue is for the sample

    - [ ] 1-1) Sign-in with Azure AD
    - [ ] 1-2) Sign-in with Azure AD B2C
    - [ ] 2-1) Acquire a Token and call Microsoft Graph
    - [x] 3-1) Protect and call a web API on Azure AD
    - [ ] 3-2) Protect and call a web API on Azure AD B2C
    - [ ] 4-1) Deploy to Azure Storage and App Service
    - [ ] 4-2) Deploy to Azure Static App Service
    - [] 5-1) Call a web API using App Roles
    - [ ] 5-2) Call a web API using Security Groups
    - [ ] 6-1) Call Microsoft Graph using on-behalf-of flow
    - [ ] 6-3) Call a web API using Conditional Access Auth Context
    - [ ] 6-4) Sign-in with Hybrid SPA flow

This issue is for a

    - [x] bug report -> please search issues before submitting
    - [ ] question
    - [ ] feature request
    - [ ] documentation issue or request

Minimal steps to reproduce

Follow the sample instructions all the way to the end.

Any log messages given by the failure

Error raised in Chrome:
bundle.js:62221 Uncaught Error: Objects are not valid as a React child (found: object with keys {at, prov, altsecid}). If you meant to render a collection of children, use an array instead.
at throwOnInvalidObjectType (bundle.js:62221:13)
at createChild (bundle.js:62470:11)
at reconcileChildrenArray (bundle.js:62729:29)
at reconcileChildFibers (bundle.js:63141:20)
at reconcileChildren (bundle.js:66427:32)
at updateHostComponent (bundle.js:67151:7)
at beginWork (bundle.js:68789:18)
at HTMLUnknownElement.callCallback (bundle.js:51421:18)
at Object.invokeGuardedCallbackDev (bundle.js:51470:20)
at invokeGuardedCallback (bundle.js:51532:35)
throwOnInvalidObjectType @ bundle.js:62221
createChild @ bundle.js:62470
reconcileChildrenArray @ bundle.js:62729
reconcileChildFibers @ bundle.js:63141
reconcileChildren @ bundle.js:66427
updateHostComponent @ bundle.js:67151
beginWork @ bundle.js:68789
callCallback @ bundle.js:51421
invokeGuardedCallbackDev @ bundle.js:51470
invokeGuardedCallback @ bundle.js:51532
beginWork$1 @ bundle.js:74545
performUnitOfWork @ bundle.js:73678
workLoopSync @ bundle.js:73591
renderRootSync @ bundle.js:73560
recoverFromConcurrentError @ bundle.js:72968
performConcurrentWorkOnRoot @ bundle.js:72869
workLoop @ bundle.js:121117
flushWork @ bundle.js:121091
performWorkUntilDeadline @ bundle.js:121375
bundle.js:65964 The above error occurred in the component:

at td
at tr
at tbody
at table
at div
at http://localhost:3000/static/js/bundle.js:46805:5
at div
at div
at IdTokenData (http://localhost:3000/static/js/bundle.js:804:98)
at div
at http://localhost:3000/static/js/bundle.js:43675:5
at AuthenticatedTemplate (http://localhost:3000/static/js/bundle.js:26553:5)
at Home (http://localhost:3000/static/js/bundle.js:2198:65)
at Routes (http://localhost:3000/static/js/bundle.js:114743:5)
at Pages
at PageLayout (http://localhost:3000/static/js/bundle.js:1464:26)
at MsalProvider (http://localhost:3000/static/js/bundle.js:26435:5)
at Router (http://localhost:3000/static/js/bundle.js:114676:15)
at BrowserRouter (http://localhost:3000/static/js/bundle.js:113485:5)
at App (http://localhost:3000/static/js/bundle.js:79:5)

Expected/desired behavior

Table with all the claims data

Library version

Browser and version

Chrome

Mention any other details that might be useful

File : @\1-call-api\SPA\src\components\DataDisplay.jsx
In the "IdTokenData" Component, in the tokenClaims array there is a an object that is different from all the other objects which is in array (= "arr") where arr[0] = 'prov_data' and arr[1] is an additional array which breaks the render at line 77.

My Temporary solution:
replace "tableRow" definition in lines 73-81 with this:
const tableRow = Object.keys(tokenClaims).map((key, index) => {
return (

{tokenClaims[key].map((claimItem) => {
if (typeof claimItem !== 'string') return '';
return {claimItem};
})}

);
});

(added type check for the claimItem).

Thanks! We'll be in touch soon.

Not able to run the example using personal Azure account.

Issue

When I run the 2-Authorization-I>2-call-arm>SPA example and login with my personal Azure account, I get the following error when I click on Tenants tab.

Error:

Error: invalid_scope: 70011 - [2023-02-06 10:14:27Z]: AADSTS70011: The provided value for the input parameter 'scope' is not valid. The scope 'https://management.azure.com/user_impersonation openid profile offline_access' does not exist....

This issue is for the sample

    - [ ] 1-1) Sign-in with Azure AD
    - [ ] 1-2) Sign-in with Azure AD B2C
    - [ ] 2-1) Acquire a Token and call Microsoft Graph
    - [ ] 3-1) Protect and call a web API on Azure AD
    - [ ] 3-2) Protect and call a web API on Azure AD B2C
    - [ ] 4-1) Deploy to Azure Storage and App Service
    - [ ] 4-2) Deploy to Azure Static App Service
    - [ ] 5-1) Call a web API using App Roles
    - [ ] 5-2) Call a web API using Security Groups
    - [ ] 6-1) Call Microsoft Graph using on-behalf-of flow
    - [ ] 6-3) Call a web API using Conditional Access Auth Context
    - [ ] 6-4) Sign-in with Hybrid SPA flow
    - [x]  Other

Other: Acquire a Token and call ARM API

This issue is for a

    - [x] bug report -> please search issues before submitting
    - [ ] question
    - [ ] feature request
    - [ ] documentation issue or request

Minimal steps to reproduce

1. Clone this repo.
2. Run the 2-Authorization-I/2-call-arm/SPA example.
3. Go to http://localhost:3000/
4. Login using personal Azure account.
5. Click on Tenants menu

Any log messages given by the failure

Error: invalid_scope: 70011 - [2023-02-06 10:14:27Z]: AADSTS70011: The provided value for the input parameter 'scope' is not valid. The scope 'https://management.azure.com/user_impersonation openid profile offline_access' does not exist....

Library version

"@azure/arm-resources-subscriptions": "^2.0.1",
"@azure/msal-browser": "~2.31.0",
"@azure/msal-react": "~1.4.10",
"@azure/storage-blob": "^12.11.0",

Browser and version

Edge

invalid_request: 90009

Issue

Please provide us with the following information:

This issue is for the sample

    - [ ] 1-1) Sign-in with Azure AD
    - [ ] 1-2) Sign-in with Azure AD B2C
    - [x ] 2-1) Acquire a Token and call Microsoft Graph
    - [ ] 3-1) Protect and call a web API on Azure AD
    - [ ] 3-2) Protect and call a web API on Azure AD B2C
    - [ ] 4-1) Deploy to Azure Storage and App Service
    - [ ] 4-2) Deploy to Azure Static App Service
    - [ ] 5-1) Call a web API using App Roles
    - [ ] 5-2) Call a web API using Security Groups
    - [ ] 6-1) Call Microsoft Graph using on-behalf-of flow
    - [ ] 6-2) Call a web API using Proof of Possession tokens
    - [ ] 6-3) Call a web API using Conditional Access Auth Context

This issue is for a

    - [ x ] bug report -> please search issues before submitting
    - [ ] question
    - [ ] feature request
    - [ ] documentation issue or request

Minimal steps to reproduce

Any log messages given by the failure

is requesting a token for itself. This scenario is supported only if resource is specified using the GUID based App Identifier.

Expected/desired behavior

Library version

Browser and version

Chrome, Edge, Firefox, Safari? Chrome

Mention any other details that might be useful

Thanks! We'll be in touch soon.

How to assign permissions to app roles from Azure Ad Portal instead of hardcoding it on application level?

Issue

Azure AD provides us with a nice mechanism of assigning users to a app role defined in the Azure AD portal. However there is no mechanism which defines the permissions each app role has. For example what if we want to control the CRUD operations on a role called TaskUser (as defined in the docs). What if we only want to allow POST and GET for that role.

How can we do this without hardcoding the correlation between an app role and it's permissions. Currently this is hardcoded in the following example created by Microsoft: https://github.com/Azure-Samples/ms-identity-javascript-react-tutorial/tree/main/5-AccessControl

Please provide us with the following information:

This issue is for the sample

https://github.com/Azure-Samples/ms-identity-javascript-react-tutorial/tree/main/5-AccessControl

    - [ ] 1-1) Sign-in with Azure AD
    - [ ] 1-2) Sign-in with Azure AD B2C
    - [ ] 2-1) Acquire a Token and call Microsoft Graph
    - [x] 3-1) Protect and call a web API on Azure AD
    - [ ] 3-2) Protect and call a web API on Azure AD B2C
    - [ ] 4-1) Deploy to Azure Storage and App Service
    - [ ] 4-2) Deploy to Azure Static App Service
    - [x ] 5-1) Call a web API using App Roles
    - [ ] 5-2) Call a web API using Security Groups
    - [ ] 6-1) Call Microsoft Graph using on-behalf-of flow
    - [ ] 6-3) Call a web API using Conditional Access Auth Context
    - [ ] 6-4) Sign-in with Hybrid SPA flow

This issue is for a

    - [ ] bug report -> please search issues before submitting
    - [x ] question
    - [ ] feature request
    - [ ] documentation issue or request

Minimal steps to reproduce

1. Follow the steps as stated in the example tutorial

Any log messages given by the failure

Expected/desired behavior

No hardcoding permissions like (PUT, POST, UPDATE, DELETE) but manageable in the Azure Portal.
Otherwise we have to maintain this on application level, which is not desired.

Also the possibility for Deviating settings per role per api pathname.

App Role: TaskUser
API Path: /api/todolist
Allowed Operations: POST, GET

App Role: TaskAdmin
API path: /api/todolist
Allowed Operations: POST, GET, UPDATE, DELETE

Library version

"@azure/msal-browser": "^2.31.0",
"@azure/msal-react": "^1.4.10",

Browser and version

Chrome Versie 108.0.5359.94 (Officiële build) (arm64)

Chrome, Edge, Firefox, Safari?

Mention any other details that might be useful

In my opinion the app roles are not a true RBAC system for our applications. We are missing control from the Azure portal for granularly control over permissions for each app role. We simply can't apply permissions to roles from the Azure portal. What is the point of having app roles if a role without a specific set of permissions assigned to them?

Take this example screenshot from the opensource headless CMS called Strapi.
This is something I have no clue of if this even possible with Azure Add app roles. Hopefully someone has the answer to it!

Lastly, in term of security, we can just change the app roles in sessions storage or local storage in the front-end, so what's the point anyway of having a RouteGuard which is useless in terms of security?

In terms of security we have to add this on API level of course. (as described per docs)
However, right now I don't feel comfortable hard coding this like shown in the example below. What if we want to give TaskAdmin GET and POST permission and TaskUser only PUT permission?

Sample code from: https://github.com/Azure-Samples/ms-identity-javascript-react-tutorial/blob/main/5-AccessControl/1-call-api-roles/API/authConfig.js

 accessMatrix: {
        todolist: {
            path: '/todolist',
            methods: ['GET', 'POST', 'PUT', 'DELETE'],
            roles: ['TaskUser', 'TaskAdmin'],
        },
        dashboard: {
            path: '/dashboard',
            methods: ['GET'],
            roles: ['TaskAdmin'],
        },
    },

Thanks! We'll be in touch soon.

Unclear file location in documentation

Issue

Please provide us with the following information:

This issue is for the sample

    - [x] 1-1) Sign-in with Azure AD
    - [x] 1-2) Sign-in with Azure AD B2C
    - [x] 2-1) Acquire a Token and call Microsoft Graph
    - [x] 3-1) Protect and call a web API on Azure AD
    - [x] 3-2) Protect and call a web API on Azure AD B2C
    - [x] 4-1) Deploy to Azure Storage and App Service
    - [x] 4-2) Deploy to Azure Static App Service
    - [x] 5-1) Call a web API using App Roles
    - [x] 5-2) Call a web API using Security Groups
    - [x] 6-1) Call Microsoft Graph using on-behalf-of flow
    - [x] 6-3) Call a web API using Conditional Access Auth Context
    - [x] 6-4) Sign-in with Hybrid SPA flow

This issue is for a

    - [ ] bug report -> please search issues before submitting
    - [ ] question
    - [ ] feature request
    - [x] documentation issue or request

Minimal steps to reproduce

open the readme for any of these sample (ie https://github.com/Azure-Samples/ms-identity-javascript-react-tutorial/blob/main/1-Authentication/2-sign-in-b2c/README.md#about-the-code)

Any log messages given by the failure

There are no log messages for this ,but the problem is that when looking at all of the code "snippets" in the "About The Code" section, there are no file names. The setup for the project has a lot of msal cutom files, and I can't seem to resolve where each of these snippets is in the actual code, or if they just don't exist and i need to add them. This would really help for clarity. A key example is that when i look at the initial project for B2C sign in (1-Authentication/b2c....), there is a function APP() for sso, but I have no idea where that is or if i need to make a whole new file for it., an example is this snipped

if i want to add the SSO feature then where do i stick this section of code? Or is it already present somewhere and the "About the Code" section is providing extra explanation? If it is extra explanation then please site where it is.

Just feeling a bit lost going through thispart of the readme. Otherwise I have found it to be very helpful.

Expected/desired behavior

Library version

Browser and version

Chrome, Edge, Firefox, Safari?

Mention any other details that might be useful

Thanks! We'll be in touch soon.

The variable port is undefined. The execution fails if process.env.port is defined.

Issue

Please provide us with the following information:

This issue is for the sample

    - [ ] 1-1) Sign-in with Azure AD
    - [ ] 1-2) Sign-in with Azure AD B2C
    - [ ] 2-1) Acquire a Token and call Microsoft Graph
    - [ ] 3-1) Protect and call a web API on Azure AD
    - [ ] 3-2) Protect and call a web API on Azure AD B2C
    - [ ] 4-1) Deploy to Azure Storage and App Service
    - [ ] 4-2) Deploy to Azure Static App Service
    - [ ] 5-1) Call a web API using App Roles
    - [ ] 5-2) Call a web API using Security Groups
    - [ ] 6-1) Call Microsoft Graph using on-behalf-of flow
    - [ ] 6-3) Call a web API using Conditional Access Auth Context
    - [x ] 6-4) Sign-in with Hybrid SPA flow

This issue is for a

    - [X ] bug report -> please search issues before submitting
    - [ ] question
    - [ ] feature request
    - [ ] documentation issue or request

Minimal steps to reproduce

define a value for process.env.port

Any log messages given by the failure

port is undefined

Expected/desired behavior

the variable port would be defined if process.env.port is defined in ${process.env.port ? port : 5000} (the file: authController.js)

Library version

Browser and version

Chrome, Edge, Firefox, Safari? Doesn't matter

Mention any other details that might be useful

Should the statement be: ${process.env.port ? process.env.port : 5000} ?

Thanks! We'll be in touch soon.

Edit Profile doesn't work when I use my own Tenant information.

Issue

Hello,
I'm having an issue where the 'Edit Profile' functionality just redirects back to my localhost:3000 app...
The Tasklist feature seems to work, but the Edit Profile feature does not.
I changed the tenant/client-id information to my own. Also to keep it simple on my permissions side, I just have 1 scope permission called 'Scope.All' which I also changed anywhere the ToDoList.Read/ToDoList.ReadWrite shows up.
I did this so I could apply it to all my API's then change it to get more detailed permissions later on.
Note: i also have a separate code-base where i left the ToDoList.Read/ToDoList.ReadWrite scopes in (which I also have in Azure), and still have the same issue.
If it is useful to debug the issue, the url it tries to create in the code to redirect to is in one of the sections below.

This issue is for the sample

    - [ ] 1-1) Sign-in with Azure AD
    - [ ] 1-2) Sign-in with Azure AD B2C
    - [ ] 2-1) Acquire a Token and call Microsoft Graph
    - [ ] 3-1) Protect and call a web API on Azure AD
    - [ x ] 3-2) Protect and call a web API on Azure AD B2C
    - [ ] 4-1) Deploy to Azure Storage and App Service
    - [ ] 4-2) Deploy to Azure Static App Service
    - [ ] 5-1) Call a web API using App Roles
    - [ ] 5-2) Call a web API using Security Groups
    - [ ] 6-1) Call Microsoft Graph using on-behalf-of flow
    - [ ] 6-3) Call a web API using Conditional Access Auth Context
    - [ ] 6-4) Sign-in with Hybrid SPA flow

This issue is for a

    - [ ] bug report -> please search issues before submitting
    - [ x ] question
    - [ ] feature request
    - [ ] documentation issue or request

Minimal steps to reproduce

When i debug via DevTools, AzureB2C creates this navigateUrl url via this code:

           // Create acquire token url.
            const navigateUrl = await authClient.getAuthCodeUrl({
                ...validRequest,
                nativeBroker: NativeMessageHandler.isNativeAvailable(this.config, this.logger, this.nativeMessageHandler, request.authenticationScheme)
            });

that I assume it tries to redirect to in order to edit my profile:

https://patientportalb2cdev.b2clogin.com/patientportalb2cdev.onmicrosoft.com/b2c_1_edit_profile/oauth2/v2.0/authorize?client_id=c1d2e539-4d27-45b9-b10d-163e44036e41&scope=openid%20profile%20offline_access&redirect_uri=http%3A%2F%2Flocalhost%3A3000%2F&client-request-id=b20aa729-48a2-4c97-a8e7-ea99fb0d1a6b&response_mode=fragment&response_type=code&x-client-SKU=msal.js.browser&x-client-VER=2.31.0&client_info=1&code_challenge=G2ZxwFmp-1Octau0LlIV9E-0Z_-LhIMAF1ZJwZyqrWY&code_challenge_method=S256&login_hint=acurian.testing%40gmail.com&X-AnchorMailbox=Oid%3Ae8a52a20-57ba-4188-855f-316c09a2af99-b2c_1_susi%4089fe1c88-6121-4253-931c-18b20a0e7807&nonce=00600125-d707-479b-bbe8-1190d74a77ca&state=eyJpZCI6IjFiNmYwZDBlLTUwZmMtNDljMy1hNjViLTNjYWE2OTYxMjNjZiIsIm1ldGEiOnsiaW50ZXJhY3Rpb25UeXBlIjoicmVkaXJlY3QifX0%3D

but it seems like the app immediately redirects back to localhost:3000.
and it also removes my email info from the top-right button:
.

If I manually goto the above url in my browser, it redirects along with this state information:

http://localhost:3000/#state=eyJpZCI6IjFiNmYwZDBlLTUwZmMtNDljMy1hNjViLTNjYWE2OTYxMjNjZiIsIm1ldGEiOnsiaW50ZXJhY3Rpb25UeXBlIjoicmVkaXJlY3QifX0%3d&client_info=eyJ1aWQiOiJlOGE1MmEyMC01N2JhLTQxODgtODU1Zi0zMTZjMDlhMmFmOTktYjJjXzFfZWRpdF9wcm9maWxlIiwidXRpZCI6Ijg5ZmUxYzg4LTYxMjEtNDI1My05MzFjLTE4YjIwYTBlNzgwNyJ9&code=eyJraWQiOiJjcGltY29yZV8wOTI1MjAxNSIsInZlciI6IjEuMCIsInppcCI6IkRlZmxhdGUiLCJzZXIiOiIxLjAifQ..IU7o_pErd-BfHQLK.2GS7gKlD5bV-qw_8wi8xwOAv_2fnSslI3FRO82j403Kce2ywo2R0Duu5GDsqnIIFlH2ZAduOpjRuQbYuW5wVId9EZHx_qAcJaC3TVvQYiv3V6oKCOeVyhNiCpRiZGXN9QIKb_bP56nvS5VVS-y-vYNWoUnn1mqw727eFXh-i_gE_a1QEm1huKYyxUA6n27joKt7vA_KlSdC7x1xoSiPJa2mwPfCnec3wk7RuQYhQy46cSlpBTB4i9CztVIVaGwBIJRP74xVszLcf8GezLaNNIfAPSrYP1FBgAavSHGevs6DX0scru1e5j6oKaSUuWksoWZ0dLCO3QPm2iHA2hf2sJx8xZE-kikSAoxBcuMjaPnJBsUpY_u_QMsW7_gB0UI9VegNsQvpch43FSNLyUQIGP_-258KhITuOXZSwIFUHvO9MrUNg0pFQ2df-EhFEwq54e2J0HabT8cVtpUs3rKbsO3R--hOnCrIZG8i8KB_TYz8P27wu72UyIR3ABMC6-UdTf6uSQ5m-yWlwDjAUcAe82cPT6jX8ireqgHC5lREmn2aSl1hPQ0rGdZxj20j9PVOBQE1z71Js7V4_HCmBK-Ux8Stc5ICuk7-1yEY5IpHVo7am8rP-fM1hq04rKghyXcv51h2bsM8SyqE2mHRl8gDA8xwFglpsoFTaH66R1i_gRA.BnmpVo_-mslZfUnAJZzEkw

Any log messages given by the failure

Nothing really stands out on the console.

Expected/desired behavior

Should show the edit profile page, similar to the original example.

Library version

"@azure/msal-browser": "~2.31.0",
"@azure/msal-react": "~1.4.10",

Browser and version

Chrome

Mention any other details that might be useful

Note: my user flows are called: B2C_1_susi and B2C_1_edit_profile and hence i changed them in the authConfig.js
My client ID of my SPA project is:
c1d2e539-4d27-45b9-b10d-163e44036e41
My client ID of my API project is:
d9552fa1-8ca5-4fdd-82c1-a54d8b956cdc
The Scope.All scope in the API project is:
https://patientportalb2cdev.onmicrosoft.com/d9552fa1-8ca5-4fdd-82c1-a54d8b956cdc/Scope.All
If want to just use the original read/write scopes to keep things simple (so don't have to modify the 3-Authorization-II\2-call-api-b2c code, minus the authConfig.js files), those are at:
https://patientportalb2cdev.onmicrosoft.com/d9552fa1-8ca5-4fdd-82c1-a54d8b956cdc/ToDoList.Read
https://patientportalb2cdev.onmicrosoft.com/d9552fa1-8ca5-4fdd-82c1-a54d8b956cdc/ToDoList.ReadWrite
The b2cPolicies.names are (which also get append onto the b2cPolicies.authorities urls like:
authority: 'https://patientportalb2cdev.b2clogin.com/patientportalb2cdev.onmicrosoft.com/B2C_1_susi'):
signUpSignIn: 'B2C_1_susi',
forgotPassword: 'B2C_1_passwordreset',
editProfile: 'B2C_1_edit_profile',

Note: I may delete some of these above details later after getting help here.

Azure Function usage method name: client.getSigningKey vs client.getSigningKeyAsync

Issue

Please provide us with the following information:

This issue is for the sample

    - [ ] 1-1) Sign-in with Azure AD
    - [ ] 1-2) Sign-in with Azure AD B2C
    - [ ] 2-1) Acquire a Token and call Microsoft Graph
    - [ ] 3-1) Protect and call a web API on Azure AD
    - [ ] 3-2) Protect and call a web API on Azure AD B2C
    - [ ] 4-1) Deploy to Azure Storage and App Service
    - [X ] 4-2) Deploy to Azure Static App Service
    - [ ] 5-1) Call a web API using App Roles
    - [ ] 5-2) Call a web API using Security Groups
    - [ ] 6-1) Call Microsoft Graph using on-behalf-of flow
    - [ ] 6-2) Call a web API using Proof of Possession tokens
    - [ ] 6-3) Call a web API using Conditional Access Auth Context

This issue is for a

    - [X ] bug report -> please search issues before submitting
    - [ ] question
    - [ ] feature request
    - [ ] documentation issue or request

Minimal steps to reproduce

1. Install the function only (don't need the client to reproduce).
2. Run the function
3. Can't find client.getSigningKeyAsync - but can find client.get.SigningKey
4. When I look at the docs for that library, it looks like the method name changed to remove the Async part.

• But please test this - I actually converted the function app to TS so the TSC build step caught the error before running.

Any log messages given by the failure

Expected/desired behavior

Library version

"jwks-rsa": "^2.0.5",

Browser and version

Chrome, Edge, Firefox, Safari?

Mention any other details that might be useful

Thanks! We'll be in touch soon.

The list under "My APIs" is blank in the "msal-react-spa" when trying to add permissions

Issue

Please provide us with the following information:

This issue is for the sample

    - [ ] 1-1) Sign-in with Azure AD
    - [ ] 1-2) Sign-in with Azure AD B2C
    - [ ] 2-1) Acquire a Token and call Microsoft Graph
    - [X] 3-1) Protect and call a web API on Azure AD
    - [ ] 3-2) Protect and call a web API on Azure AD B2C
    - [ ] 4-1) Deploy to Azure Storage and App Service
    - [ ] 4-2) Deploy to Azure Static App Service
    - [ ] 5-1) Call a web API using App Roles
    - [ ] 5-2) Call a web API using Security Groups
    - [ ] 6-1) Call Microsoft Graph using on-behalf-of flow
    - [ ] 6-3) Call a web API using Conditional Access Auth Context
    - [ ] 6-4) Sign-in with Hybrid SPA flow

This issue is for a

    - [ ] bug report -> please search issues before submitting
    - [ ] question
    - [ ] feature request
    - [X] documentation issue or request

Minimal steps to reproduce

You need only follow the instructions. Just don't use any existing registrations that you already created because you probably already own them. When trying to add a permission in Step 7 of "Register the client app (msal-react-spa)" . The list under "My APIs" is BLANK.

Any log messages given by the failure

n/a

Expected/desired behavior

When trying to add permissions to the "msal-react-spa", the "My APIs" list should contain "msal-node-api" application.

Library version

n/a

Browser and version

Chrome, Edge, Firefox, Safari? Chrome, but doesn't matter in this case.

Mention any other details that might be useful

The fix is to go to the "msal-node-api" application and add yourself as an owner of that api registration. Afterwards, in the "msal-react-spa" the list of "My APIs" will contain the "msal-node-api" application.

ClientAuthError: openid_config_error: Could not retrieve endpoints.

when trying B2C, I get following error. any idea?

https://github.com/Azure-Samples/ms-identity-javascript-react-tutorial/blob/main/1-Authentication/2-sign-in-b2c

How to renew auth token in Reactjs App with Azure AD B2C

Hi,

Am using Azure AD B2C authentication for my Reactjs App, I have integrated it the login and logout process is working fine and obtaining a AUTH token to secure web API's. The issue is that, how to renew the AUTH token based on Refresh token in react app with AD B2C.

6-AdvancedScenarios/4-sign-in-hybrid custom redirection and popup login window

I tried init solution and everything works!
Now I just want to edit some stuff:

• how to put popup window instead of redirection page? Preferably, without refreshing it, just to add authcode?
• when user logs in, as I mentioned above, I would like if not possible to stay on the same page to do readirect uri for example like this:
  localhost:3000/redirect?code=M.137.......

Is it doable? thanks

Sample app redirects to login even when logged in when using a b2c custom policy

Sample app redirects to login even when logged in if using a b2c custom policy

As opposed to when using a flow, if you configure the SPA to use a custom policy , the app doesn't correctly authenticate users. Users are redirected to https://{tenant-name}.b2clogin.com/{tenant-name}.onmicrosoft.com/oauth2/authresp?code={long-code}, which responds with a "400 - Bad Request", even after a successful login.

Please provide us with the following information:

This issue is for the sample

    - [ ] 1-1) Sign-in with Azure AD
    - [ ] 1-2) Sign-in with Azure AD B2C
    - [ ] 2-1) Acquire a Token and call Microsoft Graph
    - [ ] 3-1) Protect and call a web API on Azure AD
    - [x] 3-2) Protect and call a web API on Azure AD B2C
    - [ ] 4-1) Deploy to Azure Storage and App Service
    - [ ] 4-2) Deploy to Azure Static App Service
    - [ ] 5-1) Call a web API using App Roles
    - [ ] 5-2) Call a web API using Security Groups
    - [ ] 6-1) Call Microsoft Graph using on-behalf-of flow
    - [ ] 6-3) Call a web API using Conditional Access Auth Context
    - [ ] 6-4) Sign-in with Hybrid SPA flow

This issue is for a

    - [ ] bug report -> please search issues before submitting
    - [x] question
    - [ ] feature request
    - [x] documentation issue or request

Minimal steps to reproduce

Use the SignUpOrSignIn sample from https://github.com/Azure-Samples/active-directory-b2c-custom-policy-starterpack/tree/main/SocialAccounts

Any log messages given by the failure

Expected/desired behavior

After signing in, one should be able to manage todo tasks. That's what happens when using a user flow.

Library version

Browser and version

Chrome 107, Firefox 102 on Ubuntu

Mention any other details that might be useful

Thanks! We'll be in touch soon.

The scope 'api://GUID_of_the_server_app_reg/access_graph_on_behalf_of_user' is not registered to the client side app registration in Azure (msal-react-spa | API permissions).

Issue

Please provide us with the following information:

This issue is for the sample

    - [ ] 1-1) Sign-in with Azure AD
    - [ ] 1-2) Sign-in with Azure AD B2C
    - [ ] 2-1) Acquire a Token and call Microsoft Graph
    - [ ] 3-1) Protect and call a web API on Azure AD
    - [ ] 3-2) Protect and call a web API on Azure AD B2C
    - [ ] 4-1) Deploy to Azure Storage and App Service
    - [ ] 4-2) Deploy to Azure Static App Service
    - [ ] 5-1) Call a web API using App Roles
    - [ ] 5-2) Call a web API using Security Groups
    - [ x] 6-1) Call Microsoft Graph using on-behalf-of flow
    - [ ] 6-3) Call a web API using Conditional Access Auth Context
    - [ ] 6-4) Sign-in with Hybrid SPA flow

This issue is for a

    - [ x] bug report -> please search issues before submitting
    - [ ] question
    - [ ] feature request
    - [ ] documentation issue or request

Minimal steps to reproduce

1. Use the Configure.ps1 script from the AppCreationScripts folder:
   e.g. PS C:\Users\jonne\source\repos\ms-identity-javascript-react-tutorial\6-AdvancedScenarios\1-call-api-obo\AppCreationScripts> .\Configure.ps1 -TenantId "your-tenant-id"

2. The script will succeed but with some errors.

3. The client app registration is missing the scope of the server's app registration

4. When the client and the server are started and a user tries to log in, the use sign-in fails. There will be a notification of it in the msal logging messages. The user is not logged in and the application shows a front page that was similar before the failed login attempt.

Any log messages given by the failure

I'm not sure if this is related, but there was one failure after the script was activated:

You are installing the modules from an untrusted repository. If you trust this repository, change its
InstallationPolicy value by running the Set-PSRepository cmdlet. Are you sure you want to install the modules from
'PSGallery'?
[Y] Yes [A] Yes to All [N] No [L] No to All [S] Suspend [?] Help (default is "N"): A
Connecting to Microsoft Graph
Get-MgUser : Unsupported or invalid query filter clause specified for property 'userPrincipalName' of resource 'User'.
At C:\Users\user\source\repos\ms-identity-javascript-react-tutorial\6-AdvancedScenarios\1-call-api-obo\AppCreationScri
pts\Configure.ps1:251 char:57

• ... ser = Get-MgUser -Filter "UserPrincipalName eq '$($context.Account)'"

•                                                   ~~~~~~~~~~~~~~~~
  

  • CategoryInfo : InvalidOperation: ({ ConsistencyLe...ndProperty = }:<>f__AnonymousType628) [Get-MgUser _List1], RestException1
  • FullyQualifiedErrorId : Request_UnsupportedQuery,Microsoft.Graph.PowerShell.Cmdlets.GetMgUser_List1

And soon after that another one:

Creating the AAD application (msal-node-api)
Done creating the service application (msal-node-api)
Getting access from 'service' to 'Microsoft Graph'
Added 'Microsoft Graph' to the RRA list.
Granted permissions.
Successfully registered and configured that app registration for 'msal-node-api' at
https://portal.azure.com/#view/Microsoft_AAD_RegisteredApps/ApplicationMenuBlade/~/Overview/appId/22222222-ffff-1111-ZZZZ-XXXXXXXXXXXX/isMSAApp~/false
Creating the AAD application (msal-react-spa)
Done creating the client application (msal-react-spa)
Getting access from 'client' to 'service'
Added 'service' to the RRA list.
Update-MgApplication : Invalid value specified for property 'resourceAppId' of resource 'RequiredResourceAccess'.
At C:\Users\user\source\repos\ms-identity-javascript-react-tutorial\6-AdvancedScenarios\1-call-api-obo\AppCreationScri
pts\Configure.ps1:434 char:5

• Update-MgApplication -ApplicationId $currentAppObjectId -Required ...
  

• ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  

  • CategoryInfo : InvalidOperation: ({ ApplicationId...hApplication1 }:<>f__AnonymousType02) [Update-MgAp plication_UpdateExpanded1], RestException1
  • FullyQualifiedErrorId : Request_BadRequest,Microsoft.Graph.PowerShell.Cmdlets.UpdateMgApplication_UpdateExpanded
    1
    Granted permissions.
    Successfully registered and configured that app registration for 'msal-react-spa' at

Expected/desired behavior

The client is able to obtain an access token successfully and sign in to the client

Library version

Browser and version

Chrome, Edge, Firefox, Safari? Irrelevant

Mention any other details that might be useful

Thanks! We'll be in touch soon.

Configure AD APP redirect url with "api://xxxx" but page return AADSTS50011 ERROR.

Issue

I follow readme to register app and deploy react app on static web app.
The UI works, but when I click sign-in the popup window show the error message:
AADSTS50011: The reply URL specified in the request does not match the reply URLs configured for the application: 'xxxxxxx'.
Why redirect url set with "api://...", rather than "http://"?
Did I miss any step?

Thanks

This issue is for the sample

    - [ ] 1-1) Sign-in with Azure AD
    - [ ] 1-2) Sign-in with Azure AD B2C
    - [ ] 2-1) Acquire a Token and call Microsoft Graph
    - [ ] 3-1) Protect and call a web API on Azure AD
    - [ ] 3-2) Protect and call a web API on Azure AD B2C
    - [ ] 4-1) Deploy to Azure Storage and App Service
    - [x] 4-2) Deploy to Azure Static App Service
    - [ ] 5-1) Call a web API using App Roles
    - [ ] 5-2) Call a web API using Security Groups
    - [ ] 6-1) Call Microsoft Graph using on-behalf-of flow
    - [ ] 6-2) Call a web API using Proof of Possession tokens
    - [ ] 6-3) Call a web API using Conditional Access Auth Context

This issue is for a

    - [ ] bug report -> please search issues before submitting
    - [ ] question
    - [ ] feature request
    - [x] documentation issue or request

Minimal steps to reproduce

Any log messages given by the failure

Expected/desired behavior

Library version

Browser and version

Chrome, Edge, Firefox, Safari?

Mention any other details that might be useful

Thanks! We'll be in touch soon.

Error in sample documentation?

I am trying to setup a SinglePageApplication following this tutorial, taken from this page.
At point 7 I find:
Select the Add a permission button and then:
Ensure that the Microsoft APIs tab is selected.
In the Commonly used Microsoft APIs section, select Microsoft Graph
In the Delegated permissions section, select the User.Read in the list. Use the search box if necessary.
Select the Add permissions button at the bottom.

Can't do it:

How do I proceed? Skipping this permission I get 401 once I call the HelloApi.

"Pre-registered application" is either non-existent or inadequately documented

Issue

Please provide us with the following information:

This issue is for the sample

    - [ ] 1-1) Sign-in with Azure AD
    - [x] 1-2) Sign-in with Azure AD B2C
    - [ ] 2-1) Acquire a Token and call Microsoft Graph
    - [ ] 3-1) Protect and call a web API on Azure AD
    - [ ] 3-2) Protect and call a web API on Azure AD B2C
    - [ ] 4-1) Deploy to Azure Storage and App Service
    - [ ] 4-2) Deploy to Azure Static App Service
    - [ ] 5-1) Call a web API using App Roles
    - [ ] 5-2) Call a web API using Security Groups
    - [ ] 6-1) Call Microsoft Graph using on-behalf-of flow
    - [ ] 6-3) Call a web API using Conditional Access Auth Context
    - [ ] 6-4) Sign-in with Hybrid SPA flow

This issue is for a

    - [ ] bug report -> please search issues before submitting
    - [ ] question
    - [ ] feature request
    - [x] documentation issue or request

Minimal steps to reproduce

Follow the instructions in https://github.com/Azure-Samples/ms-identity-javascript-react-tutorial/blob/main/1-Authentication/2-sign-in-b2c/README.md to Step 3 and then, as suggested in the text, skip to https://github.com/Azure-Samples/ms-identity-javascript-react-tutorial/blob/main/1-Authentication/2-sign-in-b2c/README.md#step-4-running-the-sample .

In Step 3 the text "This sample comes with a pre-registered application for demo purposes. " appears but I can't find any indication of how this is meant to be running and when I follow the instructions within Step 4 under "Explore the sample" , specifically using "Sign-in using Popup" the popup launches but the text within the popup reads "Firefox can’t establish a connection to the server at localhost:6420".

Any log messages given by the failure

"Firefox can’t establish a connection to the server at localhost:6420".

Expected/desired behavior

One of the following

• The text at Step 3 should be removed because there is no such app or
• The location and use of the "pre-registered application" should be better documented within this README

Library version

Don't know where to find this information, I cloned the repo today the latest commit was #8ca0fb0

Browser and version

Firefox 111 (Firefox for Ubuntu)

Mention any other details that might be useful

Thanks! We'll be in touch soon.

How to allow the user to edit their profile or reset password in a popup?

Issue

MSAL 1.x had an editProfile() method that opened a popup and allowed the user to edit their profile. How can I recreate this in MSAL 2? I do not want to call the graph API directly unless required.

Please provide us with the following information:

This issue is for the sample

    - [ ] 1-1) Sign-in with Azure AD
    - [ ] 1-2) Sign-in with Azure AD B2C
    - [ ] 2-1) Acquire a Token and call Microsoft Graph
    - [ ] 3-1) Protect and call a web API on Azure AD
    - [ x] 3-2) Protect and call a web API on Azure AD B2C
    - [ ] 4-1) Deploy to Azure Storage and App Service
    - [ ] 4-2) Deploy to Azure Static App Service
    - [ ] 5-1) Call a web API using App Roles
    - [ ] 5-2) Call a web API using Security Groups
    - [ ] 6-1) Call Microsoft Graph using on-behalf-of flow
    - [ ] 6-2) Call a web API using Proof of Possession tokens
    - [ ] 6-3) Call a web API using Conditional Access Auth Context

This issue is for a

    - [ ] bug report -> please search issues before submitting
    - [x ] question
    - [ ] feature request
    - [ ] documentation issue or request

Minimal steps to reproduce

Any log messages given by the failure

Expected/desired behavior

Library version

Browser and version

Chrome, Edge, Firefox, Safari?

Mention any other details that might be useful

Thanks! We'll be in touch soon.

Error Clients must send a client_secret when redeeming a confidential grant.

INvalid request undefined - Error Clients must send a client_secret when redeeming a confidential grant.

Please provide us with the following information:

This issue is for the sample

I have configured the details and get the azure login page displayed but when I log in as a user i get an error returned Error Clients must send a client_secret when redeeming a confidential grant.

    - [ ] 1-1) Sign-in with Azure AD
    - [X] 1-2) Sign-in with Azure AD B2C
    - [ ] 2-1) Acquire a Token and call Microsoft Graph
    - [ ] 3-1) Protect and call a web API on Azure AD
    - [ ] 3-2) Protect and call a web API on Azure AD B2C
    - [ ] 4-1) Deploy to Azure Storage and App Service
    - [ ] 4-2) Deploy to Azure Static App Service
    - [ ] 5-1) Call a web API using App Roles
    - [ ] 5-2) Call a web API using Security Groups
    - [ ] 6-1) Call Microsoft Graph using on-behalf-of flow
    - [ ] 6-2) Call a web API using Proof of Possession tokens
    - [ ] 6-3) Call a web API using Conditional Access Auth Context

This issue is for a

    - [ ] bug report -> please search issues before submitting
    - [ ] question
    - [ ] feature request
    - [X] documentation issue or request

Minimal steps to reproduce

configure authConfig and run npm install and npm start

Any log messages given by the failure

×
invalid_request: undefined - [undefined]: AADB2C90079: Clients must send a client_secret when redeeming a confidential grant.
Correlation ID: 74c80c57-6761-4eff-8b8a-bf3b728117b0
Timestamp: 2022-02-11 15:13:03Z

• Correlation ID: undefined - Trace ID: undefined

Expected/desired behavior

Redirect after login

Library version

Browser and version

Chrome,Edge

Mention any other details that might be useful

Azure is setup correctly as a different app uses this login featuer but i am trying to configure this to work with a React Js App

Thanks! We'll be in touch soon.

In react-router 6 Switch has been removed and using Route would give a Runtime error as "Route child should be

Issue

Please provide us with the following information:

This issue is for the sample

    - [ ] 1-1) Sign-in with Azure AD
    - [ ] 1-2) Sign-in with Azure AD B2C
    - [ ] 2-1) Acquire a Token and call Microsoft Graph
    - [ ] 3-1) Protect and call a web API on Azure AD
    - [ ] 3-2) Protect and call a web API on Azure AD B2C
    - [ ] 4-1) Deploy to Azure Storage and App Service
    - [ ] 4-2) Deploy to Azure Static App Service
    - [x] 5-1) Call a web API using App Roles
    - [ ] 5-2) Call a web API using Security Groups
    - [ ] 6-1) Call Microsoft Graph using on-behalf-of flow
    - [ ] 6-2) Call a web API using Proof of Possession tokens
    - [ ] 6-3) Call a web API using Conditional Access Auth Context

This issue is for a

    - [ ] bug report -> please search issues before submitting
    - [ ] question
    - [ ] feature request
    - [ ] documentation issue or request

Minimal steps to reproduce

Upgrade react-router-dom to ^6.0.2

Any log messages given by the failure

Attempted import error: 'Switch' is not exported from 'react-router-dom'.

Expected/desired behavior

Working with Routes

Library version

Browser and version

Chrome, Edge, Firefox, Safari?

Mention any other details that might be useful

Thanks! We'll be in touch soon.

How to use the MSAL REACT SDK to login in multiple ways?

Issue

Please provide us with the following information:

This issue is for the sample

    - [ ] 1-1) Sign-in with Azure AD
    - [x] 1-2) Sign-in with Azure AD B2C
    - [ ] 2-1) Acquire a Token and call Microsoft Graph
    - [ ] 3-1) Protect and call a web API on Azure AD
    - [ ] 3-2) Protect and call a web API on Azure AD B2C
    - [ ] 4-1) Deploy to Azure Storage and App Service
    - [ ] 4-2) Deploy to Azure Static App Service
    - [ ] 5-1) Call a web API using App Roles
    - [ ] 5-2) Call a web API using Security Groups
    - [ ] 6-1) Call Microsoft Graph using on-behalf-of flow
    - [ ] 6-3) Call a web API using Conditional Access Auth Context
    - [ ] 6-4) Sign-in with Hybrid SPA flow

This issue is for a

    - [ ] bug report -> please search issues before submitting
    - [x] question
    - [ ] feature request
    - [ ] documentation issue or request

Expected/desired behavior

Hi team, we are following this sample code to implement B2C login: https://github.com/Azure-Samples/ms-identity-javascript-react-tutorial/tree/main/1-Authentication/2-sign-in-b2c/SPA

We want to implement multiple login methods in b2clogin page, such as SUSI_PASSWORD and SUSI_PASSCODE. We can click to switch the login method on the b2clogin page.

But for these two login methods, we have defined two authority URLs: https://xxxx.b2clogin.cn/xxxx/B2C_1A_AccountLink_SUSI_PASSWORD and https://xxxx.b2clogin.cn/xxxx/B2C_1A_AccountLink_SUSI_PASSCODE.

But when jumping to xxxx.b2clogin.cn through sample code, we can only carry one authority URL, which will cause the verification to fail after we switch the login method on the xxxx.b2clogin.cn page.
For example: I defined the following loginrequest in your sample code:

export const loginRequest = {
     scopes: ['https://xxxx.partner.xxxx.cn/xxxx/user_impersonation'],
     authority: 'https://xxxx.b2clogin.cn/xxxx/B2C_1A_AccountLink_SUSI_PASSWORD',
};

But after jumping to the xxxx.b2clogin.cn page, I want to switch to the SUSI_PASSCODE login method, but doing so will cause us to still log in with the authority of SUSI_PASSWORD, which will cause the failure to get the token.

How should I achieve our requirements? Is it because we don't currently support this kind of authentication? Should I modify the definition of my policy? Is there any other way to achieve this without modifying the definition of policy?

Any log messages given by the failure

{
"error": "invalid_grant",
"error_description": "AADB2C90088: The provided grant has not been issued for this endpoint. Actual Value : B2C_1A_AccountLink_SUSI_PASSWORD and Expected Value : B2C_1A_ACCOUNTLINK_SUSI_PASSCODE\r\nCorrelation ID: 1d9c901a-85bf-4060-ac8a-46cc435a5a94\r\nTimestamp: 2023-08-09 04:01:56Z\r\n"
}

Library version

latest
"@azure/msal-browser": "~2.38.1",
"@azure/msal-react": "~1.5.10",

Browser and version

Edge

Thanks! We'll be in touch soon.

Error : BrowserAuthError: pkce_not_created

Issue

Please provide us with the following information:

This issue is for the sample

    - [ ] 1-1) Sign-in with Azure AD
    - [ ] 1-2) Sign-in with Azure AD B2C
    - [ ] 2-1) Acquire a Token and call Microsoft Graph
    - [ ] 3-1) Protect and call a web API on Azure AD
    - [x ] 3-2) Protect and call a web API on Azure AD B2C
    - [ ] 4-1) Deploy to Azure Storage and App Service
    - [ ] 4-2) Deploy to Azure Static App Service
    - [ ] 5-1) Call a web API using App Roles
    - [ ] 5-2) Call a web API using Security Groups
    - [ ] 6-1) Call Microsoft Graph using on-behalf-of flow
    - [ ] 6-3) Call a web API using Conditional Access Auth Context
    - [ ] 6-4) Sign-in with Hybrid SPA flow

This issue is for a

    - [ ] bug report -> please search issues before submitting
    - [x ] question
    - [ ] feature request
    - [ ] documentation issue or request

Minimal steps to reproduce

I followed the instructions as per the scenario 3-1 - https://github.com/Azure-Samples/ms-identity-javascript-react-tutorial/tree/main/3-Authorization-II/1-call-api
React App and API is running on Ubuntu server
I am trying to call the React app remotely via browser
When I get to step Explore the sample I get below error

BrowserAuthError: pkce_not_created: The PKCE code challenge and verifier could not be generated. Detail:TypeError: Cannot read properties of undefined (reading 'digest')
at BrowserAuthError.AuthError [as constructor] (AuthError.ts:49:1)
at new BrowserAuthError (BrowserAuthError.ts:195:1)
at BrowserAuthError.createPkceNotGeneratedError (BrowserAuthError.ts:207:1)
at PkceGenerator. (PkceGenerator.ts:67:1)
at step (claimUtils.js:206:1)
at Object.throw (claimUtils.js:206:1)
at rejected (claimUtils.js:206:1)

Any log messages given by the failure

BrowserAuthError: pkce_not_created: The PKCE code challenge and verifier could not be generated. Detail:TypeError: Cannot read properties of undefined (reading 'digest')
at BrowserAuthError.AuthError [as constructor] (AuthError.ts:49:1)
at new BrowserAuthError (BrowserAuthError.ts:195:1)
at BrowserAuthError.createPkceNotGeneratedError (BrowserAuthError.ts:207:1)
at PkceGenerator. (PkceGenerator.ts:67:1)
at step (claimUtils.js:206:1)
at Object.throw (claimUtils.js:206:1)
at rejected (claimUtils.js:206:1)

Expected/desired behavior

I expect to be signed in and see the Todo List page:

Library version

Browser and version

Chrome 115.0.5790.110 (Official Build) (64-bit)

Mention any other details that might be useful

React app and API is running on Linux Ubuntu server
I am trying to access launch page remotely via Chrome browser
I have configured following redirect URIs:

Thanks! We'll be in touch soon.

Deleting multiple records that have the same contextAuthId

Issue

Please provide us with the following information: When deleting an auth context item, we delete based on the contextAuthId. We don't consider the operation, so it deletes multiple records with the same contextAuthId, but with a different operation.

This issue is for the sample

    - [ ] 1-1) Sign-in with Azure AD
    - [ ] 1-2) Sign-in with Azure AD B2C
    - [ ] 2-1) Acquire a Token and call Microsoft Graph
    - [ ] 3-1) Protect and call a web API on Azure AD
    - [ ] 3-2) Protect and call a web API on Azure AD B2C
    - [ ] 4-1) Deploy to Azure Storage and App Service
    - [ ] 4-2) Deploy to Azure Static App Service
    - [ ] 5-1) Call a web API using App Roles
    - [ ] 5-2) Call a web API using Security Groups
    - [ ] 6-1) Call Microsoft Graph using on-behalf-of flow
    - [ ] 6-2) Call a web API using Proof of Possession tokens
    - [x] 6-3) Call a web API using Conditional Access Auth Context

This issue is for a

    - [x] bug report -> please search issues before submitting
    - [ ] question
    - [ ] feature request
    - [ ] documentation issue or request

Minimal steps to reproduce

sign in as an admin --> click on fetch or create --> create a context item --> recreate the context item with a different operation
--> delete one of the context item.

Any log messages given by the failure

No

Expected/desired behavior

One record is deleted

Library version

Browser and version

Chrome, Edge, Firefox, Safari?

Mention any other details that might be useful

chrome

Thanks! We'll be in touch soon.

PoP Authentication Issues ( Cannot generate a POP jwt if the token_claims are not populated ) - not working

Issue

Please provide us with the following information:

This issue is for the sample

    - [ ] 1-1) Sign-in with Azure AD
    - [ ] 1-2) Sign-in with Azure AD B2C
    - [ ] 2-1) Acquire a Token and call Microsoft Graph
    - [ ] 3-1) Protect and call a web API on Azure AD
    - [ ] 3-2) Protect and call a web API on Azure AD B2C
    - [ ] 4-1) Deploy to Azure Storage and App Service
    - [ ] 4-2) Deploy to Azure Static App Service
    - [ ] 5-1) Call a web API using App Roles
    - [ ] 5-2) Call a web API using Security Groups
    - [ ] 6-1) Call Microsoft Graph using on-behalf-of flow
    - [ ] 6-2) Call a web API using Proof of Possession tokens
    - [ ] 6-3) Call a web API using Conditional Access Auth Context

This issue is for a

6-2) call a web API using PoP tokens

    - [ ] bug report -> please search issues before submitting
    - [ ] question
    - [ ] feature request
    - [ ] documentation issue or request

Minimal steps to reproduce

I have changed the authconfig files to my azure client id and tenant id

Any log messages given by the failure

{"eventType":"msal:loginFailure","interactionType":"redirect","payload":null,"error":{"errorCode":"token_claims_cnf_required_for_signedjwt","errorMessage":"Cannot generate a POP jwt if the token_claims are not populated","subError":"","name":"ClientAuthError"},"timestamp":1648618526405}

Expected/desired behavior

Token by the azure/ redirect to the webpage authenticating my account and add the tasks as mentioned

Library version

Browser and version

Chrome, Edge, Firefox, Safari?

Chrome - 98.0 and firefox 99

Mention any other details that might be useful

I got the 1 working (Recat SPA Authentication successfully)

getting "Status Code: 401 Unauthorized" from /hello

Issue

getting "Status Code: 401 Unauthorized" from /hello in Chrome
In the API console, i see:

{"name":"AzureAD: Bearer Strategy","hostname":"US-LT-10272","pid":1
5812,"level":30,"msg":"authentication failed due to: token is not found","time":"2022-08-23T23:57:02.462Z","v":0}
GET /hello 401 1.355 ms - -

I do see right before /hello is called, i see /token is called and it does return a token like:

{
	"id_token": "eyJ0eX....",
	"token_type": "Bearer",
	"not_before": 1661293983,
	"client_info": "eyJ1aW...",
	"scope": "",
	"refresh_token": "eyJraW...",
	"refresh_token_expires_in": 86400
}

So why isn't it passing it along to /hello?

like /hello has a authorization token like so:
authorization: Bearer
and im guessing it should have a value like:
authorization: Bearer eyJ0eX

Believe I setup everything according to spec in the Azure AD B2C settings for the App/Registration/UserFlows, and configured the config.js and authConfig.js with the simple updates mentioned in the tutorial as well.

Please provide us with the following information:

This issue is for the sample

    - [ ] 1-1) Sign-in with Azure AD
    - [ ] 1-2) Sign-in with Azure AD B2C
    - [ ] 2-1) Acquire a Token and call Microsoft Graph
    - [ ] 3-1) Protect and call a web API on Azure AD
    - [x] 3-2) Protect and call a web API on Azure AD B2C
    - [ ] 4-1) Deploy to Azure Storage and App Service
    - [ ] 4-2) Deploy to Azure Static App Service
    - [ ] 5-1) Call a web API using App Roles
    - [ ] 5-2) Call a web API using Security Groups
    - [ ] 6-1) Call Microsoft Graph using on-behalf-of flow
    - [ ] 6-2) Call a web API using Proof of Possession tokens
    - [ ] 6-3) Call a web API using Conditional Access Auth Context

This issue is for a

    - [x] bug report -> please search issues before submitting
    - [ ] question
    - [ ] feature request
    - [ ] documentation issue or request

Minimal steps to reproduce

Any log messages given by the failure

Request URL: http://localhost:5000/hello, Request Method: GET, Status Code: 401 Unauthorized

Expected/desired behavior

Request URL: http://localhost:5000/hello, Request Method: GET, Status Code: 200

Browser and version

Chrome 104.0.5112.81 (Official Build) (32-bit)
Node v14.18.0

Thanks! We'll be in touch soon.

401 when calling api/todolist

Hi @salman90
Alex again
Tried 1-call-api sample, went by PowerShell script, all worked well (we tested it right)
But when is trying to go to ToDo list, it fails with 401.
Can you please try to run the sample from scratch on you machine and let me know if it is working?

Thanks in advance!
Alex

What is the preferred strategy for alternative implementations of PoP/passport?

An issue may not be the best way to go about finding this out, but the documentation leads to endless circles of potential options. The landing page for this sample clearly states:
This sample corresponds to an implementation of PoP without server nonce that is no longer recommended. If you start new projects don’t use this sample. The recommended approach will be documented in the future.

My problem is, there's no other recommendation listed. Any guidance would be greatly appreciated!

Require approval

Issue

Please provide us with the following information:

This issue is for the sample

    - [x] 1-1) Sign-in with Azure AD
    - [ ] 1-2) Sign-in with Azure AD B2C
    - [ ] 2-1) Acquire a Token and call Microsoft Graph
    - [ ] 3-1) Protect and call a web API on Azure AD
    - [ ] 3-2) Protect and call a web API on Azure AD B2C
    - [ ] 4-1) Deploy to Azure Storage and App Service
    - [ ] 4-2) Deploy to Azure Static App Service
    - [ ] 5-1) Call a web API using App Roles
    - [ ] 5-2) Call a web API using Security Groups
    - [ ] 6-1) Call Microsoft Graph using on-behalf-of flow
    - [ ] 6-3) Call a web API using Conditional Access Auth Context
    - [ ] 6-4) Sign-in with Hybrid SPA flow

This issue is for a

    - [x] bug report -> please search issues before submitting
    - [ ] question
    - [ ] feature request
    - [ ] documentation issue or request

Minimal steps to reproduce

Follow the tutorial on GitHub and attempt to sign in

Any log messages given by the failure

None

Expected/desired behavior

Should allow the user to sign in

Library version

Latest

Browser and version

Chrome, Edge, Firefox, Safari? Chrome

Mention any other details that might be useful

The app registration was NOT created using an admin account.

Thanks! We'll be in touch soon.

Incorrect topology diagram

Issue

• the topology diagram is misleading (api endpoint is /hello)
• missing the sample screenshot

This issue is for the sample

    - [ ] 1-1) Sign-in with Azure AD
    - [ ] 1-2) Sign-in with Azure AD B2C
    - [ ] 2-1) Acquire a Token and call Microsoft Graph
    - [ ] 3-1) Protect and call a web API on Azure AD
    - [ ] 3-2) Protect and call a web API on Azure AD B2C
    - [ x ] 4-1) Deploy to Azure Storage and App Service
    - [ ] 4-2) Deploy to Azure Static App Service
    - [ ] 5-1) Call a web API using App Roles
    - [ ] 5-2) Call a web API using Security Groups
    - [ ] 6-1) Call Microsoft Graph using on-behalf-of flow
    - [ ] 6-2) Call a web API using Proof of Possession tokens
    - [ ] 6-3) Call a web API using Conditional Access Auth Context

This issue is for a

    - [ ] bug report -> please search issues before submitting
    - [ ] question
    - [ ] feature request
    - [ x ] documentation issue or request

401 Error in /hello API when I click on HelloAPI tab

@derisen
I am getting access token and also able to run GraphAPI but I /hello API not executed and thought the 401 error with "Unauthorized" message in the network tab

I have given the API permission like User.Read and also try without that permission but although I am getting the same error (401)

How can I solve this issue?

Thanks!

After Edit profile Auth data not updated until login again in ms-identity-javascript-react-tutorial project

After Edit profile Auth data not updated until login again in ms-identity-javascript-react-tutorial project

ERR_PACKAGE_PATH_NOT_EXPORTED when running `npm start`

Issue

I get the ERR_PACKAGE_PATH_NOT_EXPORTED if I try to npm start the sample 1-Authentication/2-sign-in-b2c.

## This issue is for the sample


```console
    - [ ] 1-1) Sign-in with Azure AD
    - [x] 1-2) Sign-in with Azure AD B2C
    - [ ] 2-1) Acquire a Token and call Microsoft Graph
    - [ ] 3-1) Protect and call a web API on Azure AD
    - [ ] 3-2) Protect and call a web API on Azure AD B2C
    - [ ] 4-1) Deploy to Azure Storage and App Service
    - [ ] 4-2) Deploy to Azure Static App Service
    - [ ] 5-1) Call a web API using App Roles
    - [ ] 5-2) Call a web API using Security Groups
    - [ ] 6-1) Call Microsoft Graph using on-behalf-of flow
    - [ ] 6-2) Call a web API using Proof of Possession tokens
    - [ ] 6-3) Call a web API using Conditional Access Auth Context

This issue is for a

    - [x] bug report -> please search issues before submitting
    - [ ] question
    - [ ] feature request
    - [ ] documentation issue or request

Minimal steps to reproduce

npm install
npm start

Any log messages given by the failure

$ npm install
npm WARN old lockfile 
npm WARN old lockfile The package-lock.json file was created with an old version of npm,
npm WARN old lockfile so supplemental metadata must be fetched from the registry.
npm WARN old lockfile 
npm WARN old lockfile This is a one-time fix-up, please be patient...
npm WARN old lockfile 

changed 1 package, and audited 1927 packages in 3m

149 packages are looking for funding
  run `npm fund` for details

29 vulnerabilities (2 moderate, 20 high, 7 critical)

To address issues that do not require attention, run:
  npm audit fix

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

$ npm start

> [email protected] start
> react-scripts start

node:internal/modules/cjs/loader:488
      throw e;
      ^

Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './2020/CreateDataProperty' is not defined by "exports" in /home/anna/Documents/uni/sem3/prakt1/ms-identity-javascript-react-tutorial/1-Authentication/2-sign-in-b2c/SPA/node_modules/es-abstract/package.json
    at new NodeError (node:internal/errors:372:5)
    at throwExportsNotFound (node:internal/modules/esm/resolve:440:9)
    at packageExportsResolve (node:internal/modules/esm/resolve:719:3)
    at resolveExports (node:internal/modules/cjs/loader:482:36)
    at Function.Module._findPath (node:internal/modules/cjs/loader:522:31)
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:919:27)
    at Function.Module._load (node:internal/modules/cjs/loader:778:27)
    at Module.require (node:internal/modules/cjs/loader:999:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.<anonymous> (/home/anna/Documents/uni/sem3/prakt1/ms-identity-javascript-react-tutorial/1-Authentication/2-sign-in-b2c/SPA/node_modules/object.getownpropertydescriptors/implementation.js:3:26) {
  code: 'ERR_PACKAGE_PATH_NOT_EXPORTED'
}

Node.js v17.9.0

Expected/desired behavior

The application starts with no errors.

Library version

$ npm version
{
  'ms-identity-react-c1s2': '0.1.0',
  npm: '8.6.0',
  node: '17.9.0',
  v8: '9.6.180.15-node.16',
  uv: '1.43.0',
  zlib: '1.2.11',
  brotli: '1.0.9',
  ares: '1.18.1',
  modules: '102',
  nghttp2: '1.47.0',
  napi: '8',
  llhttp: '6.0.4',
  openssl: '3.0.2+quic',
  cldr: '40.0',
  icu: '70.1',
  tz: '2021a3',
  unicode: '14.0',
  ngtcp2: '0.1.0-DEV',
  nghttp3: '0.1.0-DEV'
}

The last commit:

commit 83f50a661c3600c199f8c5c98e3dc37b5093b9e2 (HEAD -> main, origin/main, origin/HEAD)
Merge: f5ecd70 033de6c
Author: Doğan Erişen <[email protected]>
Date:   Mon Jun 6 09:54:07 2022 -0700

    Merge pull request #97 from Azure-Samples/dependabot/npm_and_yarn/6-AdvancedScenarios/3-call-api-acrs/SPA/eventsource-1.1.1
    
    Bump eventsource from 1.1.0 to 1.1.1 in /6-AdvancedScenarios/3-call-api-acrs/SPA

Browser and version

n/a

Mention any other details that might be useful

Thanks! We'll be in touch soon.

Does msal-react support to sign-in users against private ADFS?

Issue

Please provide us with the following information:

Does msal-react support to sign-in users against private ADFS?

I have to develop a react web app that connects to my company ADFS for user sign-in
ADFS team could not support me on how to communicate between my react app and ADFS.

So I would like to know that can I apply this example code and msal-react library to ADFS?
Or there is another method for ADFS. Please suggest me.

Thank you.

This issue is for the sample

    - [ /] 1-1) Sign-in with Azure AD
    - [ ] 1-2) Sign-in with Azure AD B2C
    - [ ] 2-1) Acquire a Token and call Microsoft Graph
    - [ ] 3-1) Protect and call a web API on Azure AD
    - [ ] 3-2) Protect and call a web API on Azure AD B2C
    - [ ] 4-1) Deploy to Azure Storage and App Service
    - [ ] 4-2) Deploy to Azure Static App Service
    - [ ] 5-1) Call a web API using App Roles
    - [ ] 5-2) Call a web API using Security Groups
    - [ ] 6-1) Call Microsoft Graph using on-behalf-of flow
    - [ ] 6-2) Call a web API using Proof of Possession tokens
    - [ ] 6-3) Call a web API using Conditional Access Auth Context

This issue is for a

    - [ ] bug report -> please search issues before submitting
    - [ /] question
    - [ ] feature request
    - [ ] documentation issue or request

Minimal steps to reproduce

Any log messages given by the failure

Expected/desired behavior

Library version

Browser and version

Chrome, Edge, Firefox, Safari?

Mention any other details that might be useful

Thanks! We'll be in touch soon.

Closing the popup menu after clicking sign in button causes the application to crash in SPA

Issue

Please provide us with the following information: Closing the popup menu after clicking sign in button causes the application to crash in SAP.

This issue is for the sample

    - [] 1-1) Sign-in with Azure AD
    - [ ] 1-2) Sign-in with Azure AD B2C
    - [ ] 2-1) Acquire a Token and call Microsoft Graph
    - [ ] 3-1) Protect and call a web API on Azure AD
    - [ ] 3-2) Protect and call a web API on Azure AD B2C
    - [ ] 4-1) Deploy to Azure Storage and App Service
    - [ ] 4-2) Deploy to Azure Static App Service
    - [ ] 5-1) Call a web API using App Roles
    - [ ] 5-2) Call a web API using Security Groups
    - [ ] 6-1) Call Microsoft Graph using on-behalf-of flow
    - [ ] 6-2) Call a web API using Proof of Possession tokens
    - [x] 6-3) Call a web API using Conditional Access Auth Context

This issue is for a

    - [x] bug report -> please search issues before submitting
    - [ ] question
    - [ ] feature request
    - [ ] documentation issue or request

Minimal steps to reproduce

Closing the popup menu when clicking sign in will cause the application to crash

Any log messages given by the failure

No

Expected/desired behavior

return to original home page

Library version

Browser and version

Chrome, Edge, Firefox, Safari?
Chrome

Mention any other details that might be useful

Thanks! We'll be in touch soon.

MSAL React / Azure AD B2C AuthProvider sample request

Can you please provide us with a sample that demonstrates how to create an authentication provider using MSAL React & Create React App?

I managed to find the following resources:

https://medium.com/ascentic-technology/authentication-with-msal-js-2fe281098038 (good starting point but uses older MSAL libraries + uses class components. So it's a little bit outdated. https://gist.github.com/ayeshnipun/77bae1b89dc1f69c8c6d4e44d140bd33#file-auth-provider-js (Authentication provider)

I also found this one:

https://github.com/microsoftgraph/msgraph-sample-reactspa

This one kind of demonstrates what I'm after (https://github.com/microsoftgraph/msgraph-sample-reactspa/blob/main/graph-tutorial/src/AppContext.tsx) but it also adds several other concepts. It would be nice to have like a sample SPA in this repo with only login and logout using a well-architected authentication provider pattern/solution.

I think this would be a great idea for an article on Microsoft docs and in this repo.

What I would like to see in that article/sample SPA:

• The SPA should be based on Create React App
• The react app should integrate with Azure AD B2C
• The sample should contain a well-structured AuthProvider react function component for the most common scenarios (log in, log out etc)
• The UI should have protected routes and non-protected routes (I'm thinking a simple react router dashboard type of sample with a spinner/loader/splashscreen, login, logout, registration, reset password etc)
• The AuthProvider react component should handle the authenticated / unauthenticated user
• If authenticated you should be able to see the protected routes
• If not authenticated you should not be able to see the protected routes
• Show how to do login and logout with both redirect and pop-up (like in the other samples in this repo)
• Both a .js and .tsx version of the sample

Again it would be nice to see this type of info somewhere and that you could use as a starting point.

Also, I'm curious about whether you know of any other resources where I can read more about how to build your own authentication provider using MSAL React + Azure AD B2C?

How to authenticate from server side?

I have a react app with a ASP.NET server. The server just sends the static files to the client, but there are two versions of the client. I want to switch which version the client gets based off of whether the user is authenticated or not.

One way I could implement this is by doing authentication on the client side, then passing the authentication token to the server, which determines which static files to return.

Another way I could implement this is by doing authentication server side, and add a controller with routes to sign in / out. This way would be easier for me to implement, because then when the user calls any other route, the authentication is injected.

However, I can't find any examples on how to implement either way! All the samples from here show server side authentication, but the client is written in cshtml, and the webapi examples are missing routes to login / out.

All the samples here are missing the ASP.NET Backend.
Does anyone know the authentication flow I am looking for, or where to find an example of it?

Export module for App.jsx is throwing TypeError: Cannot assign to read only property 'exports' of object '#<Object>'

Issue

Please provide us with the following information:

This issue is for the sample

    - [ ] 1-1) Sign-in with Azure AD
    - [ ] 1-2) Sign-in with Azure AD B2C
    - [ x ] 2-1) Acquire a Token and call Microsoft Graph
    - [ ] 3-1) Protect and call a web API on Azure AD
    - [ ] 3-2) Protect and call a web API on Azure AD B2C
    - [ ] 4-1) Deploy to Azure Storage and App Service
    - [ ] 4-2) Deploy to Azure Static App Service
    - [ ] 5-1) Call a web API using App Roles
    - [ ] 5-2) Call a web API using Security Groups
    - [ ] 6-1) Call Microsoft Graph using on-behalf-of flow
    - [ ] 6-2) Call a web API using Proof of Possession tokens
    - [ ] 6-3) Call a web API using Conditional Access Auth Context

This issue is for a

    - [ x ] bug report -> please search issues before submitting
    - [ ] question
    - [ ] feature request
    - [ ] documentation issue or request

Minimal steps to reproduce

When running the sample after following described steps here

Any log messages given by the failure

After running the sample via npm start command, the following error will be thrown -> TypeError: Cannot assign to read only property 'exports' of object '#'

Expected/desired behavior

To run the sample successfully.

Library version

"dependencies": {
"@azure/msal-browser": "^2.16.0",
"@azure/msal-react": "^1.0.1",
"@microsoft/microsoft-graph-client": "^2.2.1",
"bootstrap": "^4.5.3",
"jquery": "^3.5.1",
"popper.js": "^1.16.1",
"react": "^17.0.0",
"react-bootstrap": "^1.3.0",
"react-dom": "^17.0.0",
"react-router-dom": "^5.2.0"
},
"devDependencies": {
"react-scripts": "4.0.1"
},

Browser and version

Chrome, Edge, Firefox, Safari?
All

Mention any other details that might be useful

The above sample will work as expected when changing the App.jsx export module from module.exports = App to this export default App;

Thanks! We'll be in touch soon.

ID token roles are not displayed

Issue

Am I right with the assumption that the ID token's roles claim is used for controlling display at the 5-1 sample? If so, what ensures that the ID token contains the roles and not only the access token?

Please provide us with the following information:

This issue is for the sample

    - [ ] 1-1) Sign-in with Azure AD
    - [ ] 1-2) Sign-in with Azure AD B2C
    - [ ] 2-1) Acquire a Token and call Microsoft Graph
    - [ ] 3-1) Protect and call a web API on Azure AD
    - [ ] 3-2) Protect and call a web API on Azure AD B2C
    - [ ] 4-1) Deploy to Azure Storage and App Service
    - [ ] 4-2) Deploy to Azure Static App Service
    - [x] 5-1) Call a web API using App Roles
    - [ ] 5-2) Call a web API using Security Groups
    - [ ] 6-1) Call Microsoft Graph using on-behalf-of flow
    - [ ] 6-3) Call a web API using Conditional Access Auth Context
    - [ ] 6-4) Sign-in with Hybrid SPA flow

This issue is for a

    - [ ] bug report -> please search issues before submitting
    - [x] question
    - [ ] feature request
    - [ ] documentation issue or request

Minimal steps to reproduce

Run the ps1 app registration script with an outlook.com account, run the application and sign in. Observe no "roles"-related row appear in the table.

Any log messages given by the failure

Nothing.

Expected/desired behavior

The roles claim should appear in the ID token - not just in the access token as per

ms-identity-javascript-react-tutorial/5-AccessControl/1-call-api-roles/SPA/src/components/RouteGuard.jsx

Line 27 in c52878a

if (currentAccount && currentAccount.idTokenClaims['roles']) {

Library version

Browser and version

Edge 110.0.1587.56

Mention any other details that might be useful

Also tried with a company tenant, the same. The difference is that the app registration there were manual.

Thanks! We'll be in touch soon.

AADSTS65001 for 6-1 Call-API-OBO , profile page doesn't load , gets a 401

Issue

Please provide us with the following information:

This issue is for the sample

    - [ ] 1-1) Sign-in with Azure AD
    - [ ] 1-2) Sign-in with Azure AD B2C
    - [ ] 2-1) Acquire a Token and call Microsoft Graph
    - [ ] 3-1) Protect and call a web API on Azure AD
    - [ ] 3-2) Protect and call a web API on Azure AD B2C
    - [ ] 4-1) Deploy to Azure Storage and App Service
    - [ ] 4-2) Deploy to Azure Static App Service
    - [ ] 5-1) Call a web API using App Roles
    - [ ] 5-2) Call a web API using Security Groups
    - [ x] 6-1) Call Microsoft Graph using on-behalf-of flow
    - [ ] 6-3) Call a web API using Conditional Access Auth Context
    - [ ] 6-4) Sign-in with Hybrid SPA flow

    - [x ] bug report -> please search issues before submitting
    - [ ] question
    - [ ] feature request
    - [ ] documentation issue or request

Followed all steps. signed in. then tried clicking on /profile. the data for the profile endpoint does not load and I get from http://localhost:5000/api/profile

{
"errorCode": "invalid_grant",
"errorMessage": "AADSTS65001: The user or administrator has not consented to use the application with ID '' named 'msal-node-api'. Send an interactive authorization request for this user and resource.\r\nTrace ID: 09243ee0-fd4b-4b3a-99ef-2a4110781401\r\nCorrelation ID: 5cbbd30a-dfbf-4970-8e12-6a8a0369c3d9\r\nTimestamp: 2023-08-23 23:08:05Z",
"subError": "consent_required",
"name": "InteractionRequiredAuthError",
"timestamp": "2023-08-23 23:08:05Z",
"traceId": "09243ee0-fd4b-4b3a-99ef-2a4110781401",
"correlationId": "5cbbd30a-dfbf-4970-8e12-6a8a0369c3d9",
"claims": ""
}

Browser and version

Edge

Mention any other details that might be useful

Thanks! We'll be in touch soon.

AADSTS65001: The user or administrator has not consented to use the application with ID

I build a React SPA and a C# WebAPI, both added MSAL library. The frontend works fine, I am able to log in and out. When a call to the API is done I get a 400 (BadRequest) from the AAD with the following trace:

FetchClient.js:78 POST https://login.microsoftonline.com/XXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXX/oauth2/v2.0/token 400 (Bad Request)
Uncaught (in promise) InteractionRequiredAuthError: invalid_grant: AADSTS65001: The user or administrator has not consented to use the application with ID 'XXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXX' named 'XXXXXXX'. Send an interactive authorization request for this user and resource.
Trace ID: a1d60f68-2c82-475a-8d98-290fdec8a400
Correlation ID: 03324b45-b584-4df7-a41d-e46e2f4f8d12
Timestamp: 2021-07-02 05:50:12Z
at InteractionRequiredAuthError.AuthError [as constructor] (AuthError.js:27)
at InteractionRequiredAuthError.ServerError [as constructor] (ServerError.js:16)
at new InteractionRequiredAuthError (InteractionRequiredAuthError.js:31)
at ResponseHandler.validateTokenResponse (ResponseHandler.js:71)
at RefreshTokenClient. (RefreshTokenClient.js:41)
at step (_tslib.js:75)
at Object.next (_tslib.js:56)
at fulfilled (_tslib.js:46)

I added the access_as_user permission as the tutorial describes, it has been granted by the admin as well:

I tried to create a new app and add the permissions, it doesn't require the admin consent at all...

Getting "Cross-origin token redemption is permitted only for the 'Single-Page Application' client-type" error while trying to run the "1-Authentication\1-sign-in\SPA" app after following the exact same steps recommended in readme

Issue

Please provide us with the following information:

This issue is for the sample

    - [x] 1-1) Sign-in with Azure AD
    - [ ] 1-2) Sign-in with Azure AD B2C
    - [ ] 2-1) Acquire a Token and call Microsoft Graph
    - [ ] 3-1) Protect and call a web API on Azure AD
    - [ ] 3-2) Protect and call a web API on Azure AD B2C
    - [ ] 4-1) Deploy to Azure Storage and App Service
    - [ ] 4-2) Deploy to Azure Static App Service
    - [ ] 5-1) Call a web API using App Roles
    - [ ] 5-2) Call a web API using Security Groups
    - [ ] 6-1) Call Microsoft Graph using on-behalf-of flow
    - [ ] 6-3) Call a web API using Conditional Access Auth Context
    - [ ] 6-4) Sign-in with Hybrid SPA flow

This issue is for a

    - [ ] bug report -> please search issues before submitting
    - [x] question
    - [ ] feature request
    - [ ] documentation issue or request

Minimal steps to reproduce

npm start after npm install from 1-Authentication\1-sign-in\SPA folder. Then once the app is running in browser tab. Click sign in and use either of Pop Up based or Redirect based to see the error in console output window. It can't login too. These are no other visible failures.

Any log messages given by the failure

No error while running the app. But observed an error in Google Chrome console.
AADSTS9002326: Cross-origin token redemption is permitted only for the 'Single-Page Application' client-type. Request origin: 'http://localhost:3000'.
Trace ID: 36bae855-e9d3-409f-b892-6f07a12d2200
Correlation ID: 51074ca4-ea25-4783-9881-b2e760d6e11d
Timestamp: 2023-01-27 21:28:46Z - Correlation ID: 51074ca4-ea25-4783-9881-b2e760d6e11d - Trace ID: 36bae855-e9d3-409f-b892-6f07a12d2200
at ServerError.AuthError [as constructor] (AuthError.ts:49:1)
at new ServerError (ServerError.ts:13:1)
at ResponseHandler.validateTokenResponse (ResponseHandler.ts:99:1)
at AuthorizationCodeClient. (AuthorizationCodeClient.ts:83:1)
at step (MathUtils.ts:23:1)
at Object.next (MathUtils.ts:23:1)
at fulfilled (MathUtils.ts:23:1)

Expected/desired behavior

Should be able to login using AAD

Library version

Browser and version

Chrome 109.0.5414.74 (Official Build) (64-bit)

Mention any other details that might be useful

Thanks! We'll be in touch soon.

Error 404 when call /hello - deploy 3-Authorization-II/2-call-api-b2c/ on Static Web App

Issue

After succeeding testing Azure B2C (following part 3-Authorization-II/2-call-api-b2c/) on localhost, I tried to deploy the code on Azure Static Web App. The main page and login page works well as same as on localhost. However, when I clicked at "HelloAPI" menu (https://[Static_URL]/hello) , it showed error "404: Not Found" - "We couldn’t find that page, please check the URL and try again.".

This issue is for the sample

    - [ ] 1-1) Sign-in with Azure AD
    - [ ] 1-2) Sign-in with Azure AD B2C
    - [ ] 2-1) Acquire a Token and call Microsoft Graph
    - [ ] 3-1) Protect and call a web API on Azure AD
    - [] 3-2) Protect and call a web API on Azure AD B2C
    - [ ] 4-1) Deploy to Azure Storage and App Service
    - [X] 4-2) Deploy to Azure Static App Service
    - [ ] 5-1) Call a web API using App Roles
    - [ ] 5-2) Call a web API using Security Groups
    - [ ] 6-1) Call Microsoft Graph using on-behalf-of flow
    - [ ] 6-2) Call a web API using Proof of Possession tokens
    - [ ] 6-3) Call a web API using Conditional Access Auth Context

This issue is for a

    - [ ] bug report -> please search issues before submitting
    - [X] question
    - [ ] feature request
    - [ ] documentation issue or request

Minimal steps to reproduce

1. Deploy the code from part 3-Authorization-II/2-call-api-b2c/ to GitHub
2. Create a static web app by binding with the code on GitHub - using React template.
3. Add "Redirect URIs" of App Register "msal-react-spa" with the frontpage of Static web app
4. Test running the Static web app
5. Click "Sign In" then "Sign In with Popup"
6. Sign in as normal
7. Click at top menu "HelloAPI"

Any log messages given by the failure

"404: Not Found" - "We couldn’t find that page, please check the URL and try again.".

Expected/desired behavior

It should show result of calling Hello API as same as running on localhost:3000.

Library version

See in https://github.com/Azure-Samples/ms-identity-javascript-react-tutorial/blob/main/3-Authorization-II/2-call-api-b2c/SPA/package.json

Browser and version

Tested on

• Edge Version 99.0.1150.46 (Official build) (64-bit)
• Chrome Version 99.0.4844.74 (Official Build) (64-bit)
• Safari on iPhone ( iOS 15.3.1 )

Mention any other details that might be useful

The code in part 3-Authorization-II/2-call-api-b2c/ is very similar to part 4-Deployment/2-deploy-static/. But I don't understand why B2C code does not work on Static web app.