Question

Technologies:

javascript

php

react-native

Tolerim

3 hours ago

What is the process for converting a PHP Curl request into JavaScript for use in React Native?

How can I convert the following PHP function to a fetch command in React Native?

Here is the PHP function:

public function loginAction(Request $request) {
    $session = new Session();
    $url = 'https:URLXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX';
    $form = $this->createFormBuilder()
      ->add('username', TextType::class, array('required' => true))
      ->add('password', PasswordType::class, array('required' => true))
      ->getForm();
    $form->handleRequest($request);
    if ($form->isSubmitted() && $form->isValid()) {
      $data = array(
       'VRTS25199769848485696858' => md5($form['username']->getData()),
       'ATTS9364664615902560899' => md5($form['password']->getData()),
       'ATTSV400112542155GRT558' => 'VDFIIO4585DDD55S8D465GFSWR556SD5G4DSF54R5E6EWR84'
      );
      $ch = curl_init($url);

      $postString = httpbuildquery($data, '', '&');
      curlsetopt($ch, CURLOPTPOST, 1);
      curlsetopt($ch, CURLOPTPOSTFIELDS, $postString);
      curlsetopt($ch, CURLOPTRETURNTRANSFER, true);
      $response = jsondecode(curlexec($ch));
      curl_close($ch);
      if ($response[0] == 'success' and $response[1] == '5188e47b2968de6cb2e7390b14aa23a0') {
        $session->set('id', $response[2]);
        $session->set('name', $response[3]);
        return $this->redirectToRoute('front_homepage');
      } else {
        $session->getFlashBag()->add('error', 'Invalid credentials !');
      }
    }
    return $this->render('FrontBundle:Default:login.html.twig', array('form' => $form->createView()));
  }

Here is the React Native code I have tried which gives me "nope" as the response:

const login = () => {
        console.log(user + password)
        // fetch
        var form = new FormData();

        form.append('VRTS25199769848485696858', mb5(user));
        form.append('ATTS9364664615902560899', mb5(password));
        form.append('ATTSV400112542155GRT558', 'VDFIIO4585DDD55S8D465GFSWR556SD5G4DSF54R5E6EWR84');

        fetch('https:URLXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX', {
            method: 'POST',
            body: form,

        })
            .then((response) => response.json())
            .then((response) => console.log(response))
            .then((responseJson) => {
                if (responseJson == "success") {
                    // redirect to profile page

                    navigation.navigate("Profile", { status: user });

                } else {
                    alert("Wrong Login Details");
                }
            })
            .catch((error) => {
                console.error(error);
            });
    }

Answers(1)

Accepted Answer

It looks like the issue with the React Native code is that it is not properly handling the response from the server. The original PHP code is using cURL to make a request to the server and then checking the response for a "success" message and a specific authentication token. If the response meets those conditions, it redirects the user to the homepage. The React Native code is making a similar request, but it is assuming that the server response will be a simple string of "success" if the login is successful. However, the response from the server is actually a JSON object that contains multiple pieces of information, including the "success" message and the authentication token. To fix this, you need to update the React Native code to properly handle the JSON response from the server. Here's an updated version of the code with comments explaining each step:

const login = () => {
  console.log(user + password);

  // Create a new FormData object and append the login data
  var form = new FormData();
  form.append("VRTS25199769848485696858", mb5(user));
  form.append("ATTS9364664615902560899", mb5(password));
  form.append(
    "ATTSV400112542155GRT558",
    "VDFIIO4585DDD55S8D465GFSWR556SD5G4DSF54R5E6EWR84"
  );

  // Make a POST request to the server with the login data
  fetch("https:URLXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX", {
    method: "POST",
    body: form,
  })
    .then((response) => response.json()) // Parse the response as JSON
    .then((responseJson) => {
      // Check if the response contains a "success" message and the correct authentication token
      if (
        responseJson[0] === "success" &&
        responseJson[1] === "5188e47b2968de6cb2e7390b14aa23a0"
      ) {
        // Redirect to the profile page with the user's status
        navigation.navigate("Profile", { status: user });
      } else {
        // Show an alert message if the login failed
        alert("Wrong Login Details");
      }
    })
    .catch((error) => {
      console.error(error);
    });
};