How to implement login functionality using React-Native, NodeJS and MySQL — Part 1

I have implemented login functionality for one of my personal projects so I thought it would be cool to do an article on it, letsss go!

NOTE: I will be using Heroku to setup the api so you will need to create a Heroku account, also, you will also need MySQL workbench to be able manage the database we will be using.

Cloud Application Platform | Heroku

MySQL :: MySQL Workbench

Our first step is to create a react native project and open this project using a code editor, I usually use Visual Studio code.

react-native init usersiginproject

Now in your code editor terminal run the below command to create 2 files that we will be using in the project.

touch login.js signup.js

We will now need to download a few packages for our react-native project including react-navigation (a few other packages that are dependencies to react-navigation), axios and async storage.

npm install @react-native-async-storage/async-storage axios @react-navigation/native react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

Once all of these packages have installed we need to install the pods for these packages, use the command below from the root of your project.

cd ios && pod install

Once they have installed enter

cd ..

To get back to the root of the project.

Now you may want to close the metro bundler and restart your simulator (if you already ran it) to ensure the packages didn’t cause any unexpected errors, I usually use the iOS simulator and below is how to run it.

cd ios && pod install

The next step is to build a very simple signup page, I have used inline styles for now, in another part of the tutorial I may do a clean up section where we put all inline styles into their own files but for now I will leave it as is. Below is how I have setup my signup.js file.

import React from 'react';
import { Text, View, TouchableOpacity, TextInput } from 'react-native';
class Signup extends React.Component {
state = {
email: '',
password: ''
}
render() {
const { email, password } = this.state;
return (
<View style={{ height: '100%', backgroundColor: 'white' }}>
<View style={{ flexDirection: 'row', justifyContent: 'center', marginTop: 50 }}>
<Text style={{width:80}}>Email:</Text>
<TextInput autoFocus value={email} style={{borderColor:'black',borderBottomWidth:1,width:100}} />
</View>
<View style={{ flexDirection: 'row', justifyContent: 'center', marginTop: 50 }}>
<Text style={{width:80}}>Password:</Text>
<TextInput value={password} style={{borderColor:'black',borderBottomWidth:1,width:100}} />
</View>
<View style={{marginTop:15}}>
<TouchableOpacity style={{backgroundColor:'#42C0FB'}}>
<Text style={{textAlign:'center',padding:15,fontSize:20,color:'white'}}>Signup</Text>
</TouchableOpacity>
</View>
</View>
)
}
}
export default Signup;

With 2 pieces of state “email” and “password”. In addition, I also edited the App.js file to show this file on load of the app, this will change in another article but just copy how I have done my App.js for now.

/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* @format
* @flow strict-local
*/
import React from 'react';
import {
SafeAreaView,
StyleSheet,
ScrollView,
View,
Text,
StatusBar,
} from 'react-native';
import {
Header,
LearnMoreLinks,
Colors,
DebugInstructions,
ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';
import Signup from './signup';
class App extends React.Component {
render() {
return (
<View>
<Signup />
</View>
)
}
};
export default App;

Hopefully your app should look like the below.

Ok we are done with our react-native project for now. We need to now create a project that will be our API, when we have finished with our API we will then publish it to heroku and use these endpoints to communicate with the database we will create.

Find another location on your system and create a folder named “usersignprojectapi” navigate inside this folder using terminal and then enter the command below

npm init

This will create an npm project and a bunch of options will show in the terminal, just keep pressing enter until they have all gone.

Within the API we will now need a few packages. These include Express, JWT, body-parser, moment, bcrypt and jsonwebtoken.

npm install express jsonwebtoken bcrypt body-parser moment 

Express — web server

jsonwebtoken — for signing and validating jwts

bcrypt- store our password securely

body-parser — to pass data as json through a request/response

moment- parse date times

Apologies to leave it on a cliffhanger but this is as far as I am going for this tutorial part, I want to split this into 3 or 4 parts considering how many different parts are involved in it and I don’t want the article to get super long.

Thank you for reading this article and don’t forget to clap, share or respond to the article if you like!

Thank you :)

Check out my blog — https://cowboycode.co.uk/ (Let me know what you’d like to see on there)