Sony Arouje

a programmer's log

React-Native library for Azure AD B2C

with 24 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 ,

24 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

    • 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 🙂

        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

    • 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

  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

    • 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

  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

    • 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

  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

    • 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

  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

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

        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

    • 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

      • 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

  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

    • 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

  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


Leave a Reply to Yashwant Garad Cancel reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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: