I need to make an API request using this cURL
curl -L -i -X PUT –cert ./[device_cert].pem –key ./[device_cert_private_key].pem -H 'Content-Type: application/json' -H 'Content-Encoding: utf-8' -d '{"registrationId": "[registration_id]"}' https://global.azure-devices-provisioning.net/[ID_Scope]/registrations/[registration_id]/register?api-version=2021-06-01
And I convert it to axios, it seems like this
const data = {
registrationId: registrationId,
};
const cert = await RNFS.readFile(certificatePath, 'utf8');
const key = await RNFS.readFile(keyPath, 'utf8');
console.log('cert', cert);
console.log('key', key);
try {
const httpsAgent = new https.Agent({
cert: cert,
key: key,
});
console.log('httpsAgent', httpsAgent);
const response = await axios({
method: 'PUT',
url: `https://global.azure-devices-provisioning.net/${scopeId}/registrations/${registrationId}/register?api-version=2021-06-01`,
data: data,
httpsAgent: httpsAgent,
headers: {
'Content-Type': 'application/json',
'Content-Encoding': 'utf-8',
},
});
return response.data;
} catch (err) {
console.log('err', err);
return err;
}
In node we have API called https which provide Agent method to add certificate and private for API request as
const httpsAgent = new https.Agent({cert:cert,key:key})
But react native doesn’t support https.
So I tried multiple packages such rn-nodeify node-libs-react-native react-native-ssl-pinning
I can’t use nodejs-mobile-react-native as app size increases a lot with this package.
How can I use https.Agent in react native?
Thank You
1
React Native doesn’t natively support https.Agent from Node.js, but you can achieve similar functionality by using libraries that support certificate pinning or custom SSL configurations. We’ll use the packages axios, react-native-ssl-pinning, and react-native-fs.
Refer to this SO for
https.Agentand React Native integration. I use react-native-fetch or axios packages.
import React, { useEffect } from 'react';
import { Image, StyleSheet, Platform, View, Text } from 'react-native';
import axios from 'axios';
import { HelloWave } from '@/components/HelloWave';
import ParallaxScrollView from '@/components/ParallaxScrollView';
import { ThemedText } from '@/components/ThemedText';
import { ThemedView } from '@/components/ThemedView';
const deviceCert = `-----BEGIN CERTIFICATE-----
...
-----END CERTIFICATE-----`;
const devicePrivateKey = `-----BEGIN PRIVATE KEY-----
...
-----END PRIVATE KEY-----`;
const registrationId = '[registration_id]';
const idScope = '[ID_Scope]';
export default function HomeScreen() {
useEffect(() => {
const fetchData = async () => {
try {
const response = await axios.put(
`https://global.azure-devices-provisioning.net/${idScope}/registrations/${registrationId}/register?api-version=2021-06-01`,
{
registrationId: registrationId
},
{
headers: {
'Content-Type': 'application/json',
'Content-Encoding': 'utf-8',
// Note: Certificates and keys are not directly supported by axios config
},
timeout: 3000, // 3 seconds timeout
}
);
console.log(response.data);
} catch (error) {
console.error(error);
}
};
fetchData();
}, []);
return (
<ParallaxScrollView
headerBackgroundColor={{ light: '#A1CEDC', dark: '#1D3D47' }}
headerImage={
<Image
source={require('@/assets/images/partial-react-logo.png')}
style={styles.reactLogo}
/>
}>
<ThemedView style={styles.titleContainer}>
<ThemedText type="title">Welcome!</ThemedText>
<HelloWave />
</ThemedView>
<ThemedView style={styles.stepContainer}>
<ThemedText type="subtitle">Step 1: Try it</ThemedText>
<ThemedText>
Edit <ThemedText type="defaultSemiBold">app/(tabs)/index.tsx</ThemedText> to see changes.
Press{' '}
<ThemedText type="defaultSemiBold">
{Platform.select({ ios: 'cmd + d', android: 'cmd + m' })}
</ThemedText>{' '}
to open developer tools.
</ThemedText>
</ThemedView>
<ThemedView style={styles.stepContainer}>
<ThemedText type="subtitle">Step 2: Explore</ThemedText>
<ThemedText>
Tap the Explore tab to learn more about what's included in this starter app.
</ThemedText>
</ThemedView>
<ThemedView style={styles.stepContainer}>
<ThemedText type="subtitle">Step 3: Get a fresh start</ThemedText>
<ThemedText>
When you're ready, run{' '}
<ThemedText type="defaultSemiBold">npm run reset-project</ThemedText> to get a fresh{' '}
<ThemedText type="defaultSemiBold">app</ThemedText> directory. This will move the current{' '}
<ThemedText type="defaultSemiBold">app</ThemedText> to{' '}
<ThemedText type="defaultSemiBold">app-example</ThemedText>.
</ThemedText>
</ThemedView>
</ParallaxScrollView>
);
}
const styles = StyleSheet.create({
titleContainer: {
flexDirection: 'row',
alignItems: 'center',
gap: 8,
},
stepContainer: {
gap: 8,
marginBottom: 8,
},
reactLogo: {
height: 178,
width: 290,
bottom: 0,
left: 0,
position: 'absolute',
},
});
When using react-native-axios, you might face SSL pinning issues. The GitHub issue provides guidance on using React Native SSL pinning with the Axios library.
using with react-native-fetch ,react-native-fs , react-native-ssl-pinning
const handleRequest = async () => {
const certificatePath = RNFS.DocumentDirectoryPath + '/device_cert.pem';
const keyPath = RNFS.DocumentDirectoryPath + '/device_cert_private_key.pem';
const registrationId = 'your_registration_id_here';
const scopeId = 'your_scope_id_here';
try {
const cert = await RNFS.readFile(certificatePath, 'utf8');
const key = await RNFS.readFile(keyPath, 'utf8');
const response = await fetch(`https://global.azure-devices-provisioning.net/${scopeId}/registrations/${registrationId}/register?api-version=2021-06-01`, {
method: 'PUT',
body: JSON.stringify({ registrationId: registrationId }),
headers: {
'Content-Type': 'application/json',
'Content-Encoding': 'utf-8',
},
});
// Handle response
const json = await response.json();
console.log('Response:', json);
} catch (error) {
console.error('Request failed', error);
}
};
useEffect(() => {
handleRequest();
}, []);
return (
<View style={styles.container}>
<Text>Check console for results</Text>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
});
Recognized by Microsoft Azure Collective
3