DEV Community: Chris Wang

Free React Dashboard - Tailwind CSS & TypeScript

Chris Wang — Fri, 30 Jun 2023 02:51:51 +0000

Get started and build your dream web app with WorkDaily UI, the trendiest & innovative Open Source Admin Template for Tailwind CSS & React!

I used React v18.2.0, so you can use the benefits of React v18 in the project.

You can download the full codebase here.

Introduction

Designed for those who like modern UI elements and beautiful websites. Made of hundred of elements, designed blocks and fully coded pages, WorkDaily UI is ready to help you create stunning websites and webapps.

Save hundreds of hours trying to create and develop a dashboard from scratch.
The fastest, most responsive & trendiest dashboard for Tailwind CSS is here. Seriously.

Authentication Pages, Profile and so on. Just choose between a Basic Design or a cover and you are good to go!

New WorkDaily UI Components 🎉

All the main components will help you to see and interact with all & the latest added components of WorkDaily (also, new components are on the way, stay tuned)! ⚡️

Documentation

Each element is well presented in a very complex documentation. Now I am working on that.

Login Pages

Dark Mode:
Light Mode:

Dashboard Pages

Dark Mode:
Light Mode:

Quick Start

Install WorkDaily UI by running either of the following:

Install NodeJS LTS from NodeJs Official Page (NOTE: Product only works with LTS version).

Clone the repository with the following command:



git clone https://github.com/itwebtiger/workdaily-tailwind-react-ts.git

Run in terminal this command:



yarn

Then run this command to start your local server



yarn start

References

AWS Cognito Sign In with Node.js

Chris Wang — Fri, 09 Jun 2023 19:06:45 +0000

Let's add AWS Cognito Sign In function to the Node project today.
I suppose your project already add AWS Cognito Sign Up to your project.

If not, please take a look at my provious articles:

Article	Codebase
ES6 Node-Express Boilerplate	https://github.com/itwebtiger/express-amazon-cognito/tree/init-expressjs
AWS Cognito Setup	----
AWS Cognito Sign Up with Node.js	https://github.com/itwebtiger/express-amazon-cognito/tree/cognito-signup
AWS Cognito Sign Up Email Confirm with Node.js	https://github.com/itwebtiger/express-amazon-cognito/tree/cognito-signupconfirm

Also, you can download the full codebase here for AWS Cognito Signin if you are interested in this AWS Cognito Sign In.

Add a AWS Cognito Sign In route

Add /api/auth/signin route in existing your node.js project, if don't use validateSigninRequest middleware, then you can remove the validateSigninRequest middleware.



import controller from '../controllers/auth.controller';
import {
  validateSignupRequest,
  validateSignupConfirmRequest,
} from '../middleware';

export default (app) => {
  app.post('/api/auth/signup', validateSignupRequest, controller.signup);
  app.post(
    '/api/auth/email/verify',
    validateSignupConfirmRequest,
    controller.signupConfirm,
  );
  app.post('/api/auth/signin', validateSigninRequest, controller.signin); // add signin route
};

Add a Sign In Function in the auth controller.

Add a Sign In Function in the controller.



// User Signup
import CognitoIdentity from '../services/cognito';

const CognitoIdentityService = CognitoIdentity();

const signin = async (req, res) => {
  const { email, password } = req.body;
  const cognitoParams = {
    username: email,
    password,
  };

  try {
    const cognitoUser = await new Promise((resolve, reject) => {
      CognitoIdentityService.signin(cognitoParams, (err, user) => {
        if (err) {
          reject(err);
        } else {
          resolve(user);
        }
      });
    });

    // DB logic here
    // ...

    res.status(200).send({
      success: true,
      message: 'User logined successfully',
      user: cognitoUser,
    });
  } catch (error) {
    res.status(400).send({ success: false, message: error.message, error });
  }
};

export default {
  signup,
  signupConfirm,
  signin, // add
};

Add a Sign Up Email Confirm in the services.

And then we need to add the AWS Cognito user authentication service to the services folder. I will use the amazon-cognito-identity-js for the service.
If you don't understand how to work the service, please check the service folder structure on my git repository.



services/
  └──cognito/
        ├── index.js
        └── methods/
              ├── index.js
              ├── signup.js
              ├── signin.js // add
              └── signupConfirm.js

This is a signin file, please add it.



import {

  CognitoUserPool,

  CognitoUser,

  AuthenticationDetails,

} from 'amazon-cognito-identity-js';

