CODEWITHSUNDEEP
javascriptreactjsazureazure-ad-b2cazure-ad-msal
Prateek Goyal
Prateek Goyal

Reputation: 15

Azure AD B2C REST API endpoint for user authentication

I am trying to authenticate users for my Reactjs-based application through Azure AD B2C service. While going through the documentation, I found 2 ways - popup and redirect, but both these options have some limitations like if I want the login/signup form very customized or I want a callback to be returned on new user signup etc. Also, I am using AD to authenticate users for React Native mobile application and in that I have to use webview for redirect which doesn't give a very native feel.

A solution for these limitations some forums gave was to use API connectors but again I wasn't able to find some good documentation for that.

Can anyone help in determining a good approach for user authentication and signup with a custom form that I can create, maybe by using some API endpoints or any SDK for that purely on the frontend-side ?

Upvotes: 1

Views: 454

Answers (1)

Kartik Bhiwapurkar
Kartik Bhiwapurkar

Reputation: 5159

• A good approach would be to create user flows for login/signup and authentication in Azure AD B2C by registering your react js application in app registration. Once the app has been registered, configure the API access label and the signup/login user flows for that app registered. Once that is done, create a file named B2C.js and add the code below for adding the ‘msal’ authentication library in it for providing authentication to the react js app deployed.

   ‘ var msalAppConfig = {
       auth: {
       clientId: '<client Id>',
     authority:'https://<TenantSubDomain>.b2clogin.com/<Tenant>/<signInPolicy>',
       redirectUri: '<Redirect Url>',
      validateAuthority: false,
       postLogoutRedirectUri: 'window.location.origin'},
          cache: {
        cacheLocation: 'sessionStorage',
         storeAuthStateInCookie: isIE()
       } ‘

• Replace the values of ‘client id’, ‘redirect url’ and other ‘<>’ values that can be filled through the application created in the azure ad b2c app registration field. Once done, the login/signup page will look as below: -

Azure AD B2C Userflow

• Ensure that the index.js and the b2c.js file is properly edited will required details so that authentication happens correctly through azure ad b2c.

Please find the below link for more information on adding authentication and the above signup/login page: -

https://blog.devgenius.io/secure-login-in-reactjs-with-azure-ad-b2c-fc0f919db1dc

Upvotes: 1

Related Questions