How to Customize Azure B2C with React Native Design.

Question

Hi, I'm using React Native app for Client Side. And .net as Backend. I successfully implemented the jwt token code. But my problem is how can I use my custom UI for signup/Login page instead of Microsoft. Can anyone guide me how can I accomplish this ?

In azure portal I found only html page can be customize, but what about react native??

How can I use my react native screen design code in Azure B2C? My code is as follows:

const SignUp = ({}) => {
const [password, setPassword] = useState('');
const [phone, setPhone] = useState('');
return (
<View style={[styles.container, styles.inputStyle]}>
<Image source={curve} resizeMode="stretch" style={styles.imgbgcurve} />
<ImageBackground
source={Background}
resizeMode="stretch"
style={styles.imagebg}
/>
<Text style={styles.headertext}>{TRANSLATION_TEXT_KEYS.HEADER}</Text>
<View style={[styles.inputarea]}>
<InputField
type={TRANSLATION_TEXT_KEYS.PHONE}
imageicon={avatar}
placheholder={TRANSLATION_TEXT_KEYS.USERNAME}
/>
<InputField
type={TRANSLATION_TEXT_KEYS.PHONE}
imageicon={phonecall}
placheholder={TRANSLATION_TEXT_KEYS.USERPHONE}
otptext={TRANSLATION_TEXT_KEYS.OTP}
/>
<InputField
type={TRANSLATION_TEXT_KEYS.PHONE}
imageicon={checkmark}
placheholder={TRANSLATION_TEXT_KEYS.CODE}
resendtext={TRANSLATION_TEXT_KEYS.RESEND}
/>
<InputField
type={TRANSLATION_TEXT_KEYS.PASSWORD}
value={password}
setValue={setPassword}
show={true}
imageicon={padlock}
placheholder={TRANSLATION_TEXT_KEYS.PASSWORD}
/>
<TouchableOpacity style={[styles.forgotpasstextarea]}>
<Text style={[styles.termstext]}>{TRANSLATION_TEXT_KEYS.TERMS}</Text>
</TouchableOpacity>

    <View style={[styles.signuparea]}>  
      <CustomButton  
        name={TRANSLATION_TEXT_KEYS.SIGN_UP}  
        imageicon={button}  
      />  
    </View>  
  </View>  
</View>  

);
};

export default SignUp;

@AmanpreetSingh-MSFT

Answer 1

Hi @sarbita · Thank you for reaching out.

As of now, UI customization in B2C is only possible by using HTML. You can add JavaScript to your HTML for any customization but you cannot perform Azure B2C UI customization using native screen design code.

-----------------------------------------------------------------------------------------------------------

Please "Accept the answer" if the information helped you. This will help us and others in the community as well.