/**


Signin
@param {*} poolData
@param {{username, password}} body
@param {*} callback
*/


const signin = (poolData, body, callback) => {

  const userPool = new CognitoUserPool(poolData);

const { username, password } = body;

const authenticationData = {

    Username: username,

    Password: password,

  };

const authenticationDetails = new AuthenticationDetails(authenticationData);

const userData = {

    Username: username,

    Pool: userPool,

  };

const cognitoUser = new CognitoUser(userData);

cognitoUser.authenticateUser(authenticationDetails, {

    onSuccess: (res) => {

      const data = {

        refreshToken: res.getRefreshToken().getToken(),

        accessToken: res.getAccessToken().getJwtToken(),

        accessTokenExpiresAt: res.getAccessToken().getExpiration(),

        idToken: res.getIdToken().getJwtToken(),

        idTokenExpiresAt: res.getAccessToken().getExpiration(),

      };

      callback(null, data);

    },

    onFailure: (err) => {

      callback(err);

    },

    mfaRequired: () => {

      const data = {

        nextStep: 'MFA_AUTH',

        loginSession: cognitoUser.Session,

      };

      callback(null, data);

    },

    totpRequired: () => {

      const data = {

        nextStep: 'SOFTWARE_TOKEN_MFA',

        loginSession: cognitoUser.Session,

      };

      callback(null, data);

    },

    newPasswordRequired: () => {

      const data = {

        nextStep: 'NEW_PASSWORD_REQUIRED',

        loginSession: cognitoUser.Session,

      };

      callback(null, data);

    },

  });

};

export default signin;

The Result in the Postman

References

https://github.com/itwebtiger/express-amazon-cognito/tree/congnito-signin
https://docs.aws.amazon.com/cognito/latest/developerguide/cognito-user-pools-social-idp.html#cognito-user-pools-social-idp-step-1

AWS Cognito Sign Up Confirm with Node.js

Chris Wang — Fri, 09 Jun 2023 09:42:53 +0000

Let's add AWS Cognito Sign Up Confirm function to the Node project today.
I suppose your project already add AWS Cognito Sign Up to your project.

If not, please take a look at my provious articles:

Article	Codebase
ES6 Node-Express Boilerplate	https://github.com/itwebtiger/express-amazon-cognito/tree/init-expressjs
AWS Cognito Setup	----
AWS Cognito Sign Up with Node.js	https://github.com/itwebtiger/express-amazon-cognito/tree/cognito-signup

Also, you can download the full codebase here if you are interested in this AWS Cognito Sign Up Email Confirm.

Add a AWS Cognito Sign Up Email Confirm route

Add /api/auth/email/verify route in existing your node.js project, if don't use validateSignupRequest middleware, then you can remove the validateSignupRequest middleware.

import controller from '../controllers/auth.controller';
import {
  validateSignupRequest,
  validateSignupConfirmRequest,
} from '../middleware';

export default (app) => {
  app.post('/api/auth/signup', validateSignupRequest, controller.signup);
  app.post(
    '/api/auth/email/verify',
    validateSignupConfirmRequest,
    controller.signupConfirm,
  );
};

Add a Sign Up Email Confirm Function in the auth controller.

Add a Sign Up Email Confirm Function in the controller.

// User Signup
import CognitoIdentity from '../services/cognito';

const CognitoIdentityService = CognitoIdentity();

const signup = async (req, res) => {
  // Signup logic here
  // ...

  const { email, password, givenname, familyname } = req.body;

  const cognitoParams = {
    username: email,
    password,
    givenname,
    familyname,
  };

  try {
    const cognitoUser = await new Promise((resolve, reject) => {
      CognitoIdentityService.signup(cognitoParams, (err, user) => {
        if (err) {
          reject(err);
        } else {
          resolve(user);
        }
      });
    });

    res.status(200).send({
      success: true,
      message: 'User registered successfully',
      user: cognitoUser,
    });
  } catch (error) {
    res.status(400).send({ success: false, message: error.message, error });
  }
};

const signupConfirm = async (req, res) => {
  const { email, code } = req.body;
  const cognitoParams = {
    username: email,
    confirmationCode: code,
  };

  try {
    await new Promise((resolve, reject) => {
      CognitoIdentityService.signupConfirm(cognitoParams, (err, user) => {
        if (err) {
          reject(err);
        } else {
          resolve(user);
        }
      });
    });

    // DB logic here
    // ...

    res.status(200).send({
      success: true,
      message: 'User email confirmed successfully',
      user: {
        user_confirmed: true,
      },
    });
  } catch (error) {
    res.status(400).send({ success: false, message: error.message, error });
  }
};

