CODEWITHSUNDEEP
reactjsoauth-2.0corsazure-active-directory
DevMJ
DevMJ

Reputation: 351

Authentication with Azure AD from React JS app

I have a front end application developed using React JS. I need to provide authentication for this application using Azure AD. I have a requirement of not redirecting to microsoft's login page while logging in. To acheive the same I have created a custom login page as part of my front end application. And on click of Login I am calling azure AD token endpoint using Resource Owner Password Credentials flow and thus I am passing username and password entered into my custom page for authentication. But when trying to call the post method to token endpoint I am getting an error as 

Failed to load https://login.windows.net/<tenant id>/oauth2/token: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access.

I tried setting Access-Control-Allow-Origin header also but got the same error.

Please help me in fixing the same.

Upvotes: 0

Views: 4025

Answers (1)

juunas
juunas

Reputation: 58898

You cannot call the token endpoint from a client-side JavaScript app. The main way of acquiring tokens is to use Implicit Grant flow (get tokens from the authorization endpoint after user has logged in). You must use the Microsoft login page, you cannot make your own.

You can use react-adal to implement the login flow, here is an article on its use: https://itnext.io/a-memo-on-how-to-implement-azure-ad-authentication-using-react-and-net-core-2-0-3fe9bfdf9f36

Upvotes: 2

Related Questions