How do I integrate Azure AD SSO authentication with ReactJS web application?

srihitha pakala 1

We have developed a web application with frontend in ReactJS and middleware APIs in NodeJS. The frontend and middleware are hosted through 2 seperate azure web app services. In order to integrate SSO with the application, we have followed all the steps in the document: “https://learn.microsoft.com/en-us/azure/app-service/app-service-web-tutorial-auth-aad” till the topic “configure app service to return usable token”. However, we did not make any code changes since we could not find any implementation in ReactJS. Post entering the credentials, the applications redirects to callback URL (i.e. Redirect URI) and the url throws 500 internal server error.
The authentication used to work when we added the reply URL, it started throwing this error post we added the token configuration. Is there anything that has to be added to code to resolve this issue?

Frank Hu MSFT 81 Reputation points

2019-12-17T00:46:14.813+00:00

Can you please provide the working request and the failure request?

And where is the 500 error being thrown, at the node JS server or the AAD Auth servers?

What error in particular is being thrown and are there any logs in your node js server?

It sounds like it might be that the post that the aad auth server is sending to the NodeJS server is not being properly handled and thus throwing a 500 error.
srihitha pakala 1 Reputation point

2019-12-17T15:47:12.857+00:00

The request not being sent to the NodeJS server.

The azure AD is returning cookie post authenticating user successfully in the response headers of the callback URL. After this the callback URL throws 500 error.
As per my understanding, the token sent has to be validated in the frontend before sending request to the middleware. But we do not know how to retrieve the cookie or token sent in the frontend of the application which is written in ReactJS.

The official documentation (https://learn.microsoft.com/en-us/azure/app-service/app-service-web-tutorial-auth-aad ) shows the code changes in .NET. Hence can you help us how to retrieve the cookie or token sent by the Azure AD in ReactJS?

2 answers

FrankHu-MSFT 976 Reputation points

2019-12-17T18:19:21.17+00:00

The cookie/token will be sent in the headers in the request from the AAD Server to your Node JS Server with the key :X-MS-TOKEN-AAD-ACCESS-TOKEN

I suggest taking a look at the blog below for more details on how to get an access token from an app service.

https://blogs.msdn.microsoft.com/aaddevsup/2018/02/28/configuring-an-app-service-to-get-an-access-token-for-graph-api/
Please sign in to rate this answer.
srihitha pakala 1 Reputation point

2019-12-19T13:12:15.557+00:00

We are now able to send the token post authentication to the backend in the APIs.
We are sending the token from frontend as bearer token in the API request URL headers. We are not sure how to handle the access token in the backend API code which is written in Node JS.
Is there any documentation which talks about how to check for the token and send response to the frontend in Node JS?

Gupta, Trapti 1 Reputation point

2022-02-17T05:21:50.953+00:00

Hi @srihitha pakala Could you tell me which documents you preferred since I'm at the same point and not sure how to handle the access token in node js'backend API

Ryan Hill 25,471 Reputation points Microsoft Employee

2022-02-17T14:15:29.423+00:00

Have a look at https://learn.microsoft.com/en-us/azure/app-service/tutorial-auth-aad?pivots=platform-linux @Gupta, Trapti . The tutorial is a C# back-end app with a JS front-end, but the basic principles are the same and will apply to ReactJS.

not sure how to handle the access token in node js'backend API

It's under Add access token to API calls. Once you get the token from /.auth/me, you'll append to that token the Authorization header as a Bearer token to the API request.

$routeProvider.when("/Home", { controller: "todoListCtrl", templateUrl: "/App/Views/TodoList.html", resolve: { token: ['$http', 'todoListSvc', function ($http, todoListSvc) { return $http.get('/.auth/me').then(function (response) { todoListSvc.setAuth(response.data[0].access_token); return response.data[0].access_token; }); }] }, }).otherwise({ redirectTo: "/Home" });
Sign in to comment
xequence 6 Reputation points

2019-12-22T06:20:20.17+00:00

Here is an example of how to get the token https://github.com/AzureAD/azure-activedirectory-library-for-nodejs
Please sign in to rate this answer.

0 comments No comments
Sign in to comment