This repository belongs how you can add ssl certification spinning into your react native android / ios app.

Getting Started

Note: A React Native library for managing SSL certificate pinning and handling secure network requests. This ensures enhanced security by preventing man-in-the-middle (MITM) attacks. React Native app needs SSL Spinning for access the api/server which are having SSL certification.

Step 1: Get your SSL Certification Key

First, you will need to go SSL Labs SSL Test for getting your ssl certification key. Enter your domain in search and you will get a page like the below snippet. Then click Download Server Certificate. You will get the downloaded certificate key file.

Step 2: Add Certificate in your application

Go to Folder android -> app -> src -> main. Make a folder inside main folder by name assets. The make a file by name mycert.cer. And copy your certificate key form the downloaded file and paste it into mycert.cer file. Note: just copy full context and paste .

Install ssl spinning library

npm i react-native-ssl-pinning

Request Snippet: Make POST Request

import { fetch } from 'react-native-ssl-pinning'; // SSL Spinning Library

// POST request snippets
  const handleLogin = async () => {
    if (email.trim() === '' || password.trim() === '') {
      Alert.alert('Error', 'Please fill in both fields.');
      return;
    }

    const emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
    if (!emailRegex.test(email)) {
      Alert.alert('Error', 'Please enter a valid email address.');
      return;
    }

    setIsLoading(true);

    // your payload (passing parameters)
    const payLoad = {
      username: email,
      password,
    };

    try {
      // using fetch from ssl-spinning library
      const response = await fetch('https://yourdomain.com/', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(payLoad),
        sslPinning: {
          certs: ['mycert'], // SSL certificate file
        },
      });

      const data = await response.json();
      if (data.code == 200) { // check your json response
        setIsLoading(false);
        navigation.navigate('Dashboard');
      } else {
        setIsLoading(false);
        Alert.alert('Error', 'Invalid Credentials.' || 'Login failed.');
      }
    } catch (error) {
      setIsLoading(false);
      console.log("login error:", error)
      Alert.alert('Error', 'Certification Expired.');
    }
  };

Request Snippet: Make GET Request

// GET request snippets
  const fetchShows = async () => {
    if (startDate > endDate) {
      setDateError('Start date must be less than or equal to end date.');
      return;
    }
    setDateError('');
    setLoading(true);
    try {
      const apiUrl = "https://yourdomain.com/";
      const response = await fetch(apiUrl, {
        method: 'GET',
        sslPinning: {
          certs: ['mycert'], // SSL certificate file
        },
      });
      const json = await response.json();

      setData(json?.data?.result);
    } catch (error) {
      console.error(error);
      setError('Error fetching data.');
    } finally {
      setLoading(false);
    }
  };

Now what?

• Make a star on this repository or fork ! Keep loving Javascript !