Full-Stack Authentication and Hosting (Nodejs, Reactjs, Heroku, Netlify)

Introduction

This article is a compilation of a series of articles I have written on authentication in the past. As a full-stack engineer, I do my best to bridge the gap between front-end and back-end engineers by creating contents like these. This compilation was created with absolute beginners in mind. Feel free to jump from one section to the other.

Jump To

• Introduction to Nodejs
• Building the Back-End with Nodejs
• Introduction to React-Bootstrap
• Building the Front-end with React
• Hosting the App
• Get all Resources and view preview
• Conclusion

Introduction to Nodejs

This is the part where I introduce you to Nodejs and show you how to create a server. It is entitled: Setting Up a Simple, Secure and Robust Node JS Server. Read full articele

Building the Back-End with Nodejs

This part of the compilation covers how to build the authentication back-end using Nodejs

1. Authentication with Nodejs and mongoDB - Part 1

2. Authentication with Nodejs and mongoDB - Part 2

3. Authentication with Nodejs and mongoDB - Part 3

4. Authentication with Nodejs and mongoDB - Part 4

5. Hosting a Nodejs and MongoDB App on Heroku

Introduction to React-Bootstrap

I use this section to introduce the bootstrap of react to you just so you are not confused on the code that we will be writing next. React-Bootstrap helps us to build applications faster with lesser code. Read full article here

Building the Front-end with React

Here, we consume the API endpoints we built from the back-end. We also protect routes that needs authentication. See the tutorials below:

1. React Authentication - Register

2. React Authentication - LOGIN

3. React Authentication - Protecting and Accessing Routes/Endpoints

Hosting the App

There was no tutorial dedicated for this part because I assumed there are so many tutorial out there already. I will add this as a bonus to this compilation. There are a lot of hosting sites that offer you free hosting like Vercel, Netlify and Heroku. I will be using Netlify for the purpose of this tutorial. It will take you a few steps. Just follow along

• Navigate to https://app.netlify.com/signup and sign up

• Follow the process until you arrive at your dashboard

• Scroll down a bit and you will get to this screen

• You can drag you project folder into the box and your hosting will be done or you can connect it to your git repo. The advantage of connecting to git is for continuous deployment. You will not have to do these step again in case you have a reason to make changes to your app in the future.

• So click on the button New Site from Git

• Choose the git platform you want and grant authorization to sync it to your netlify app

• Choose the repo you want to sync

• Click on the Deploy Site button in the page that you are redirected to

• Wait for your site to be published. That should take less than 2 minutes. You can now click on the link you see to access your site

Notice the URL of your site at the top of the page. It is a random URL given to you by Netlify.

• You can change it by clicking on the Site Settings button

• In the Site details section, click on the change site name button

• Change the Name and Click Save

Notice that the site name has been change. See mine below:

You are likely to face the issue of redirecting to another page after hosting. The error may look like the image below:

Fixing the issue

• Go into the public folder of your react project

• Create a file and name it _redirects

• Enter the following content
  

    /*  /index.html 200

• Save and push back to the git platform where your app is hosted

• Wait a while for you app to be automatically published and you should be all good

The error is gone

Congratulations!!! You are now a full-stack engineer...

Get all Resources and see preview

1. a. Nodejs Code can be found here
   b. Backend is live here

2. a. Reactjs Code can be found here
   b. Front-end is live here

Conclusion

This tutorial set out and was able to teach us how to build a full stack authentication system using JavaScript (Nodejs for back-end and Reactjs for front-end). We also saw how to host our application on Netlify and fix redirect issue.

I will encourage you to start building applications that solve real world problems. If you have started already, then please don't stop. Nothing is stopping you now.

Comments

[Karinanunes]

Hi Njoku, I follow your article how ever I believe with React V6 I cannot use switch and other method you implemented. Could you help me understand what I need to change in the files AuthComponent and ProtectedRoutes so my path '/auth' is protected. I have done several research and I cannot implement what other says with your code. Thank you

[NJOKU SAMSON EBERE]

Switch has been changed to Routes in v6.

Check out this documentation: reactrouter.com/en/main/upgrading/v5

[Samuel Mashar]

Great article. But can you have another one handling redirection after logging in a simpler faster way by that i mean not redux after logging in it takes the user to a different place.

[Samuel Mashar]

if you have one already i'd be glad if you shared the link

[NJOKU SAMSON EBERE]

If I get your question correctly, then it is handled in dev.to/ebereplenty/react-authentic....

For example, to redirect to a landing page, you can just do the following:

    // redirect user to the landing page
    window.location.href = "/";

[NJOKU SAMSON EBERE]

This is the login code. Notice how I redirect to the auth page

github.com/EBEREGIT/react-auth/blo...