export default {
  signup,
  signupConfirm,
};

Add a Sign Up Email Confirm in the services.

services/
  └──cognito/
        ├── index.js
        └── methods/
              ├── index.js
              ├── signup.js
              └── signupConfirm.js

This is a signupConfirm file, please add it.

import { CognitoUserPool, CognitoUser } from 'amazon-cognito-identity-js';

/**
 * Confirm the signup action
 * @param {*} poolData
 * @param {{username, confirmationCode}} body
 * @param {*} callback
 */

const signupConfirm = (poolData, body, callback) => {
  const userPool = new CognitoUserPool(poolData);

  const { username, confirmationCode } = body;

  const userData = {
    Username: username,
    Pool: userPool,
  };

  const cognitoUser = new CognitoUser(userData);

  cognitoUser.confirmRegistration(confirmationCode, true, (err, res) =>
    callback(err, res),
  );
};

export default signupConfirm;

The Result in the Postman

We will take a look at AWS Cognito login in the next article.
If you like this type of content you can give me a star on my GitHub repository for the latest updates.

References

https://github.com/itwebtiger/express-amazon-cognito/tree/cognito-signupconfirm
https://docs.aws.amazon.com/cognito/latest/developerguide/cognito-user-pools-social-idp.html#cognito-user-pools-social-idp-step-1

AWS Cognito Sign Up with Node.js

Chris Wang — Wed, 07 Jun 2023 14:07:58 +0000

Hope you have already set up the Node.JS environment on your system and exist Express.js project and the AWS Cognito on AWS side, if didn't set up the AWS Cognito, then use the following tutorial for AWS Cognito setup. Also, you can download the full codebase(opens in a new tab) here if you are interested in this AWS Cognito Sign Up.

Set Cognito environment variables

Then we will use these environment variables in the Node project.

Add these environment variables to .env and example.env files



  AWS_COGNITO_REGION=
  AWS_COGNITO_USER_POOL_ID=
  AWS_COGNITO_CLIENT_ID=
  AWS_COGNITO_IDENTITY_POOL_ID=



  AWS_COGNITO_REGION=ca-central-1
  AWS_COGNITO_USER_POOL_ID=ca-central-1_oOXMEFtX3
  AWS_COGNITO_CLIENT_ID=54ado14mc8n0cmnm5s70vsis63
  AWS_COGNITO_IDENTITY_POOL_ID=ca-central-1:18ec2ec3-9e0a-474c-9d82-eb811b028e83

Add a Sign Up Route in the Node.js Project

Add /api/auth/signup route in existing your node.js project, if don't use validateSignupRequest middleware, then you can remove the verifySignUp middleware.



import controller from '../controllers/auth.controller';
import validateSignupRequest from '../middleware/validateSignupRequest';

export default (app) => {
  app.post('/api/auth/signup', validateSignupRequest, controller.signup);
};

Add a Sign Up Function in the auth controller.

Add a Sign Up Function in the controller.



// User Signup
import CognitoIdentity from '../services/cognito';

const CognitoIdentityService = CognitoIdentity();

const signup = async (req, res) => {
  // Signup logic here
  // ...

  const { email, password, givenname, familyname } = req.body;

  const cognitoParams = {
    username: email,
    password,
    givenname,
    familyname,
  };

  try {
    const cognitoUser = await new Promise((resolve, reject) => {
      CognitoIdentityService.signup(cognitoParams, (err, user) => {
        if (err) {
          reject(err);
        } else {
          resolve(user);
        }
      });
    });

    res.status(200).send({
      success: true,
      message: 'User registered successfully',
      user: cognitoUser,
    });
  } catch (error) {
    res.status(400).send({ success: false, message: error.message, error });
  }
};

export default {
  signup,
};

Add a Sign Up in the services.



import {

  CognitoUserPool,

  CognitoUserAttribute,

} from 'amazon-cognito-identity-js';

const attributes = (key, value) => ({

  Name: key,

  Value: value,

});

/**


Signup user
*
@param {poolData} poolData
@param {{ username: string, password: string, givenname: string, familyname: string, }} body
@param {*} callback
*/


