Sony Arouje

a programmer's log

React-Native library for Azure AD B2C

with 14 comments

Last couple of days I was spending my free time learning Azure Functions and Authentication of these functions. I was concentrating on Azure Active Directory B2C as my authentication provider. May be I will write another post detailing how to setup Azure AD B2C and configuring Azure Functions.

I could able to create access tokens and access my functions via postman. Next I wanted to create a react-native mobile app and try access the same function from it. I searched for libraries to enable AD B2C login, unfortunately I couldn’t find any. I tried MSAL js but will not work with react-native, as MSAL needs localStorage or sessionStorage to work and is not suitable for react-native world.

Fortunately I found a library which does Azure AD login. The work flow of Azure AD and AD B2C is almost same. So I decided to use Azure AD library and add Azure AD B2C functionality. I trim down the Azure AD library and removed the option to store the tokens. Caching of the token should be handled by the caller. This library will do the login flow and return back the tokens, it can also refresh the access_token using the refresh token flow.

Lets see how to use this library.

import B2CAuthentication from "../auth-ad-js/ReactNativeADB2C"; import LoginView from "../auth-ad-js/LoginView"; const CLIENT_ID = "<provide your client id>"; export default class LoginScreen extends React.Component { static navigationOptions = { title: "Login" }; render() { const b2cLogin = new B2CAuthentication({ client_id: CLIENT_ID, client_secret: "<key set in application/key>", user_flow_policy: "B2C_1_signupsignin", token_uri: "", authority_host: "", redirect_uri: "", prompt: "login", scope: ["", "offline_access"] }); return ( <LoginView context={b2cLogin} onSuccess={this.onLoginSuccess.bind(this)} /> ); } onLoginSuccess(credentials) { console.log("onLoginSuccess"); console.log(credentials); // use credentials.access_token.. } }

Parameters passing to B2CAuthentication are the values I configured in Azure AD B2C. If the login succeeds then onLoginSuccess callback function will receive the tokens.

The library is hosted in git.


Written by Sony Arouje

February 7, 2019 at 4:13 pm

Posted in React

Tagged with ,

14 Responses

Subscribe to comments with RSS.

  1. Hi @sonyarouje, Im trying to implement your code in my react native app. I’ve used the required values in my ReactNativeADB2C.js file but when I try to run the app it gives the follwing error:

    TypeError: Cannot read property ‘getConfig’ of undefined

    Can you please help me out. Thanks


    April 15, 2019 at 4:52 pm

    • Hi Safan, i am on vacation now, will check it out once I am back.

      Sony Arouje

      April 17, 2019 at 10:13 am

      • The error has been resolved…your library works perfect! enjoy your vacations 🙂


        April 17, 2019 at 1:18 pm

      • Glad to hear you solved the issue.

        Sony Arouje

        May 7, 2019 at 9:08 am

  2. Hi Sony Arouje,

    Did you get chance to post detailing how to setup Azure AD B2C and configuring Azure Function ?
    I’m curious to know what you written into function app.

    I need to authenticate my react-native app user from Azure AD B2C directory. So they can consume Web API endpoint. For the same, I’m looking an a way to get id_token.

    Yashwant Garad

    May 6, 2019 at 10:29 am

    • Hi Yashwant,
      Havent got time to write the post. Here is what you can do get id from token.

      In normal scenario the Azure function param structure will be like
      public static async Task Run([HttpTrigger(AuthorizationLevel.Function, “get”, Route = null)] HttpRequest req, ILogger log)

      To deal with token add an extra parameter with type ClaimsPrincipal like below
      public static async Task Run([HttpTrigger(AuthorizationLevel.Function, “get”, Route = null)] HttpRequest req,ILogger log, ClaimsPrincipal principal) {


      How to Get Id from token?
      If you iterate through principal you can see different claims you have requested. For e.g. Id
      var id = principal.FindFirst(“”)?.Value

      Keep in mind, here authentication is done by Azure AD B2C. When you configure Azure function to authenticate with Azure AD, any request will first inspected by AD to validate the token. Once authenticated you function will get all the claims you have requested. For e.g. id, name, email, etc

      Sony Arouje

      Sony Arouje

      May 7, 2019 at 9:07 am

  3. Is there a way to authenticate the credentials from native page without using the webview. I am using the Local account provider and want to have native input fields and submit button.

    Arup Nayak

    May 20, 2019 at 6:47 pm

    • I dont know whether you can use your own input fields for AD B2C Auth. It like google or FB auth, they also open a new page to capture the user credentials.

      Sony Arouje

      May 21, 2019 at 10:29 am

  4. Hey there, I was able to implement your code and I get a refresh and access token. However, I can’t seem to figure out how to refresh an access token using the refresh token. Is this possible with your library?


    May 21, 2019 at 10:47 am

    • You can try calling refreshToken function in ReactNativeADB2C.js.

      Sony Arouje

      May 21, 2019 at 12:00 pm

    • you can also call assureToken function, which will check whether the token has expired if expired then call refreshToken else return available token.

      Sony Arouje

      May 21, 2019 at 12:01 pm

  5. How do we logout of the app? I tried to navigate to the login screen, but it takes me to the redirect uri mentioned in B2CAuthentication object. How do I pass needLogout prop?


    May 22, 2019 at 1:26 am

    • I havent tried logout option.

      Sony Arouje

      May 22, 2019 at 1:39 pm

      • The forgot password link is not working too. I am getting 404file or directory not found error.


        May 22, 2019 at 11:03 pm

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: