I am trying to create a login that uses PHP/MySQL authentication for my app. Someone actually had the exact same post that I am having. How can I use react-native with php with fetch return data is always null I tried implementing the recommended changes because I had not heard about php://input until today but it is still returning NULL. I wanted to see if maybe the handshake was 'hiccuping' so I configured a test table built in MySQL to store the raw data that is returned to see if the server is even receiving the information, but the table column is always returning NULL after each insert. I'm trying to pass JSON data to the PHP script but I guess it doesn't like it maybe? Does anyone have any ideas?
// My code for my login.js file
import React from "react";
import { StyleSheet, ScrollView, KeyboardAvoidingView, TouchableOpacity, AsyncStorage, TextInput, Button, View, Text } from 'react-native';
import { createStackNavigator, createAppContainer } from 'react-navigation';
// internal includes...
import styles from '../styles/styles.js'; // styles is the only one lowercase
class Login extends React.Component {
constructor(props) {
super(props);
this.state = {
username: '',
password: '',
}
}
// check if the user is already logged in...
componentDidMount() {
this._loadInitialState().done();
}
_loadInitialState = async () => {
var value = await AsyncStorage.getItem('user');
if (value !== null) {
this.props.navigation.navigate('Profile');
}
}
render() {
return (
<KeyboardAvoidingView behavior='padding' style={styles.wrapper}>
<View style={styles.container}>
<Text style={styles.header}> Login </Text>
<TextInput
style={styles.TextInput} placeholder='Username'
onChangeText={ (username) => this.setState({username}) }
underLineColorAndroid='transparent'
/>
<TextInput
style={styles.TextInput} placeholder='Password'
onChangeText={ (password) => this.setState({password}) }
underLineColorAndroid='transparent'
/>
<TouchableOpacity
style={styles.btn}
onPress={this.login}>
<Text> Log In </Text>
</TouchableOpacity>
</View>
</KeyboardAvoidingView>
);
}
login = () => {
// check if the username is being passed off properly...
//alert(this.state.username);
fetch('MYWEBSITELINK', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({
username: this.state.username,
password: this.state.password,
})
})
.then(function(response){ return response.json(); }) // transforms response into data that is readable for this app...
.then(function(data) {
console.log(data);
})
}
}
export default Login
// the php file that handles a login request
<?php
// Access MySQL login information file...
$path = $_SERVER['DOCUMENT_ROOT'];
$path .= "/live/configuration/mysqli.php";
require_once($path);
// set this in all mobile related files...
header('Content-Type: application/json');
$json = json_decode(file_get_contents('php://input'), true);
// create user record in the login table...
$query = "INSERT INTO test (data)
VALUES (?)";
$stmt = $mysqli->prepare($query);
$stmt->bind_param('s', $json);
$stmt->execute();
$stmt->close();
?>
Edit 1: I forgot to post an error/warning that I'm receiving which I think is related to my JSON format. "[Unhandled promise rejection: SyntaxError: JSON Parse error: Unexpected EOF]". Does anyone now any way to output the response I sent in the console so I can see if it needs reformatted? Thanks.