Implement Azure AD with React web application - reactjs

Are there any examples on how to implement Azure AD with React web application the example I see include .net core examples only. Mine is pure React web application. Any suggestions?
it is ok to bundle the tenantid and clientid/application inside the react web application? would that have any security implications

We implemented similar structure as follows:
There is a webappservice, which is created from standart web application template. It handles all the authentication parts. Once user is authenticated, the web application service, serves react files with proper parameters (e.g. logged in, user token etc)

Related

How do I implement Single Sign on. Applications are written in Blazor App and React JS

I need to implement the Single Sign on with Azure AD B2C. One of our application is developed in Blazor and other is developed in React JS.
Once user logged in Blazor app and then come to React JS app, he should be directly logged in without entering the credentials.
Thanks
Multiple Blazor app are able to work with SSO, but not the React JS app.
If your requirement is only specific to Azure AD/ Microsoft SSO then you can use Microsoft Authentication Library for React (msal-react).The library will be useful for React or JS based client application to authenticate using Azure AD.
Refer this for more information-
https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/lib/msal-react

Setup a hybrid structure of MVC and React App

I'm familiar with the .Net and React applications individually. What I want to do is to create a hybrid app of MVC and React for SaaS. Below are the details,
.NET MVC application for our website (can't create this in react as
it is a website and intended to use for google crawl, SEO, and all)
Once users log in using the MVC application LOGIN form, I want to redirect
them to ReactApp which is basically a portion after login
I already have a website built using MVC. Now want to load React application after successful login
Note: This needs to be run under the same domain. No redirection to sub-domain or so. Although, we can have an additional paths like /user
Questions:
Is it possible to traverse users between both applications?
Is it possible to manage the same session between the two?

What is the authentication/authorization scenario for web app that calls API without signed in user in azure AD?

I have web app written in react which is Single Page Application. Then I have back end API written in .NET core 3.1.
As I mentioned earlier I have web app written in react so this react web app has to call one more API to read some configs. This third application is also a API application written in .NET core 3.1. As soon as web app spins up, it will call this third APP and read configs like API URL of second application and other azure related details. Now this third API app should be protected. Only web app should access this app and not any other users.
So I am trying to find what are the best scenarios available in azure AD. Can someone help me to understand the possible scenarios to handle this?
What you seem to want to accomplish at the moment is for the web application to access the third API application. If this is the case, it is simple. The steps are as follows:
First, you need to expose the api of the third API application protected by Azure, which can be configured according to the following process
Azure portal>App registrations>Expose an API>Add a scope>Add a client application
Next, you need to define the manifest of api applications and grant application permissions to your client applications (this is the role permissions you define yourself, you can find it in My APIs when you add permissions). This is the process of defining the manifest.
This is to grant permissions for the client application (You can find your expose api permissions in My APIs.):
Finally, you need to obtain an access token using the client credential flow where no user is logged in:
Parse the token:
so as per you description It seems you want to permit only API application to access your third application.
One thing you can do you can create a user group and give acess to your API only and put application restricted to this group only.
See this hope it will help
https://learn.microsoft.com/en-us/azure/active-directory/fundamentals/users-default-permissions

use oauth2 for authentication in react web application

I need your guidance/suggestion on the scenario I am into.
We have a legacy GWT application(version 2.7), this application has 2 controllers which implement EntryPoint class - LoginController and OTSController. These have their respective presenter and viewer.
N.B. - this GWT application runs as a spring-boot application.
This GWT application is a ui application(and there is another spring-boot application which would act as a server app). The GWT app uses default way of handling user authentication i.e. using /j_spring_security_check.
Now I am trying to re-write the Login functionality in React(and I am quite new with React). I am trying to use oauth2 for authentication, can you please point which oauth2 library I should use and is their any sample which I can look into.
I have searched for authentication for React web-app and seen examples for -
Okta Sign-In Widget
Auth0 - provides authentication-as-a-service
Stormpath React SDK
JWT(JSON Web Token)
But couldn't find any specific js library that gives oauth2 implementation(and which doesn't have much strict license obligations) that I can use in my react app, please give me pointers so I can use any existing/implement oauth2 authentication for my Login page(using react).
Thanks,
Saurabh.
You can use these two libraries from Okta for integrating authentication into a React app with Okta - #okta/okta-auth-js and #okta/okta-react. You can also checkout the guide here - https://developer.okta.com/code/react/okta_react. Hope this helps.

Hosting IS4 and AspNet Core Identity's user management functions in the same web application?

I've read in some IS4 issues recently, e.g. here, that hosting IS4 and a client in the same web application is not a tested or recommended scenario. Does this also apply for when integrating AspNet Identity's logged-in workflows into IS4?
For example, it's understood that AspNet Identity's Account feature's controller, models and views from AspNet Identity are required so that IdentityServer4.AspNetIdentity code can initiate the relevant UI, but is it okay to leave the Manage controller in the same web application so as to provide a self-service feature, or should this functionality be moved to a separate web application?
For IS3 I created a separate web app that contained user profile functions (Manage controller), plus admin for the IS3 configuration and user management. This app was configured as a client and the IS3 web app itself had no client config or logged-in workflows. Is this the preferred architecture for re-using the Manage controller functionality?
Ideally, I'd like to keep AspNet Identity functionality together with IS4 in the one web app and have a separate web app for admin of config and users. Just want to be certain I'm not opening up a security vulnerability by doing so.

Resources