const signup = (poolData, body, callback) => {

  const userPool = new CognitoUserPool(poolData);

const { username, password, givenname, familyname } = body;

  const attributesList = [

    attributes('email', username),

    attributes('given_name', givenname),

    attributes('family_name', familyname),

  ];

const cognitoAttributeList = attributesList.map(

    (element) => new CognitoUserAttribute(element),

  );

userPool.signUp(

    username,

    password,

    cognitoAttributeList,

    null,

    (err, res) => {

      if (err) {

        callback(err);

        return;

      }

  const data = {
    user_id: res.userSub,
    email: res.username,
    user_confirmed: res.userConfirmed,
  };

  callback(null, data);
},



);

};

export default signup;

The Result in the Postman

6 Digit OTP For Email Verification.

Then you will receive the 6 Digit OTP for email verification as shown below in the screenshot.

If you want you can customize your email messages. So when a user sign ups he will get an email to confirm his account. You can customize that message.

This is it for the signup scope now. We will take a look at signup email verification in the next article.

If you like this type of content you can give me a star on my GitHub repository for the latest updates.

References

https://github.com/itwebtiger/express-amazon-cognito/tree/cognito-signup
https://chrisw.vercel.app/projects/node/cognito/signup
https://docs.aws.amazon.com/cognito/latest/developerguide/cognito-user-pools-social-idp.html#cognito-user-pools-social-idp-step-1

AWS Cognito Setup for User Authentication

Chris Wang — Wed, 07 Jun 2023 12:55:06 +0000

AWS Cognito Overview

Amazon Cognito lets you add user sign-up, sign-in, and access control to your web and mobile apps quickly and easily. Amazon Cognito scales to millions of users and supports sign-in with social identity providers, such as Facebook, Google, and Amazon, and enterprise identity providers via SAML 2.0.

Let’s understand what is AWS Cognito User Pool and AWS Cognito Federal Identity

AWS Cognito User Pool
AWS Cognito Federated Identities

1. AWS Cognito User Pool

A User Pool is the user directory that you can configure for your web and mobile apps. A User Pool securely stores your users’ profile attributes. You can create and manage a User Pool using the AWS console, AWS CLI, or AWS SDK.

Create Cognito User Pool

Sign in/up to your AWS account from the Services drop-down menu select Cognito then you will see the following screen. Click to the User Pools Button in the left sidebar.

Click on the Create user pool button.

Select Authentication Providers Type

Select Password policy mode and Multi-factor authentication type

Select MFA methods(Authenticator apps or SMS message)

Choose the attributes, and click next button.

Select Email provider, and click next button.

Enter User pool name.

Check Use the Cognito Hosted UI, enter a domain prefix.

Enter a friendly name for yhour app client, and enter a callback URLs.

You will see the user pool has been created as shown below in the screenshot.

Finally you can check the all of authentication work flow in the Cognito Hosted UI.

2. AWS Cognito Federated Identities

Identity pools are the containers that Cognito Identity uses to keep your apps’ federated identities organized. Identity Pool associates federated identities from social identity providers with a unique user-specific identifier. Identity Pools do not store any user profiles. An identity pool can be associated with one or many apps. If you use two different identity pools for two apps then the same end user will have a different unique identifier in each Identity Pool.

Create Cognito Federated Identities

Click a Create new identity pool button as shown in the below screenshot.

Enter the User Pool Id and App client id as shown in the below screenshot.

Enter the User Pool Id and App client id as shown in the below screenshot.

Then you can get the Identity pool Id as shown in the below screenshot

I just done with AWS Cognito User Pool, Cognito Federated Identities setup.
In the next post, we will discuss how you're going to integrate Cognito with a Node.js & Express.js app.

References

https://chrisw.vercel.app/projects/node/cognito/started

Express & ES6 Boilerplate

Chris Wang — Tue, 06 Jun 2023 20:02:50 +0000

Let's set up an Express.js app using ES6. I will be using the Babel compiler to compile our ES6 code to ES5. Babel is a JavaScript compiler that enables one use next generation JavaScript, today. This Tutorial assumes that you have installed the Node Package Manager(NPM) and the Node.js Engine in your development environment. If you do not have Node.js installed, you can download and install it from the Node.js website. Also, you can download the full codebase here if you are interested in this es6 node-express boilerplate.

Step 1: Set up the project

Create a new directory for your project and navigate to it.
Initialize a new Node.js project by running the following command in your terminal:

npm init -y

