<h2>TL;DR</h2><a href="https://github.com/cosmicjs/react-auth-app" rel="noopener noreferrer" target="_blank">Download the GitHub repo.</a> <a href="https://cosmicjs.com/apps/react-auth-app" rel="noopener noreferrer" target="_blank">Check out the demo.</a><h2>Prerequisites</h2>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<ol><li>Cosmic: Cosmic is used for API management. </li><li>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&nbsp;and lighter&nbsp;than React v15. </li><li>NodeJS: NodeJS is used handle endpoints such as communicating with Cosmic using private settings &amp; sending emails using gmail SMTP client service. </li><li>NextJS: NextJS v4 is used to make the app server-side rendered. </li></ol><h2>Getting Started</h2>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 <a href="http://cosmicjs.com/" rel="noopener noreferrer" target="_blank">Cosmic</a> and click on &#39;Add New Bucket&#39; .<img src="https://s3-us-west-2.amazonaws.com/cosmicjs/a89a6ce0-f9e1-11e7-b797-afc7d68fbdc7-Untitled.png" style="width: 756px;" class="fr-fic fr-dib"> Select &#39;Start from scratch&#39;<img src="https://s3-us-west-2.amazonaws.com/cosmicjs/cbef60b0-f9e1-11e7-aa4c-c74a07673003-Untitled1.png" style="width: 756px;" class="fr-fic fr-dib"> Import Bucket Data:Download this <a href="https://raw.githubusercontent.com/musaghauri/react-auth-app/60f0000cdbcfe62b208d50d7cfd168f533602ec2/bucket.json" rel="noopener noreferrer" target="_blank">React Auth App Bucket JSON</a> file and go to your Cosmic Dashboard. Now on the sidebar, go to Settings -&gt; Import / Export Data&nbsp;
and click on&nbsp;&#39;Add Import File&#39;&nbsp; and choose the downloaded file. It will import all the Object Types and required data.<img src="https://s3-us-west-2.amazonaws.com/cosmicjs/c1318570-f9e3-11e7-b797-afc7d68fbdc7-Untitled2.png" style="width: 756px;" class="fr-fic fr-dib"> Now let&#39;s get started with the actual application. <h2>Cosmic Configuration</h2>After downloading the <a href="https://github.com/cosmicjs/react-auth-app">react-auth-app repository</a>, do <code>npm install</code> in the terminal. After installing all the dependencies, we need to setup the cofiguration for Cosmic. For that, we will clone <code>.env.example</code> and rename it as <code>.env</code> and setup all the variables in it with our bucket configuration.<code>.env</code> would look like the file listed below <div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/musaghauri/cc72f716fa2b633b94ae554615f69ed4' class='embedly-card'></a>"><a href="https://gist.github.com/musaghauri/cc72f716fa2b633b94ae554615f69ed4" class="embedly-card"></a></div>Private SettingsYou need to add a single entry for private-settings&nbsp;which would include the following:Title: some dummy testEmail Username: your gmail account email.Email Password:&nbsp;your gmail account password.FROM EMAIL: your email from which the notification emails would be sent.Note:&nbsp;We are using SMTP gmail client to send emails.<img src="https://s3-us-west-2.amazonaws.com/cosmicjs/a0be1170-fc7a-11e7-b6b4-350a3d2e08c3-Untitled.png" style="width: 756px;" class="fr-fic fr-dib"> Now you are all setup to run the app.WorkflowPages:<ol><li>Login&nbsp;- This page is used to login the user<ol><li>Route: / </li><li>Failures<ol><li>This would fail if either email or password is incorrect.</li><li>This would fail if the account is not verified.</li></ol></li><li>Success<ol><li>This would succeed only if the credentials are correct and the account is activated.</li></ol></li></ol></li><li>Signup - This page is used to register the user and the verification email is sent to respective email <ol><li>Route: /signup</li></ol></li><li>Profile - This page is used to list profile information<ol><li>Route: /profile</li></ol></li><li>Edit Profile - This page is used to edit profile information<ol><li>Route: /profile/edit</li></ol></li><li>Edit Password - This page is used to edit account password<ol><li>Route: /profile/edit/password</li></ol></li><li>Forgot Password - This page is used to send an OTP for resetting password to an email<ol><li>Route: /forgotPassword</li></ol></li><li>Reset Password - This page is used to reset password with an OTP sent to a respective email<ol><li>Route: /resetPassword</li></ol></li><li>Activate Account: This page is used to activate account<ol><li>Route: /activateAccount</li></ol></li></ol> Details:Login:<img src="https://s3-us-west-2.amazonaws.com/cosmicjs/7a2ae8b0-fab0-11e7-9aa0-7bd83d303ba7-login.png" style="width: 748px;" class="fr-fic fr-dib"> <div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/musaghauri/de90be3f52f3d51804c311df78a23345' class='embedly-card'></a>"><a href="https://gist.github.com/musaghauri/de90be3f52f3d51804c311df78a23345" class="embedly-card"></a></div>Signup:<img src="https://s3-us-west-2.amazonaws.com/cosmicjs/1c18c760-fab5-11e7-858e-f757d7d78a71-signup.png" style="width: 756px;" class="fr-fic fr-dib"><div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/musaghauri/49b0861e37ef1cf2104b7ac60f193627' class='embedly-card'></a>"><a href="https://gist.github.com/musaghauri/49b0861e37ef1cf2104b7ac60f193627" class="embedly-card"></a></div>Profile:<img src="https://s3-us-west-2.amazonaws.com/cosmicjs/3315fb80-fab6-11e7-8d63-110eafbdc561-profile.png" style="width: 756px;" class="fr-fic fr-dib"><div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/musaghauri/3b31d737fc2afe65cd9643dcefcde33b' class='embedly-card'></a>"><a href="https://gist.github.com/musaghauri/3b31d737fc2afe65cd9643dcefcde33b" class="embedly-card"></a></div>Edit Profile:<img src="https://s3-us-west-2.amazonaws.com/cosmicjs/95c99490-fab5-11e7-858e-f757d7d78a71-edit profile.png" style="width: 756px;" class="fr-fic fr-dib"><div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/musaghauri/2b4eb08f00d7c53ef411535f5cc50f9c' class='embedly-card'></a>"><a href="https://gist.github.com/musaghauri/2b4eb08f00d7c53ef411535f5cc50f9c" class="embedly-card"></a></div>Edit Password:<img src="https://s3-us-west-2.amazonaws.com/cosmicjs/e06b4340-fab5-11e7-8d63-110eafbdc561-edit password.png" style="width: 756px;" class="fr-fic fr-dib"><div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/musaghauri/fb303de802d9a4aefc30c291d284a3fb' class='embedly-card'></a>"><a href="https://gist.github.com/musaghauri/fb303de802d9a4aefc30c291d284a3fb" class="embedly-card"></a></div>Forgot Password:<img src="https://s3-us-west-2.amazonaws.com/cosmicjs/e6701860-fab5-11e7-8d63-110eafbdc561-forgot password.png" style="width: 756px;" class="fr-fic fr-dib"><div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/musaghauri/df3996b91439199bf5a23d06b8fa57b9' class='embedly-card'></a>"><a href="https://gist.github.com/musaghauri/df3996b91439199bf5a23d06b8fa57b9" class="embedly-card"></a></div>Reset Password:<img src="https://s3-us-west-2.amazonaws.com/cosmicjs/ef657dc0-fab5-11e7-8d63-110eafbdc561-reset password.png" style="width: 756px;" class="fr-fic fr-dib"><div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/musaghauri/3717688151c966aea5bcc949b2b4f589' class='embedly-card'></a>"><a href="https://gist.github.com/musaghauri/3717688151c966aea5bcc949b2b4f589" class="embedly-card"></a></div>Activate Account: <div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/musaghauri/7be302b7a0ac2cb99c8c4ac45e410685' class='embedly-card'></a>"><a href="https://gist.github.com/musaghauri/7be302b7a0ac2cb99c8c4ac45e410685" class="embedly-card"></a></div>SecurityThis app used MD5&nbsp;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.&nbsp; ConclusionThis 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.

Blogs by Muhammad Musa

Start building today