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

Welcome to my 3rd tutorial about how to implement login functionality using React-Native, NodeJS and MySQL, in this article we will go through creating our own config variables in Heroku to then use these in our API when we have published it, go over MySQL connection pooling and then start with integrating an empty route with a react-native project.

Ok so the first step is to use the “createPool” method of the “mysql” package just below all of the “require” statements. A connection pool is basically a cache of database connections which is maintained within the databases memory in order for the connections to be reused upon future requests (if anybody has a better explanation than that feel free to share in the comments).

mysql.createPool({
});

Inside of this are keywords such as “user”, “password”, “database” and “host” which will work together with the data that was generated from the “clearDB” resource we added to our Heroku in a previous tutorial.

So now what we need to do is login to Heroku go to the app dashboard and find the app you made using Heroku in the previous article once on the dashboard you will need to click on the “settings” tab and click “reveal config vars” this will show you the “clearDB” url as well as text boxes to allow you to enter your own config vars.

Now what you need to do is create 4 config vars one each for “user”,”password”,”database” and “host”. Make sure you make the keys all caps.

So the “user” will be the letters and numbers after the “://” but before the “:”.

The password is after the “:” but before the “@”.

The host is after the “@” but before the “/”

The database name is after the “/” and before the final “?”

So you should end up with something like the below but obviously the values should be your unique values.

Since we have now created our config values on Heroku we can now reference them in our project as when we come to publishing our project Heroku will recognise the config value keys and use those values in the project instead, it saves us having to hardcode our senstive information into the project.

mysql.createPool({
user:process.env.USER,
password:process.env.PASSWORD,
database:process.env.DATABASE,
host:process.env.HOST,
connectionLimit:10
});

So our config object should now look like the above (depending on what key you gave the config variable in Heroku)

I have also added a connection limit of 10, so the max amount of connections that can be created at 1 time is 10.

Deploying to Heroku

Ok so now to deploy our app to Heroku, the first thing to do (if you haven’t already) is to go to the below link download and install the Heroku command line interface. You will need to download git also if you haven’t already

The Heroku CLI

The next step is to create a git repository in the root of the project using the command below.

git init

Now we have created a repository we can now add and commit our code to Heroku.

git add .
git commit -m "My First project commit"

Now since we have already created a heroku application we can enter the below command which will set the remote to the local project. You will just need to ensure that you replace “testusersignin” with the name of your application.

heroku git:remote -a testusersignin

The next thing to do is to enter the command below to deploy our application to Heroku which will “push” our local code to our remote repository

git push heroku master

A bunch of operations will happen in the terminal at this point keep note of the url that appears at the bottom of the terminal.

NOTE — FIXING BCRYPT ISSUE

One thing I have forgotten to mention is that if you have bcrypt installed and then try to deploy to heroku a weird error always happens to me when the application has been deployed with the message “invalid ELF Header”. The way i have gotten around this is to first uninstall bcrypt.

npm uninstall bcrypt

Now remove/comment out any reference to bcrypt like.

const bcrypt = require('bcrypt');

Now that you have removed this we will need to create a “.gitignore” file using the command.

touch .gitignore

Inside of this file enter

/node_modules

The purpose of the “gitignore” is to make sure that these specific files are not tracked by the git repository so we don’t want node_modules being tracked by it.

Now that we have added the “.gitignore” file we now want to enter

git add .

and

git commit -m "Adding gitignore file"

and finally run

git push heroku master

Now go to the Heroku link I told you to keep hold of when you first deployed the code to Heroku it should end in something like “herokuapp.com”

Since we set a default route we will see the response from the API by just going to the home API link.

We now need to install bcrypt again as we don’t have to worry about the issue happening again now.

npm install bcrypt

Now you just need need to run git add, git commit and git push again to make sure you are at the same stage as I am. Now after you have installed and pushed the code to the remote url again your app should now work with bcrypt installed :)

Ok so now we have done that we will build a template for our “signup” route which will be a post method as we are inserting data into the database and taking information from the request body and parsing it.

Write the below in your project underneath the default route.

app.post('/signup',function(req,res){
res.send({
message:'Signup method here!'
});
});

The route is “/signup” and has a function callback which the app runs when a request has been made to the specified route. For now a response is just sent.

Now that you have added this do the usual git add, commit and push.

Once this has been completed successfully you can test it postman by setting the request to type “POST” and set the body type to json with some test data in. As you can see from the screenshot the API responded in postman with the message I gave it.

I feel like we have been neglecting our react-native app a little bit… Lets give it some attention and love, since we have published our API we will want our app to use it from now so in the root of the react-native project create a folder called API. This folder will contain a file that will contain references to the API urls.

Create a file within the API folder called “calls”.

Inside of this file enter the below code.

module.exports = {
signup:''
}

We are using module.exports here as if we make an API we would make more than just signup/signin calls but since that is what we are focusing on for these tutorials I thought I would use it anyway, it is just a way of exporting the data from a file to use in another file so your API url for signup would go where the ‘’ is . We would import the file using something like “import call from calls” and then use it in the code like calls.signup. It is a cleaner way to write the code then having hardcoded links in the axios calls.

We can now import this file into the “signup.js” file using the below.

import calls from './API/calls';

We now need to import axios to be able to make post requests to the API.

import axios from 'axios';

Our next step is to create a template method for a user signing up using axios.

Signup = () =>{
axios({
method:'POST',
url:calls.signup
})
}

That concludes part 3 of my signup series. I am hoping for maybe 1 or 2 articles and that will be it thank you for reading this article all the way through and I hope you found it useful don’t forget to like and share!

Check out my blog — https://cowboycode.co.uk/