Step 2: Install dependencies

Install Express and other required packages by running the following command:

npm install express

Step 3: Configure Babel

Install Babel and the necessary plugins by running the following command:

npm install --save-dev @babel/core @babel/preset-env @babel/register

Create a file named .babelrc in the root directory of your project and add the following content:


{
  "presets": ["@babel/preset-env"]
}

Step 4: Create the Express app

Create a file named app.js in the root directory of your project.
Add the following code to app.js to set up a basic Express application:

import express from 'express';

const app = express();

// Define routes and middleware here

const port = process.env.PORT || 3000;
app.listen(port, () => {
  console.log(`Server listening on port ${port}`);
});

In your terminal, run the following command to start the server:

node -r @babel/register app.js

Step 5: Install nodemon

Install nodemon as a development dependency by running the following command in your project's root directory:

npm install --save-dev nodemon

Open your project's package.json file and modify the "scripts" section to include a new script called "start" with the command to run the server using nodemon("start": "nodemon --exec babel-node app.js"). Your package.json file should look like this:

{
  "name": "express-amazon-cognito",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "nodemon --exec babel-node app.js",
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.18.2"
  },
  "devDependencies": {
    "@babel/core": "^7.22.1",
    "@babel/node": "^7.22.1",
    "@babel/preset-env": "^7.22.4",
    "@babel/register": "^7.21.0",
    "nodemon": "^2.0.22"
  }
}

Save the changes to package.json.
Open your terminal and navigate to your project's root directory.
Start the server using the following command:

npm start or yarn start

Now, nodemon will automatically monitor your files for changes and restart the server whenever you save changes to your code.

Step 6: Set up Prettier and ESLint

Install the necessary packages as dev dependencies:

npm install --save-dev prettier eslint eslint-config-prettier eslint-plugin-prettier

Create an ESLint configuration file by running the following command and following the prompts:

npx eslint --init

This command will guide you through setting up ESLint. Make the following selections when prompted:

- How would you like to configure ESLint? -> Use a popular style guide
- Which style guide do you want to follow? -> Airbnb
- Do you use TypeScript? -> No
- Where will your code run? -> Node
- How would you like to define a style for your project? -> Use a configuration file
- Which format do you want your config file to be in? -> JavaScript

Install the necessary Babel ESLint plugin:

npm install --save-dev babel-eslint

Open the .eslintrc.js file that was created in your project's root directory. Modify the configuration file to extend the plugin:prettier/recommended configuration and set the parser option to babel-eslint. It should look something like this(source file):

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: ['airbnb-base', 'plugin:prettier/recommended'],
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
  },
  rules: {
    'prettier/prettier': 'error',
  },
};

Create a .prettierrc file in your project's root directory and specify your desired Prettier formatting rules.

{
  "singleQuote": true,
  "trailingComma": "es5"
}

Add a Prettier script to your package.json file's "scripts" section:

"scripts": {
  "prettier": "prettier --write '**/*.{js,json}'"
}

Now you can run ESLint and Prettier on your project. For example, to run ESLint on your entire project, use the following command:

npx eslint .

To format your code with Prettier, run the following command:

npm run prettier

Feel free to adjust the ESLint and Prettier configurations to meet your specific project requirements.

Step 7: Set up env

Install the dotenv package, which allows you to load environment variables from a .env file:

npm install dotenv

Create a .env file in your project's root directory. Add the following line to the .env file, specifying the desired port number:

PORT=3000

In your main entry file (e.g., app.js or index.js), import the dotenv package using ES6 syntax at the top of the file:

import dotenv from 'dotenv';

Load the environment variables from the .env file by invoking the config method on the dotenv object:

dotenv.config();

Update the code where you define the port for your Express.js server. Use destructuring to extract the PORT variable from process.env:

const port = process.env.PORT || 3000;

In this example, the PORT variable will hold the value from the .env file. If it is not set, the port variable will default to 3000.

Start your Express.js server using the port variable:

app.listen(port, () => {
  console.log(`Server is running on port ${port}`);
});

Now your Express.js server will read the port number from the .env file using ES6 syntax.

You can adjust the code and syntax to match your specific project structure and requirements.
You can download the full codebase here for this article.

If you like this type of content you can give me a star on my GitHub repository for the latest updates.

References:

https://chrisw.vercel.app/projects/node/express/getstarted
https://github.com/itwebtiger/express-amazon-cognito/tree/init-expressjs