How to build a React Auth App using React, Cosmic and Node

Community Articles
Community Articles How to build a React Auth App using React, Cosmic and Node

TL;DR

Download the GitHub repo.
Check out the demo.

Prerequisites

Environment:

You will be required to install node.js and npm before starting. Make sure you already have them installed on your machine.


Technology Stack

  1. Cosmic: Cosmic is used for API management.
  2. ReactJS: ReactJS is used to connect frontend app with Cosmic. React v16 is used which is based on React Fiber and it makes the app faster and lighter than React v15.
  3. NodeJS: NodeJS is used handle endpoints such as communicating with Cosmic using private settings & sending emails using gmail SMTP client service.
  4. NextJS: NextJS v4 is used to make the app server-side rendered.

Getting Started

In this repository, we are going to build an app that would demonstrate everything that is included in basic authentication app.


Setup Bucket:

To create the bucket, login to Cosmic and click on 'Add New Bucket' .


Select 'Start from scratch'


Import Bucket Data:

Download this React Auth App Bucket JSON file and go to your Cosmic Dashboard. Now on the sidebar, go to Settings -> Import / Export Data  and click on 'Add Import File'  and choose the downloaded file. It will import all the Object Types and required data.


Now let's get started with the actual application.


Cosmic Configuration

After downloading the react-auth-app repository, do npm install in the terminal. After installing all the dependencies, we need to setup the cofiguration for Cosmic. For that, we will clone .env.example and rename it as .env and setup all the variables in it with our bucket configuration.

.env would look like the file listed below


Private Settings

You need to add a single entry for private-settings which would include the following:

Title: some dummy test

Email Username: your gmail account email.

Email Password: your gmail account password.

FROM EMAIL: your email from which the notification emails would be sent.

Note: We are using SMTP gmail client to send emails.


Now you are all setup to run the app.

Workflow

Pages:

  1. Login - This page is used to login the user
    1. Route: /
    2. Failures
      1. This would fail if either email or password is incorrect.
      2. This would fail if the account is not verified.
    3. Success
      1. This would succeed only if the credentials are correct and the account is activated.
  2. Signup - This page is used to register the user and the verification email is sent to respective email
    1. Route: /signup
  3. Profile - This page is used to list profile information
    1. Route: /profile
  4. Edit Profile - This page is used to edit profile information
    1. Route: /profile/edit
  5. Edit Password - This page is used to edit account password
    1. Route: /profile/edit/password
  6. Forgot Password - This page is used to send an OTP for resetting password to an email
    1. Route: /forgotPassword
  7. Reset Password - This page is used to reset password with an OTP sent to a respective email
    1. Route: /resetPassword
  8. Activate Account: This page is used to activate account
    1. Route: /activateAccount


Details:

Login:


Signup:

Profile:

Edit Profile:

Edit Password:

Forgot Password:

Reset Password:

Activate Account:


Security

This app used MD5 encryption to encrypt the password and match the encrypted password while logging in. To maintain authenticated scenarios, we used JWT tokenization to tokenize the information and store them into cookies. 


Conclusion

This is a basic app covering all basic features of authentication that were listed above too. We also followed security measures like encryption of information and passwords. I hope you like the tutorial to get started with this app and find it useful. Cheers. Happy Coding.

You may also like


This application was mainly inspired by Offerup, Letgo, and Craigslist. Like Craigslist, LetGo allows you to buy and sell items locally, which means you don’t have to deal with the hassles of shipping like you would on eBay or Amazon. With 30 million users, it is more popular than OfferUp...
Website built using the Next.js Website Boilerplate. Fully responsive down to mobile, SEO ready, includes a contact form and full site search.
Cosmic lets you build one-to-one as well as one-to-many Object Relationships within your Bucket Dashboard. To help you and your team manage content more seamlessly, you can now see your Connected Objects located on the Object’s Edit page in the Dashboard.
Cosmic makes it easy to manage content for your Vue.js applications. In this blog we'll quickstart a Vue.js RPG Adventure Game using the Cosmic CLI. Our game, "Enter The Cosmos", is a turn-based, RPG style game built using Vue.js, Node.js and Cosmic.
Thank you to everyone who joined us for our Halloween edition of our Wednesday Webinar series. In this presentation, we discussed making localization for websites less spooky using Gatsby and Cosmic.
The Cosmic team was honored to to speak at Toyota Connected for the Ember.js Dallas Meetup this week. Cosmic co-founder Tony Spiro presented "Building Modern Apps with API Services" to illustrate the growing trend of offloading core dev tasks onto best-in-class API services.

Get Started with Cosmic

Build personal projects for free. Add your team at unbeatable prices.
Start Building Talk to Sales