Thanks Gopal for putting this together!

I followed the steps and ran the project but currently getting AADSTS700054: response_type 'id_token' is not enabled for the application' after logging in. I am trying to use PKCE code flow instead of implicit flow. Do you have any idea what the error could be about? Is there any way to set response_type to code? Thanks!

Hi Mahlet, thanks for stopping by and glad it was of some help. I guess the error you are seeing indicates something not properly setup in your AD B2C app registration authentication section. Did you add the authentication with platform Single Page application and a redirect URI is added there?

Thanks a lot for your fast reply, Gopel. I really appreciate it.

Yes our AD B2C app registration is done properly as indicated in your post. However, I want to allow users to sign in to a separate Microsoft AD from the sign in page in addition to email sign in. When running the app and clicking on login button, it redirects me to the user flow I created correctly and I can see that the response-type is 'Code' from the url. But then clicking on 'sign in with Social media' to sign in to an external Microsoft identity provider redirects to a url where response-type is id-token and I get that error. I plan to allow more external providers to access the app. And I don't have control over what authentication method they are using. Does that mean I can't choose PKCE in my app which is more secure? If I check id_token' option in authentication section of my app, the issue might get resolved. What is your thought on this?

Hi Mahlet,
Sorry this time it took longer to reply due to some work other stuff.
For signing in with external AD - you need to configure the app in that AD as well and get the client id/secret to configure in your AD B2C identity provider. Have you done that? I guess there is something missing in your AD app registration. Here is a link to the relevant documentation - https://docs.microsoft.com/...

For multiple identity providers, you can have multiple buttons but that is not user friendly. So you can do a custom policy and then determine the domain of that user using their email address (or some data in your backend API). Then direct the user to relevant login pages from the identity provider. You can checkout some sample policies on this GitHub repo - https://github.com/azure-ad.... Beware that custom policy development is a big task in itself.

I hope it helps?

Hi,

After running the react app, I am getting below error.

TypeError: Cannot read properties of undefined (reading 'split')

export const loginRequest = {
> 43 | scopes: process.env.REACT_APP_ADB2C_LOGIN_SCOPES.split(','),
44 | };

You need to create a .env file in your project. Look at the Configure the app section in GitHub Readme. https://github.com/gopal-am...

Hi Gopal, thanks for your response. I have created .env but your few environment variable names not prefixed with REACT_APP_

I have fixed that problem but simply can't figure out YOUR_TENANT_NAME value.

Could you please help me?

Under my Azure B2c, I can see wlb2c.onmicrosoft.com. So should I put only wlb2c or wlb2c.onmicrosoft.com inside {YOUR_TENANT_NAME}?

Also, my policy name is B2C_1_signupsignin1 and I tried replacing your B2C_1_susi but it is simply not working.

It will be great if you could help. Thanks

Hi Dhiraj,
Thanks for pointing that REACT_APP_ prefix. I just corrected the Readme on my GitHub. (I think that prefix is needed when you create project with Create-React-App).

For the YOUR_TENANT_NAME, simply use your tenant name wlb2c. You are right to use the B2C policy name as you have configured. But unless the correct tenant name is used, the sign-in policy will not work so I guess that is the root cause of the error you are seeing.

Amazing, thank you very much Gopal. All working fine except I started getting this error.

TypeError: Cannot read properties of undefined (reading 'split')

40 |
41 | // Add here scopes for id token to be used at MS Identity Platform endpoints.
42 | export const loginRequest = {
> 43 | scopes: process.env.REACT_APP_ADB2C_LOGIN_SCOPES.split(','),
44 | };
45 |
46 | export const editProfile = {

Could you please add REACT_APP_ADB2C_LOGIN_SCOPES to .env file and also explain how to set up scopes?

Thanks in advance

Hi this is the closest example i could find of a integration between react and Azure AD B2C.
One minor fix: in the readme, the content of the .env file should also contain REACT_APP_ADB2C_LOGIN_SCOPES. Otherwise I get error:

TypeError: Cannot read properties of undefined (reading 'split')
Module.<anonymous>
E:/Dev/Sandbox/adb2c-react-sign-in-signout/src/authConfig.js:43
40 |
41 | // Add here scopes for id token to be used at MS Identity Platform endpoints.
42 | export const loginRequest = {
> 43 | scopes: process.env.REACT_APP_ADB2C_LOGIN_SCOPES.split(','),
44 | };
45 |

Thanks Nahuel Taibo, glad it was useful.

I have not been able to spend time to update or add new posts for quite long time. Thanks for pointing out the .env, I have updated the README on GitHub.