Making a Login app using React-native and Hasura without Redux.
I wanted to build an application with login and sign up feature, I ended up with some of the tutorials which use Redux for state management.
Since I had no prior experience of using Redux, it became quite a task for me. So I decided to ditch Redux and use local state of react-native for this example and now.
Q: Is Redux better than local state
Both have their benefits and demerits, so can’t say which is better. But yes, implementing Redux is bit lengthy.
For any small need in Redux, you need to touch store, reducers. Sometimes you don’t actually need it. It depends on you, whether you want to do it Redux way or local state.
But local state is definitely easier.
Q: What back end code do I need to write
Nothing, really nothing.
Don’t be surprised, Hasura comes in play here and provides many pre-built APIs with their clusters, one of them is AUTH API which lets you manage login/signup process with following ways:
- Conventional username and password method.
- Various social platform logins
- OTP login with help of SMS providers
It provides feature to manage the roles assigned to each user, which can be implemented as giving write access or some other permissions based on his role.
Q: How to get this Hasura feature
Just follow the following steps and you will have a free cluster with some very cool APIs:
(I am mentioning steps for Linux machines, if you want to know the steps for other OS such as Windows or Mac, have a look at the Hasura docs: https://docs.hasura.io/0.15/manual/getting-started/index.html, big shout out for Hasura Team for having such elaborative docs.)
- Get the hasura cli: Open your linux shell and run the following command:
curl -L https://hasura.io/install.sh | bash2. Login: Enter the following command and it will open a browser for you, where you can login with various platforms too:
hasura login
Just use any social login such as Google or GitHub to login.
Then Click on Allow button, to allow hasura to manage your cluster information.
Now return to the terminal and execute following commands
# Lets setup one of many quickstarts provided by Hasura
$ hasura quickstart hasura/hello-nodejs-express --type free
$ cd hello-nodejs-express
$ git add .
$ git commit -m "First Commit"
$ git push hasura masterYou are done, you have successfully created a back end for your project.
Creating the front end using React-native
I am going to use fetch API for making the requests to backend. If you want to see how its implemented in react-native, you can have a look at my previous article(https://codeburst.io/integrating-react-native-apps-with-back-end-code-using-fetch-api-8aeb83dfb428)
I will be creating async functions in my class App to get the details:
Signup = async () => {
fetch('https://auth.'+cluster.name+'.hasura-app.io/v1/signup', {
method: 'post',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
"provider": "username",
"data": {
"username": this.state.username,
"password": this.state.password
}
})
}).then((response) => response.json())
.then((res) => {
if(typeof(res.message) != "undefined"){
Alert.alert("Error signing up", "Error: "+ res.message);}
else{
this.setState({ auth_token: res.auth_token });
Alert.alert("Success", "You have succesfully signed up");
}
}).catch((error) => {
console.error(error);
});
}
Similarly a login process can be written, the code can be generated using the hasura api-console. To do so just run hasura api-console in your terminal, it will open a page as follows, in which you can navigate to Auth section to get appropriate code.
We could include a TextInput value for getting the value of user name and email,
Also the auth_token can be checked while rendering, so as to ensure the user logs in once, and next time he/she opens the app, they are already logged in.
Also create a page Home where you would like to navigate after successfull login/signup.
Here is the complete code of App.js file:
import React, { Component } from 'react'
import { View, Text, Alert, Button, TextInput, TouchableOpacity } from 'react-native';
import Home from './Home';
export default class App extends Component{
state = {
username: '',
password: '',
auth_token: ''
}Signup = async () => {
fetch('https://auth.clustername+.hasura-app.io/v1/signup', {
method: 'post',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
"provider": "username",
"data": {
"username": this.state.username,
"password": this.state.password
}
})
}).then((response) => response.json())
.then((res) => {
if(typeof(res.message) != "undefined"){
Alert.alert("Error signing up", "Error: "+ res.message);}
else{
this.setState({ auth_token: res.auth_token });
Alert.alert("Success", "You have succesfully signed up");
}
}).catch((error) => {
console.error(error);
});
}
Login = async () => {
fetch('https://auth.clustername.hasura-app.io/v1/login', {
method: 'post',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
"provider": "username",
"data": {
"username": this.state.username,
"password": this.state.password
}
})
}).then((response) => response.json())
.then((res) => {
if(typeof(res.message) != "undefined"){
Alert.alert("Error", "Error: "+ res.message);
}
else{
this.setState({ auth_token: res.auth_token });
Alert.alert("Welcome", " You have succesfully logged in");
}
}).catch((error) => {
console.error(error);
});
}
render(){
//If auth token is not present
if(this.state.auth_token==''){
return(
<View>
<TextInput
placeholder="Enter User name"
onChangeText={ TextInputValue =>
this.setState({username : TextInputValue }) }
underlineColorAndroid='transparent'
style={
{
textAlign: 'center',
width: '90%',
marginBottom: 7,
height: 40,
borderRadius: 5 ,
fontSize: 20,
}
}
/>
<TextInput
placeholder="Enter password"
onChangeText={ TextInputValue =>
this.setState({password: TextInputValue }) }
underlineColorAndroid='transparent'
secureTextEntry={true}
style={
{
textAlign: 'center',
width: '90%',
marginBottom: 7,
height: 40,
borderRadius: 5 ,
fontSize: 20,
}
}
/>
<TouchableOpacity onPress={this.Signup.bind(this)}>
<View style={{height: 50, backgroundColor:
'purple',justifyContent: 'center',
alignItems: 'center',}}>
<Text style={{
fontSize: 20,
color: '#FFFFFF',
}}>
Signup</Text>
</View>
</TouchableOpacity>
<TouchableOpacity onPress={this.Login.bind(this)}>
<View style={{height: 50, backgroundColor:
'purple',justifyContent: 'center',
alignItems: 'center',}}>
<Text style={{
fontSize: 20,
color: '#FFFFFF',
}}>
Login </Text>
</View>
</TouchableOpacity>
</View>
);
}/* Checking if the auth token is not empty directly sending the user to Home screen */
else{
return(
<Home />
);
}}
}
For the above code to work you must have a Home.js file in your app directory
Just compile the code and you have a basic signup .
Since this article is already quite lengthy. I would like to stop on this abstract idea, however if you have any queries do respond, I will try to answer them if they are in my reach.
Happy Developing :)
Divyanshu Kumar
