This is what we will be building. 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 : is used for API management. Cosmic JS Cosmic JS : ReactJS is used to connect frontend app with Cosmic JS. React v16 is used which is based on and it makes the app and than React v15. ReactJS React Fiber faster lighter : NodeJS is used handle endpoints such as communicating with Cosmic JS using private settings & sending emails using gmail SMTP client service. NodeJS : NextJS v4 is used to make the app server-side rendered. NextJS 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 and click on ‘Add New Bucket’ . Cosmic JS Select ‘Start from scratch’ Import Bucket Data: Download this file and go to your Cosmic JS Dashboard. Now on the sidebar, go to Settings -> Import / Export Data and click on and choose the downloaded file. It will import all the Object Types and required data. React Auth App Bucket JSON ‘Add Import File’ Now let’s get started with the actual application. Cosmic JS Configuration After downloading the , do in the terminal. After installing all the dependencies, we need to setup the cofiguration for Cosmic JS. For that, we will clone and rename it as and setup all the variables in it with our bucket configuration. react-auth-app repository npm install .env.example .env would look like the file listed below .env Private Settings You need to add a single entry for which would include the following: private-settings some dummy test Title: your gmail account email. Email Username: your gmail account password. Email Password: your email from which the notification emails would be sent. FROM EMAIL: We are using SMTP gmail client to send emails. Note: Now you are all setup to run the app. Workflow Pages: Login — This page is used to login the user Route: / Failures This would fail if either email or password is incorrect. This would fail if the account is not verified. Success This would succeed only if the credentials are correct and the account is activated. Signup — This page is used to register the user and the verification email is sent to respective email Route: /signup Profile — This page is used to list profile information Route: /profile Edit Profile — This page is used to edit profile information Route: /profile/edit Edit Password — This page is used to edit account password Route: /profile/edit/password Forgot Password — This page is used to send an OTP for resetting password to an email Route: /forgotPassword Reset Password — This page is used to reset password with an OTP sent to a respective email Route: /resetPassword Activate Account: This page is used to activate account Route: /activateAccount Login: Signup: Profile: Edit Profile: Edit Password: Forgot Password: Reset Password: Activate Account: **Security**This app used encryption to encrypt the password and match the encrypted password while logging in. To maintain authenticated scenarios, we used to tokenize the information and store them into cookies. MD5 JWT tokenization **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. published on . Cosmic JS helps your team build apps faster by providing powerful tools for app development and management. Original article Cosmic JS

How to build a content curation website with Vue and Cosmic JS

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

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

5 Essential Tools for Web Development Mastery

100 Days of AI Day 1: From Newsletter to Podcast, Leveraging AI for Audio Transformation

10 Threats to an Open API Ecosystem

10 Indications That You Should Invest in Automation Via APIs

10 Best Practices for Securing Your API

The Noonification: Getting Your API Into Production (10/28/2022)

5 Essential Tools for Web Development Mastery

100 Days of AI Day 1: From Newsletter to Podcast, Leveraging AI for Audio Transformation

10 Threats to an Open API Ecosystem

10 Indications That You Should Invest in Automation Via APIs

10 Best Practices for Securing Your API

The Noonification: Getting Your API Into Production (10/28/2022)

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps