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
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:
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 toWait 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
buttonIn the
Site details
section, click on thechange 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
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.
Top comments (6)
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
Switch
has been changed toRoutes
in v6.Check out this documentation: reactrouter.com/en/main/upgrading/v5
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.
if you have one already i'd be glad if you shared the link
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:
This is the login code. Notice how I redirect to the auth page
github.com/EBEREGIT/react-auth/blo...