Sony Arouje

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: "https://saroujetmp.b2clogin.com/saroujetmp.onmicrosoft.com/oauth2/v2.0/token",
      authority_host: "https://saroujetmp.b2clogin.com/saroujetmp.onmicrosoft.com/oauth2/v2.0/authorize",
      redirect_uri: "https://functionapp120190131041619.azurewebsites.net/.auth/login/aad/callback",
      prompt: "login",
      scope: ["https://saroujetmp.onmicrosoft.com/api/offline_access", "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.