OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

React Native App on Android Device POST Request Returns Network Request Failed

  • Thread starter Thread starter Keill VunStroke
  • Start date Start date
K

Keill VunStroke

Guest
I am testing authentication in a local home setup and just have a default app that has a login screen and if I click on my login button it sends a POST fetch request to a docker keycloak service I have set up on my PC. Currently I am sending only HTTP and not HTTPS.

This app during debug with a phone emulator through Android Studio and sending my request works. It also works through Postman. It also works when I run API Tester(similar to postman for mobile) app on my physical device. All of these return me a token.

The issue is when I create a release build of the app and install it on my phone which is also connected to the same network and I've put in the IP address of the PC running the docker keycloack service. Let's say my PC's local IP address is 192.168.1.150 and the port that is running the docker instance is 8080.

Here's the code snippet of how I am trying to do a POST fetch request to the docker keycloak service.

`

const loginHandler = async () => { const url = http://192.168.1.150:8080/realms/testrealm/protocol/openid-connect/token; const body = client_id=login-client&client_secret=SOME+RANDOM+CHARS&username=${encodeURIComponent(username)}&password=${encodeURIComponent(password)}&grant_type=password;

Code:
const timeoutPromise = new Promise((_, reject) =>
  setTimeout(() => reject(new Error('Request timed out')), 15000)
);

try {
  setMessage('');
  console.log('Perform login with:', username, password);
  console.log('URL FOR LOGGING:', url);
  console.log('BODY OF URL:', body);

  const fetchPromise = fetch(url, {
    method: 'POST',
    mode: 'cors',
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded',
    },
    body: body,
  });

  const response = await Promise.race([fetchPromise, timeoutPromise]);

  console.log('Response Status:', response.status);

  if (!response.ok) {
    const responseBody = await response.text();
    console.log("LOGIN FAILED", response.status, responseBody);
    setMessage(`Login failed with status ${response.status}: ${responseBody}`);
    setMessageColor('red');
    throw new Error(`Login failed | "LOGIN FAILED", ${response.status}, ${responseBody}, URL: ${url}`);
  }

  const data = await response.json();
  console.log('Login successful!:', data);
  setMessage('Login successful!');
  setMessageColor('green');
} catch (error) {
  console.error('Login error:', error);
  setMessage(`Login error: ${error.message}`);
  setMessageColor('red');
}

};

`

Tried going to AndroidManifest.xml and setting android:usesCleartextTraffic="true"

Setting mode of fetch to cors

Connecting physical phone to the PC through usb-c and use it as a debugging device to run the test app but still getting network request failed.
<p>I am testing authentication in a local home setup and just have a default app that has a login screen and if I click on my login button it sends a POST fetch request to a docker keycloak service I have set up on my PC. Currently I am sending only HTTP and not HTTPS.</p>
<p>This app during debug with a phone emulator through Android Studio and sending my request works. It also works through Postman. It also works when I run API Tester(similar to postman for mobile) app on my physical device. All of these return me a token.</p>
<p>The issue is when I create a release build of the app and install it on my phone which is also connected to the same network and I've put in the IP address of the PC running the docker keycloack service. Let's say my PC's local IP address is 192.168.1.150 and the port that is running the docker instance is 8080.</p>
<p>Here's the code snippet of how I am trying to do a POST fetch request to the docker keycloak service.</p>
<p>`</p>
<p>const loginHandler = async () => {
const url = <code>http://192.168.1.150:8080/realms/testrealm/protocol/openid-connect/token</code>;
const body = <code>client_id=login-client&client_secret=SOME+RANDOM+CHARS&username=${encodeURIComponent(username)}&password=${encodeURIComponent(password)}&grant_type=password</code>;</p>
<pre><code>const timeoutPromise = new Promise((_, reject) =>
setTimeout(() => reject(new Error('Request timed out')), 15000)
);

try {
setMessage('');
console.log('Perform login with:', username, password);
console.log('URL FOR LOGGING:', url);
console.log('BODY OF URL:', body);

const fetchPromise = fetch(url, {
method: 'POST',
mode: 'cors',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
body: body,
});

const response = await Promise.race([fetchPromise, timeoutPromise]);

console.log('Response Status:', response.status);

if (!response.ok) {
const responseBody = await response.text();
console.log("LOGIN FAILED", response.status, responseBody);
setMessage(`Login failed with status ${response.status}: ${responseBody}`);
setMessageColor('red');
throw new Error(`Login failed | "LOGIN FAILED", ${response.status}, ${responseBody}, URL: ${url}`);
}

const data = await response.json();
console.log('Login successful!:', data);
setMessage('Login successful!');
setMessageColor('green');
} catch (error) {
console.error('Login error:', error);
setMessage(`Login error: ${error.message}`);
setMessageColor('red');
}
</code></pre>
<p>};</p>
<p>`</p>
<p>Tried going to AndroidManifest.xml and setting android:usesCleartextTraffic="true"</p>
<p>Setting mode of fetch to cors</p>
<p>Connecting physical phone to the PC through usb-c and use it as a debugging device to run the test app but still getting network request failed.</p>
Continue reading...
 

Latest posts

B
Replies
0
Views
1
Blundering Ecologist
B
Top