Sony Arouje

a programmer's log

React-Native library for Azure AD B2C

with 37 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: "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.

Written by Sony Arouje

February 7, 2019 at 4:13 pm

Posted in React

Tagged with ,

«
»

37 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

    Safan

    April 15, 2019 at 4:52 pm

    Reply

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

      Sony Arouje

      April 17, 2019 at 10:13 am

      Reply

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

        Safan

        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

    Reply

    • 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(“http://schemas.microsoft.com/identity/claims/objectidentifier”)?.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

      Regards,
      Sony Arouje

      Sony Arouje

      May 7, 2019 at 9:07 am

      Reply

  3. Hey Sony, Did you have an example for refreshing the access token? I can’t seem to figure it out. Thanks!

    Justin

    May 11, 2019 at 6:16 am

    Reply

    • You can renew the token using refresh token as below


      B2CAuth.assureToken()
      .then(token => {
      //token is the new authentication token use that in your code.
      })

      Sony Arouje

      July 4, 2019 at 9:35 am

      Reply

  4. 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

    Reply

    • 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

      Reply

  5. 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?

    justinprojul

    May 21, 2019 at 10:47 am

    Reply

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

      Sony Arouje

      May 21, 2019 at 12:00 pm

      Reply

    • 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

      Reply

  6. 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?

    arupnayak

    May 22, 2019 at 1:26 am

    Reply

    • I havent tried logout option.

      Sony Arouje

      May 22, 2019 at 1:39 pm

      Reply

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

        arupnayak

        May 22, 2019 at 11:03 pm

  7. Hello there, I’ve got this working on Android but am having trouble with the Redirect URI on iOS.

    Using urn:ietf:wg:oauth:2.0:oob for the redirect URI ends in a Possible Unhandled Promise Rejection (id: 0):
    Error: Unable to open URL: urn:ietf:wg:oauth:2.0:oob?etc

    I also tried a custom Redirect URIs, com.mydomain.myapp://auth/ which worked on Android but never seems to fire on iOS.

    I feel like I’m missing something on the iOS side. Did you run into this as well? Thanks!

    Jen Burch

    July 9, 2019 at 5:43 am

    Reply

    • I tried with with redirect uri’s like https://functionapp1201901310445.azurewebsites.net/.auth/login/aad/callback. May be ios might have issues dealing with non https urls
      I never had any issues till now with ios with the uri I mentioned.

      Sony Arouje

      July 9, 2019 at 10:01 pm

      Reply

      • So after more debugging on iOS I realized the custom redirect ( com.mydomain.myapp://auth/ ) was working, but only if there was a delay in LoginView _handleADToken. (like if you are stepping through with breakpoints)

        I don’t entirely understand yet what’s going on with iOS but it’s like NavigationStateChange happens too fast for it to catch the last change. Maybe using the azure function for the redirect provides that delay.

        But thanks again for the library!

        Jen Burch

        July 10, 2019 at 3:20 am

  8. When providing the client-secret, what do you mean by “”? I have an angular application that is setup to use aad b2c, and it does not require a client-secret… that is provided on the server-side.

    Brian West

    July 18, 2019 at 1:24 am

    Reply

  9. Hi there, I got this library working with email authentication. But when using third party identity providers like Facebook, it’s giving the following message:

    “error”: “invalid_grant”,
    “error_description”: “AADB2C90090: The provided JWE is not a valid 5 segment token.

    How do I get it to work with other identity providers?

    Thanks!

    Danny

    August 5, 2019 at 7:47 am

    Reply

    • I havent tried with any other 3rd party providers, so not sure what’s the issue.

      Sony Arouje

      August 5, 2019 at 8:40 am

      Reply

  10. Hi there, I got this library working with email authentication. But when using third party identity providers like Facebook, it’s giving the following message:

    “error”: “invalid_grant”,
    “error_description”: “AADB2C90090: The provided JWE is not a valid 5 segment token.

    How do I get it to work with other identity providers?

    Thanks!

    Danny

    August 5, 2019 at 7:50 am

    Reply

    • I fixed the issue with third party authentication, please check the git repo for the updated code

      Sony Arouje

      September 15, 2020 at 6:25 pm

      Reply

  11. Hello guys,

    Anyone tell me ,how to implement azure b2c inside react native application.
    Please let me know if you have.

    Best regards
    Lalit Upadhyay

    Lalit Upadhyay

    December 25, 2019 at 9:41 pm

    Reply

    • Hi, Can you please clarify about implementing Azure b2c inside React Native app.

      Sony Arouje

      December 27, 2019 at 8:35 am

      Reply

      • Hi @sonyarouje,
        We are facing problem with ur onLoginSuccess function .this fun is not return any call back and we are signing with your existing account using username and password after that we got a dialogue i.e do you want to download “native client”.
        Please sort it out.if you have any.
        Thanks

        Anonymous

        December 27, 2019 at 1:01 pm

      • My existing account mentioned in the post is not exist. You have to create a AzureADB2C account yourself.

        Sony Arouje

        September 15, 2020 at 6:21 pm

  12. Hi Sony, i am unable to get the concept of redirect uri . Can you please explainwhat should i put there exactly ?

    Anonymous

    April 15, 2020 at 4:42 am

    Reply

  13. this can be used for login, which is great thank you, but how can a new user be created for adb2c inside the rn app?

    matthewlebo

    December 10, 2020 at 11:01 pm

    Reply

  14. Hey @Sony Arouje can you please guide me on how can I use my UI in Azure B2C. i.e. custom UI, not Microsoft provided SignUp/Login page.

    Gurpreet Arora

    June 23, 2021 at 4:56 pm

    Reply

    • yes there is an option in AD Application to set custom login ui but I totally forgot how to customize the ui

      Sony Arouje

      June 15, 2022 at 1:58 pm

      Reply

Leave a comment