Using MSAL.js to integrate React Single-page applications with Azure Active Directory - July 2022

This month’s in-depth topic: Deep dive on using MSAL.js to integrate React Single-page applications with Azure Active Directory. Integrate a React single-page app with the Microsoft identity platform. Enable SSO and get an access token for Microsoft Graph API. Step through code for subscribing to MSAL events, protecting routes using MSAL React templates, and acquiring tokens with MSAL React hooks. Finally, how apps can prepare themselves for Continuous Access Evaluation (CAE) events and deploying app on Azure Static Web Apps service. Microsoft Presenters are Doğan Erişen, Salman Salem and Kalyan Krishna. Recorded July 21, 2022
Learn more
• See the full blog post for this call in the Microsoft 365 platform community blog - aka.ms/m365/blog
• Download the recurrent invite for this call | aka.ms/IDDevCo...
• Microsoft 365 Unified Sample gallery - aka.ms/m365/sa...
• Microsoft 365 Platform Community in RUclips - aka.ms/m365/vi...
• Microsoft 365 Platform Community - aka.ms/m365/com...

[@wellingtonostemberg7585]

Fantastic!
I`m watching from Brazil and it helped me a lot
Thank you!
Fantástico!
Muito obrigado pelo vídeo, me ajudou bastante!

[@rick2591]

This is a great video thanks for the info on using an event to catch the correct account.

[@dawalvijay]

Great Job!! This video is really helpful.

[@DanielRamBeats]

Perfect, thank you!

[@Girishsarda0803]

This is really helpful session for me. I was looking for something like this to understand some of the concepts better.

[@jamalashraf7957]

You showed the tutorial for REACT but this SPA is also calling some kind of API(NodeJS) so how can we secure that API also so that both Front End and Back End would be secure... just like in Azure AD B2C, it secures an api itself, how can we do that same thing is Azure AD too.

[@nicodipi]

Thanks a lot, this video helped me a lot with the msal authentication process. Greetings from Argentina!

[@rafaelfabro4782]

Can the authentication be done without redirecting to b2c? Like if I got my own login page, can I just send an authenticate request with my username and password to b2c and it will reply an auth token?

[@dillanoblake]

Life saver!

[@Dmitryzakharov]

at 23:00 you sign out and it redirects you to the localhost:3000 it does not happen to me. Do you know why ?

[@balakumaran6056]

Same bro how to get rid of this
Explain pls

[@d00lph1n]

Great video, helped me with the migration from ADAL. Thank you :)

[@0Ipsita0]

Thank you so much, this video helped to create an authentication for AAD in react js.

[@ashwinkumar6839]

How to handle invalid_granttype when using loginpopup() , i have to close the popup and redirect to new page in the existing window …. But the popup is not closing and it is showing some error

[@w00t360]

Can you please post the link to the sample in the video?

[@umakantabehera1701]

Can you please give a way to connect to webAPI using a secured way...So that the token should not display in the console or response, No one can copy the token and next connect to our api next?

[@chetansoni7653]

i use the same. it's redirecting to MS Login page & taking the Sign-in's. but it's allowing all user. in AAD>Enterprise app>My-App>Users & Groups. here NO users or Groups are added. but still everyone can login & access is allowed. please help as soon as possilble. can't figure out what's going wrong.

[@user-uu6ix7vq8u]

What is the encryption used in this MSAL.js

[@nedgrady9301]

Please zoom in on the code next time

[@tharunsubbarao6909]

Thats Good! but i have a situation where i want to Support both SingleSignOn and Eagleid logons in our react application using Azure Msal React. can you help me on this

[@dgh25]

didnt work.... "if (||graphData)" is not a valid syntax 43:54

[@reydez84]

how would i get in the Active directory and get all the users?

[@kalpeshpatil8521]

Hi , I am really stuck in the msal-react implementation. I have a react app with a login page and couple of pages which should be visible only after login. I have followed this tutorial for msal-react and stuck with the useIsAuthenticated hook. It always returns false even if I log in successfully and always redirect to my login page, not sure how. I have written a useEffect hook inside my Home.jsx which checks the isAuthenticated flag using useIsAuthenticated hook and redirects the user to /login using useNavigate hook if its false. I also wanted to implement the app in such a way that when I hit the default app url , it should not prompt me for the microsoft online login, rather it should display the login page and redirect to MS login only after clicking the login button on that page. Can someone help with the useIsAuthenticated issue and this requirement please. ?

[@sergi834]

Hey, did you solve it?

[@nnamtochukwu7266]

Clear and concise. Great job. I have a question about Msal though. I am using supabase (phone + otp) for authentication in my nextjs app. I want end users to be able to read certain azure api when they are logged in. Must my app end users have a microsoft account before they can sign in ?

[@kasiviswanadha4738]

Could you help me user authenticate Sign-page Without using Popup Sign-in page or button

[@kevin179887]

How do you get past the CORS error when logging in?

[@djberndt]

Did you find a solution for this? I'm having the same issue.

[@kevin179887]

@@djberndt Sorry, I didn't

[@karnathakrar3999]

Does this work when accessing Webapps through Mac and IOS devices?

[@karnathakrar3999]

I've successfully implemented for windows based devices, but doesn't seem to work when I access it through a mac

[@ankurmishra4350]

How to integrate msal in react native mobile app with azure active directory.
Please make video on this.