Responsive ToDo App Using Redis As Main Database

Mayank Singh Tomar — Sun, 28 Aug 2022 10:26:10 +0000

Overview of My Submission

Here, we are going to make a simple todo-app showing how we can use redis as main db.

For starters in backend server we will be using express, cors,redis-om. Where:

express: Provides basic server for connecting db and frontend.

cors: Provides connection btw backend and frontend.

redis-om: It is new library by redis which provides all basic neccessities required in a databse and can be managed and created using redis-cloud.

# Note: See repo on how to setup the basic db and api's.Link To Backend

Now lets setup the database:

Here, we will be using redis cloud db which comes in both free and paid db @Redis-Cloud.
For creating a db in redis cloud you just need to signup on #link and create a subscription.
On creating a subscription redis will provide a db with particular endpoint and defaultuser&password.
We just need endpoint and password for accessing the db.
Then we will create the schema on which the db will work.

# Note: See repo on how to setup Schema. Link To Schema

Later, for frontend we will be using react as framework and bootstrap 5 as styling.

# Note: See repo on how to setup Frontend. Link To frontend

The whole process works as:

Firstly, on initiating the backend we create a server on port 8000 which provides access to db and initiates api's.
On otherhand, the frontend which is initiated on port 3000 can call api's to access the db and edit or update it.
On for checking db we can use RedisInsight which is free to download provided by redis.

# Note: RedisInsight keeps db record on local machine. It helps in easy access to db and also it makes db easy to read and modify.Link To redisinsight

Submission Category: MERN Mavericks

Following languages are used in this project: `JS/Node.js/CSS`.

Here, you can find complete source code of the project:

Link To Source Code

The demo app can be seen on:

Link To Demo

SignIn with Google according to new update

Mayank Singh Tomar — Sat, 16 Jul 2022 10:49:56 +0000

Since SignIn forms are always first steps that every web developers take let's add Google services to them.

Things we need to do get a Google enabled signin form is just to follows the given steps.

First goto the Google Cloud Platform and create new project or use already created one.
Move to credentials in APIs & Services which will look something like given below.
Inside configure consent screen select External as option and Click Create. This will lead us to form which asks for information regarding what you are creating.
Fill the form with proper name and Email make sure you use your GCP mail in the form and click on Save and Continue; you can skip scopes part arrive directly at Test Users part of the form here you have to add Email which will we used to check services on localhost.
Now go back to credentials and CREATE CREDENTIALS for OAuth client ID and select application type to whatever you want here we will we using Web application. Then fill the form, make sure you use port number which you are using and click on CREATE and save the client secret and id .
Our GCP preparation are complete lets start or create our application . Lets start with creating react app.

npx create-react-app authloginapp

Most important part of application is adding Google Script inside head section of public/index.html.

<script src="https://accounts.google.com/gsi/client" async defer></script>

Make sure to add async and defer as they will manage delay.

Now lets change the things to display on screen from src/App.js.
We will use react hooks such as useEffect and useSate for creating simple login-form. Add following code in App function .

useEffect will Provide us with Jwt-token.

Add the following hook to enable google in app

 useEffect(() => {
    /* global google */
    google.accounts.id.initialize({
      client_id:
        'Your-Google-client-Id',
      callback: handleCallbackResponse,
    });
   google.accounts.id.renderButton(document.getElementById('signInDiv'), {
      theme: 'outline',
      size: 'large',
    });
  }, []);

Here google.accounts.id is because the script provided.
Google also Provide various different buttons and function.

Now let's define the function handleCallbackResponse inside App function.

function handleCallbackResponse(response) {
    console.log('Encoded JWT ID token: ' + response.credential);
  }

Let's check our progress by running

npm start

On inspecting in console we will get ourjwt-tokenwhich is provided by google as verification and also holds user details.

Now it's our job to convert and use the token for that we will we required decoder such as jwt-decode.

npm install jwt-decode

Later Update handleCallbackResponse with

var userObject = jwt_decode(response.credential);
console.log(userObject);

We can now see detailed inscription of user.

Now displaying details we first have to store info in something let's use another use hook useState for storing user. Add useState for use in app function.

const [user, setUser] = useState({});

Later update handleCallbackResponse with

setUser(userObject);

Here, we have information of user now we can display on screen by applying following code.

<div id="signInDiv"></div>
{user && (
  <div>
    <img src={user.picture}></img>
    <h3>{user.name}</h3>
    <h4>{user.email}</h4>
  </div>
)}

Now we can see name, image and email on screen after login.

Lastly give finishing touch by adding one line to hide signin option after signin in handleCallbackResponse function.

document.getElementById('signInDiv').hidden = false;

Our Complete src/App.js looks something like.

import React, { useEffect, useState } from 'react';
import jwt_decode from 'jwt-decode';
import './App.css';

function App() {
  const [user, setUser] = useState({});

  function handleCallbackResponse(response) {
    console.log('Encoded JWT ID token: ' + response.credential);
    var userObject = jwt_decode(response.credential);
    console.log(userObject);
    setUser(userObject);
    document.getElementById('signInDiv').hidden = true;
  }

  function handleSignOut(event) {
    setUser({});
    document.getElementById('signInDiv').hidden = false;
  }

  useEffect(() => {
    /* global google */
    google.accounts.id.initialize({
      client_id:
        'Your-Google-Client-Id',
      callback: handleCallbackResponse,
    });  google.accounts.id.renderButton(document.getElementById('signInDiv'), {
      theme: 'outline',
      size: 'large',
    });
  }, []);
 return (
    <div className="App">
      <div id="signInDiv"></div>
      {user && (
        <div>
          <img src={user.picture}></img>
          <h3>{user.name}</h3>
        </div>
      )}
    </div>
  );
}

export default App;

This is all required for basic Google enabled authentication system all it required 10 mins.

Note:

You can use redux in place of useState if you are using it in Stack application.
You can check other button and functions for Google Auth at Google Identity.
Check the FULL CODE at for better picture.

DEV Community: Mayank Singh Tomar