Basic API Login Authentication with React-Native - react-native

Question

I need to make basic API login authentication with email and password, but I didn't find good working examples. I need help...
1- It should make a POST request to URL of the base
2- The email and password needs to be as variables like "...this.state.email/this.state.password" (something like that) so then I can set them in the input fields like "...this.handleEmail/.thishandlePassword" (something like that I think)
3- I need a log in the console or response from the api for success or fail authentication
4- Need to show error if the fields are empty or there is no user with this email or password
class LoginScreen extends Component {
constructor(){
super();
this.state = {
email: '',
password: '',
result: false,
}
}
_userLogin() {
let email = this.state.username;
let password = this.state.password;
if (email && password) {
fetch("https://URL/api/login", {
method: "POST",
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
email: email,
password: password,
})
})
.then((response) => response.json())
.then((responseData) => {
console.log(responseData),
this._onValueChange(STORAGE_KEY, responseData.id_token)
})
.done();
renderResults();
}
}
renderResults = () => {
if(responseData){
this.setState({
result: true
})
}
}
handleEmail = (text) => {
this.setState({ email: text })
}
handlePassword = (text) => {
this.setState({ password: text })
}
render() {
return (
<Container style={styles.container}>
<StatusBar translucent backgroundColor="transparent"/>
<Content>
<View style={styles.imageContainer}>
<Image style={styles.imageWave} source={require("./pictures/Group723.png")}/>
<Text style={styles.headerTextContainer}>
<Text style={styles.boldHeaderText}>Hotel </Text>
<Text style={styles.thinHeaderText}>Maids</Text>
</Text>
</View>
<Text style={styles.loginThinText}>Log In</Text>
<CardView
cardElevation={3}
cardMaxElevation={4}
cornerRadius={15}
style={{
marginTop: 1,
width: 322,
height: 104,
alignSelf: 'center',
}}>
<View style={styles.textAreaLogin}>
{this.state.result ? <View></View> : <View>
<TextInput
keyboardType="email-address"
style={styles.textAreaEmail}
placeholderTextColor="#C8C8C8"
placeholder="Username-HK"
onChange={this.handleEmail}
/>
<TextInput
secureTextEntry={true}
style={styles.textAreaPassword}
placeholderTextColor="#C8C8C8"
placeholder="Password-HK"
onChange={this.handlePassword}
/>
<Button onPress={() => {this._userLogin(); this.props.navigation.navigate(IntroScreen);}}>LOGIN</Button>
</View>}
</View>
</CardView>

Answer 1

Assuming you're connected to a backend that's sending you the appropriate responses
function LoginScreen(props) {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const onChangeEmail = (text) => setEmail(text);
const onChangePassword = (text) => setPassword(text);
const handleSubmit = () => {
fetch('https://reactnative.dev/movies.json')
.then((response) => response.json())
.then((json) => {
// You can navigate here as well
navigation.navigate('SomeScreen');
return json.movies;
})
.catch((error) => {
console.error(error);
});
};
return (
<View>
<TextInput value={email} onChangeText={onChangeEmail} />
<TextInput
value={password}
onChangeText={onChangePassword}
autoCompleteType="password"
textContentType="password"
secureTextEntry
/>
<TouchableOpacity onPress={handleSubmit}>
<Text>Log In</Text>
</TouchableOpacity>
</View>
);
}