Azure AD B2C with React Native Expo

Question

I am new to mobile app development with react-native and expo. I'm trying to add authentication/authorization in my mobile app with Azure AD B2C but I find it more difficult to understand from Microsoft docs and even I couldn't find any clear directions on Google. Could anyone with this experience please guide me in right direction. Any help would be appreciated.

Answer 1

We have faced the same issue in Ionic native.

we have used the capacitor oauth2 library which helped us to achieve the login using Azure AD b2c in ionic native.

For react native, you can try this https://github.com/GSingh01/ad-b2c-react-native

Also, you can customize UI for the user flows with the help of Microsoft docs

Answer 2

We do not have native SDKs for ReactNative or ReactJS. Here is a sample for React Native: https://github.com/azure-ad-b2c/apps/tree/master/apps/mobile-react-native-ios-android-appauth.

Answer 3

I tried to implement Implicit auth flow with Expo Auth Session. But from the Microsoft Docs I learnt that Auth Code flow is most secured to use in mobile apps compared to Implicit flow. Does anyone tried Auth Code flow with expo React native apps?

This is how I achieved Implicit flow with expo Auth Session:

  let redirectUrl = AuthSession.getRedirectUrl();
  console.log({redirectUrl});
  let result = await AuthSession.startAsync({
        authUrl:
            `https://{{YourB2CTenant}}.com/{{YourB2CAD}}.onmicrosoft.com/oauth2/v2.0/authorize?p={{YourB2CPolicy}}` +
            `&client_id=${clientId}` +
            `&nonce=default` +
            `&redirect_uri=${encodeURIComponent(redirectUrl)}` +
            `&scope=${encodeURIComponent("openid offline_access")}` +
            `&response_mode=fragment` +
            `&response_type=id_token+token` +
            `&prompt=login` +
            `&state=login`
    });
    if(result.type !== 'success') {
        alert('Uh oh, something went wrong');
        return;
    }