CEO & Co-Founder of Cosmic JS
You will be required to install node.js and npm before starting. Make sure you already have them installed on your machine.
In this repository, we are going to build an app that would demonstrate everything that is included in basic authentication app.
To create the bucket, login to Cosmic JS 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 JS 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.
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 JS. 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
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.
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.
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.
Original article published on Cosmic JS. Cosmic JS helps your team build apps faster by providing powerful tools for app development and management.
Create your free account to unlock your custom reading experience.