How to Customize Azure B2C with React Native Design.

sarbita 21 Reputation points
2021-06-23T12:39:05.433+00:00

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

108585-azure-portal.png

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

Microsoft Entra External ID
Microsoft Entra External ID
A modern identity solution for securing access to customer, citizen and partner-facing apps and services. It is the converged platform of Azure AD External Identities B2B and B2C. Replaces Azure Active Directory External Identities.
2,634 questions
0 comments No comments
{count} votes

Accepted answer
  1. AmanpreetSingh-MSFT 56,301 Reputation points
    2021-06-24T09:48:48.447+00:00

    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.

    0 comments No comments

0 additional answers

Sort by: Most helpful