how to achieve msal azure ad b2c in react native

Question

  const config = {
    issuer:
      'https://zoomonlineb2c.b2clogin.com/zoomonlineb2c.onmicrosoft.com/B2C_1_MobileSignup_in/v2.0',
    clientId: '83c5579e-d55b-4647-8c93-b66ee2961f49',
    redirectUrl:
      'com.ztg.zoomonline://com.ztg.zoomonline/android/callback/', // the redirectUrl must end with a slash
    scopes: ['openid', 'offline_access'],
  };

  const auth = await authorize(config);
  console.log('auth :>> ', auth);

Need to handle the azure ad b2c in react native

Answer 1

Posting my comments as an answer benefits the community.

According to this GitHub document, we can implement MSAL Azure AD B2C in React Native.

Code :

Login.js :

import React from 'react';
import {
  ActivityIndicator,
  View,
  TouchableOpacity,
  Text,
  StyleSheet,
  Alert,
} from 'react-native';
import {LoginView} from 'ad-b2c-react-native';
import * as SecureStore from './SecureStore';

export default class Login extends React.PureComponent {
  constructor(props) {
    super();
    this.webView = React.createRef();
  }
  onLogin = () => {
    const {setAuthenticated} = this.props;
    setAuthenticated(true);
  };
  onFail = (err) => {
    Alert.alert(err);
  };
  onBack = () => {
    this.webView.current._backHandler();
  };
  spinner = () => {
    return (
      <View style={styles.spinner}>
        <ActivityIndicator animating={true} />
      </View>
    );
  };
  render() {
    return (
      <View style={styles.body}>
        <View style={styles.frame} />
        <LoginView
          style={styles.webView}
          appId="<client_ID>"
          redirectURI="https://<tenant_name>.b2clogin.com/oauth2/nativeclient"
          tenant="rnb2csample"
          loginPolicy="B2C_1_susi"
          secureStore={SecureStore}
          renderLoading={this.spinner}
          onSuccess={this.onLogin}
          onFail={this.onFail}
          ref={this.webView}
          scope="openid offline_access https://<tenant_name>.onmicrosoft.com/<scope_id>/read"
        />
        <View style={styles.frame}>
          <TouchableOpacity style={styles.button} onPress={this.onBack}>
            <Text style={styles.buttonText}>Back</Text>
          </TouchableOpacity>
        </View>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  body: {
    flex: 1,
    width: '100%',
    backgroundColor: 'black',
    opacity: 0.92,
  },
  frame: {
    backgroundColor: 'black',
    alignItems: 'center',
    justifyContent: 'center',
  },
  webView: {backgroundColor: '#222222', flex: 1},
  button: {
    margin: 10,
    padding: 5,
    borderRadius: 5,
    backgroundColor: '#222',
    width: 90,
    height: 30,
    justifyContent: 'center',
    alignItems: 'center',
  },
  buttonText: {
    color: 'white',
  },
  spinner: {
    backgroundColor: '#222222',
    height: '100%',
    justifyContent: 'center',
  },
});

Logout.js :

import React from 'react';
import {Alert, ActivityIndicator, View, StyleSheet} from 'react-native';
import {LogoutView} from 'ad-b2c-react-native';

export default class Logout extends React.PureComponent {
  constructor(props) {
    super();
    this.onSuccess = this.onSuccess.bind(this);
    this.onFail = this.onFail.bind(this);
    this.spinner = this.spinner.bind(this);
  }
  onSuccess() {
    const {setAuthenticated} = this.props;
    setAuthenticated(false);
  }
  onFail(reason) {
    Alert.alert(reason);
  }
  spinner() {
    return (
      <View style={styles.spinner}>
        <ActivityIndicator animating={true} />
      </View>
    );
  }
  render() {
    return (
      <LogoutView
        style={styles.body}
        onSuccess={this.onSuccess}
        onFail={this.onFail}
        renderLoading={this.spinner}
      />
    );
  }
}
const styles = StyleSheet.create({
  body: {
    flex: 1,
    width: '100%',
    backgroundColor: 'black',
    opacity: 0.92,
  },
  spinner: {
    backgroundColor: '#222222',
    height: '100%',
    justifyContent: 'center',
  },
});