question

sarbita-7238 avatar image
0 Votes"
sarbita-7238 asked amanpreetsingh-msft answered

How to Customize Azure B2C with React Native Design.

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

azure-ad-b2c
azure-portal.png (30.1 KiB)
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

1 Answer

amanpreetsingh-msft avatar image
0 Votes"
amanpreetsingh-msft answered

Hi @sarbita-7238 · 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.

5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.