DEV Community: Mr CyberWolf

From Idea to Deployed App: AI Resume Generator Tool (Lovable Tutorial)

Mr CyberWolf — Thu, 25 Sep 2025 13:15:29 +0000

In this tutorial, I’ll show you step by step how to use Lovable to create an AI Resume Tailor App.

Google Sign‑In with Official SDK (No Passport.js) & Role‑Based Access

Mr CyberWolf — Tue, 29 Apr 2025 10:30:00 +0000

Introduction

Most tutorials out there use Passport.js to implement Google Sign-In in your app, but Passport’s default session-based approach is poorly documented and forces you to build your own user-creation and token-storage logic. It overcomplicates what should be a simple process.

In this guide, I’ll walk you through integrating Google’s officially supported Node.js Auth Library — clean, straightforward, and free from the usual headaches. I’ll also show you how to implement role-based access control so that admins can perform sensitive operations while regular users simply browse. By the end, you’ll have:

A clean login flow that issues access and refresh tokens
Automatic token renewal via an Axios interceptor
Middleware to validate tokens on every request
RBAC policies that let only admins delete, editors create/update, and viewers read.

If you prefer visual learning, check out the video instead.

What Is OAuth 2.0?

OAuth 2.0 (Open Authorization) is the industry-standard protocol that lets your app access resources on another platform on behalf of a user without ever touching their password. It uses scopes to control which data and actions your app can perform. Although OAuth 2.0 itself handles only authorization and not authentication, adding an identity layer called OpenID Connect (OIDC) enables secure user sign-in (“Sign in with Google”) by issuing ID tokens alongside access tokens.

Together, OAuth 2.0 and OIDC power most third-party integrations such as calendar syncing and social logins, so you no longer need to manage dozens of usernames and passwords. Your app simply exchanges tokens to call APIs securely and refreshes them automatically when they expire. I explained this process with an example in the video, so feel free to check it out. Let’s dive into the implementation!

Basic Setup

This guide is focused on authentication and role-based access, so I’ve provided client and server boilerplate code. Let’s prepare our project structure and install the necessary dependencies so both the client and server are ready for OAuth integration.

1. Clone the boilerplate from GitHub:

git clone -b Basic-Setup https://github.com/CyberW0lves/Google-OAuth-RBAC.git

2. Inside the project you’ll find two folders:

Client/ (Next.js app)

cd client
npm install
npm run dev

Server/ (Express app)

cd server
npm install

Don’t start the server yet — you’ll need to configure environment variables first.

3. At `server/.env` file, add your MongoDB URI and Client URL.

DB = mongodb+srv://<user>:<pass>@cluster0.mongodb.net/mydb
CLIENT_URL = http://localhost:3000
GOOGLE_CLIENT_ID = 
GOOGLE_CLIENT_SECRET = 
GOOGLE_REDIRECT_URI = 
PERMIT_API_KEY = 
PERMIT_PDP_URL =

I’m using MongoDB to save users, but you can swap in an in-memory store if you just want to experiment.

Google Credentials

Now let’s obtain credentials for the client i.e. Client ID and Secrets from the authorization server. In this tutorial, the client is your application and the authorization server is Google.

Creating a Project:

1. Go to the Google Cloud console.

2. Click on select project on the top left of the screen and select New project to create a new project.

Configuring Consent Screen:

1. Click on APIs & Services on the top left menu and select OAuth consent screen to create your app’s consent screen.

2. Enter your application name and support email, then select “External” as the audience type.

3. Complete the consent screen setup by accepting Google’s Privacy Policy.

Creating OAuth Client:

1. Click on Create OAuth Client.

2. Select the application type as web and add name for your OAuth client.

3. Enter “http://localhost:3000” as authorized origin.

4. Enter “http://localhost:3000/redirect” as authorized redirect URL.

5. Click on Create to obtain the client ID and client secrets.

6. Copy the generated credentials and add them to your `server/.env` file.

DB = mongodb+srv://<user>:<pass>@cluster0.mongodb.net/mydb
CLIENT_URL = http://localhost:3000
GOOGLE_CLIENT_ID = **********************
GOOGLE_CLIENT_SECRET = **********************
GOOGLE_REDIRECT_URI = http://localhost:3000/redirect
PERMIT_API_KEY = 
PERMIT_PDP_URL =

Google OAuth Routes

Let’s implement our Express routes for login, callback, token refresh, and logout using Google’s Auth Library. First, create a new file at server/routes/auth.ts. In that file:

Import and Initialize OAuth2 client:

import express, { Request, Response } from "express";
import { OAuth2Client } from "google-auth-library";
import User from "../models/User";

const router = express.Router();

const client = new OAuth2Client(
  process.env.GOOGLE_CLIENT_ID,
  process.env.GOOGLE_CLIENT_SECRET,
  process.env.GOOGLE_REDIRECT_URI
);

1. Import the Express router, the Google Auth Library, and the User model.

2. Configure the OAuth2 client to generate authorization URLs, exchange authorization codes for tokens, and handle token refreshes.

Generate the Authorization URL:

...
router.post("/login", (req: Request, res: Response) => {
  const authUrl = client.generateAuthUrl({
    access_type: "offline",
    scope: ["openid", "email", "profile"],
  });

  res.status(200).json({ authUrl });
});

1. `access_type: "offline"` requests a refresh token so you can get new access tokens later without user interaction.

2. `scope: ["openid", "email", "profile"]` tells Google exactly which user data your app needs.

3. On the frontend, we use this URL to redirect users to Google’s sign-in page.

Exchange Authorization Code for Tokens:

...
router.post("/callback", async (req: Request, res: Response): Promise<any> => {
  try {
    const { code } = req.body;
    if (!code) return res.status(400).json({ error: "Invalid code" });

    const { tokens } = await client.getToken(code);
    if (!tokens || !tokens.access_token || !tokens.id_token)
      return res.status(400).json({ error: "Invalid code" });

    const ticket = await client.verifyIdToken({
      idToken: tokens.id_token,
    });
    const payload = ticket.getPayload();

    let user = await User.findOne({ email: payload?.email });
    if (!user) {
      user = await new User({
        firstName: payload?.given_name,
        lastName: payload?.family_name,
        email: payload?.email,
        picture: payload?.picture,
        refreshToken: tokens.refresh_token,
      }).save();
    }

    res.cookie("accessToken", tokens.access_token, {
      maxAge: 1 * 60 * 60 * 1000,
      httpOnly: true,
      sameSite: "strict",
      secure: true,
    });
    res.cookie("refreshToken", user.refreshToken, {
      maxAge: 30 * 24 * 60 * 60 * 1000,
      sameSite: "strict",
      secure: true,
    });
    res.cookie("userInfo", JSON.stringify(user), {
      maxAge: 30 * 24 * 60 * 60 * 1000,
      sameSite: "strict",
      secure: true,
    });
    res.status(200).json({ message: "Authentication successful" });
  } catch (error) {
    console.log(error);
    return res.status(500).send("Authentication failed");
  }
});

1. Grab the authorization code from `req.body`. If it’s missing, return a 400 error.

2. Call `client.getToken(code)` to exchange the code for tokens.

3. Verify the `id_token` with `client.verifyIdToken({ idToken })` and extract the user’s information.

4. Check if a user with the provided email already exists; if not, create a new user record and store the refresh token.

5. Send back cookies containing the tokens and user information, each with the appropriate expiration time.

Obtain a New Access Token:

...
router.post("/refresh", async (req: Request, res: Response): Promise<any> => {
  try {
    const refreshToken = req.cookies.refreshToken;
    if (!refreshToken)
      return res.status(400).json({ message: "No refresh token found" });

    client.setCredentials({ refresh_token: refreshToken });
    const { token: accessToken } = await client.getAccessToken();

    res.cookie("accessToken", accessToken, {
      maxAge: 1 * 60 * 60 * 1000,
      httpOnly: true,
      sameSite: "strict",
      secure: true,
    });
    res.status(200).json({ message: "Access token refreshed" });
  } catch (error) {
    console.log(error);
    res.status(500).json({ message: "Failed to refresh access token" });
  }
});

1. Grab the refresh token from `req.body`. If it’s missing, return a 400 error.

2. Set the refresh token as credentials, then call `client.getAccessToken()` to request a new access token from Google.

3. Send the new access token back as an HTTP-only cookie.

Logout by Clearing Cookies:

...
router.post("/logout", (req: Request, res: Response) => {
  res.clearCookie("userInfo");
  res.clearCookie("refreshToken");
  res.clearCookie("accessToken");
  res.status(200).json({ message: "Logged out" });
});

export default router;

1. Clear all cookies and send back a success response.

2. Don’t delete the refresh token unless absolutely necessary; losing it forces the user to re-authorize, so store it securely.

3. Export the router and import it in your `server/index.ts` file.

Client API Setup

In this section, we’ll integrate APIs to call our auth endpoints from frontend to handling login, redirects, and guarding the dashboard route. We’ll also add an Axios interceptor to automatically refresh the access token when it expires without interrupting the user.

First, add the API URL in the `client/.env` file.

NEXT_PUBLIC_API_URL = http://localhost:8080/api

Axios Instance:

Inside the client directory, create a new lib folder. Then add an axios.ts file in that folder and add the following code:

import axios, { AxiosInstance, AxiosResponse, AxiosError } from "axios";

const axiosInstance: AxiosInstance = axios.create({
  baseURL: process.env.NEXT_PUBLIC_API_URL,
  withCredentials: true,
});

axiosInstance.interceptors.response.use(
  (response: AxiosResponse) => response,
  async (error: AxiosError) => {
    if (error.response?.status === 401) {
      try {
        await axios.post(
          `${process.env.NEXT_PUBLIC_API_URL}/auth/refresh`,
          {},
          { withCredentials: true }
        );
        ``;
        const retryResponse = await axios({
          ...error.config,
          withCredentials: true,
        });
        return retryResponse;
      } catch (refreshError) {
        return Promise.reject(refreshError);
      }
    }
    return Promise.reject(error);
  }
);

export default axiosInstance;

1. Initialize the Axios instance with API URL and enable `withCredentials`

2. The Axios interceptor handles 401 errors by calling the refresh endpoint to obtain a new access token, then retries the original request with the updated credentials.

Redirect to Google Sign-In Page:

In client/app/page.tsx file, add the following code:

"use client";
import Image from "next/image";
import axiosInstance from "@/lib/axios";

export default function Home() {
  const handleLogin = async () => {
    try {
      const { data } = await axiosInstance.post("/auth/login");
      window.location.href = data.authUrl;
    } catch (error) {
      console.log(error);
    }
  };

  return (...
  );
}

1. Call the login API when the user clicks the “Sign In” button.

2. Once you receive the `authUrl`, redirect the user to that URL.

Invoke the Callback API:

In client/app/redirect/page.tsx file, add the following code:

"use client";
import { useEffect, useState } from "react";
import Link from "next/link";
import { useRouter, useSearchParams } from "next/navigation";
import axiosInstance from "@/lib/axios";

const Redirect = () => {
  const [error, setError] = useState<boolean>(false);
  const router = useRouter();
  const searchParams = useSearchParams();
  const text = "Loading...";

  useEffect(() => {
    const code = searchParams.get("code");

    const fetchToken = async () => {
      try {
        await axiosInstance.post("/auth/callback", { code });
        router.push("/dashboard");
      } catch (error) {
        console.log(error);
        setError(true);
      }
    };

    if (code) {
      fetchToken();
    } else {
      setError(true);
    }
  }, [searchParams]);

  return (...
  );
};

export default Redirect;

1. Use the search params hook to retrieve the authorization code when the page loads.

2. call the callback API with that code, then redirect the user to the dashboard.

Invoke the Logout API:

In client/components/LogoutBtn.tsx file, add the following code:

"use client";
import { useRouter } from "next/navigation";
import axiosInstance from "@/lib/axios";

const LogoutBtn = () => {
  const router = useRouter();

  const handleLogout = async () => {
    try {
      await axiosInstance.post("/auth/logout");
      router.push("/");
    } catch (error) {
      console.log(error);
    }
  };

  return (...
  );
};

export default LogoutBtn;

1. Call the logout API using axios instance, which clears the user’s cookies on the server.

2. After a successful response, call `router.push("/")` to redirect the user back to the home page.

Retrieve User Information:

In client/app/dashboard/page.tsx file, add the following code:

import { cookies } from "next/headers";
import { redirect } from "next/navigation";
import LogoutBtn from "@/components/LogoutBtn";

const getUserInfo = async () => {
  const cookieStore = await cookies();
  const refreshToken = cookieStore.get("refreshToken");
  if (!refreshToken) return redirect("/");

  const userInfo: any = cookieStore.get("userInfo");
  return JSON.parse(userInfo?.value);
};

const Deshboard = async () => {
  const userInfo = await getUserInfo();
  console.log(userInfo);

  return (...
  );
};

export default Deshboard;

1. Use Next.js `cookies()` helper to read cookies from the incoming request.

2. Checks for a `refreshToken` cookie; if it’s missing, immediately redirects the user to the home page.

3. Gets the `userInfo` cookie and parses it into a JavaScript object for use in the component.

Middleware's & RBAC

In this section, we’ll set up middleware’s to secure our routes so that only authenticated users with the appropriate roles can access the API. Instead of scattering role check logic throughout codebase, we’ll use Permit.io to centralize RBAC and keep it clean. Let’s get started!

Auth Middleware:

In server/src, create a middlewares folder. Inside it, add an authMiddleware.ts file and add the following code:

import { NextFunction, Request, Response } from "express";
import { OAuth2Client } from "google-auth-library";
import User from "../models/User";

const authMiddleware = async (
  req: Request,
  res: Response,
  next: NextFunction
): Promise<any> => {
  const accessToken = req.cookies.accessToken;
  if (!accessToken) return res.status(401).json({ error: "Unauthorized" });

  try {
    const client = new OAuth2Client(
      process.env.GOOGLE_CLIENT_ID,
      process.env.GOOGLE_CLIENT_SECRET,
      process.env.GOOGLE_REDIRECT_URI
    );
    const tokenInfo = await client.getTokenInfo(accessToken);
    if (!tokenInfo || tokenInfo.aud !== process.env.GOOGLE_CLIENT_ID) {
      return res.status(401).json({ error: "Unauthorized" });
    }

    const user = await User.findOne({ email: tokenInfo.email });
    if (!user) return res.status(401).json({ error: "Unauthorized" });
    req.body.userInfo = user;

    next();
  } catch (error) {
    console.log(error);
    return res.status(500).send("Internal server error");
  }
};

export default authMiddleware;

1. Grab `accessToken` from `req.cookies`; if it’s missing, return a 401 Unauthorized response.

2. Initialize an `OAuth2Client` with your Google credentials and call `client.getTokenInfo(accessToken)`. Verify that the token’s `aud` matches your `GOOGLE_CLIENT_ID`; if not, return a 401 response.

3. Check if a user with that email exists in the database; if not, return a 401 response.

4. Attach the user object to `req.body.userInfo` and call `next()` to grant access to the protected route.

Permit Credentials:

1. Go to Permit.io and create an account

2. Create a workspace by choosing a name and a unique key.

3. Add a “Products” resource and enable all CRUD actions.

4. In the policy editor, assign permissions to each role—admin, editor, and viewer—so you control who can do what.

5. Install the Permit SDK via npm (we already installed while setting up basic setup).

6. Copy your PDP URL and API key.

7. Add those credentials to your `server/.env` file.

DB = mongodb+srv://<user>:<pass>@cluster0.mongodb.net/mydb
CLIENT_URL = http://localhost:3000
GOOGLE_CLIENT_ID = **********************
GOOGLE_CLIENT_SECRET = **********************
GOOGLE_REDIRECT_URI = http://localhost:3000/redirect
PERMIT_API_KEY = **********************
PERMIT_PDP_URL = **********************

Initialize Permit & Sync Users:

In server/routes/auth.ts file, add the following code:

import express, { Request, Response } from "express";
import { OAuth2Client } from "google-auth-library";
import { Permit } from "permitio";
import User from "../models/User";

const router = express.Router();

const client = new OAuth2Client(
  process.env.GOOGLE_CLIENT_ID,
  process.env.GOOGLE_CLIENT_SECRET,
  process.env.GOOGLE_REDIRECT_URI
);

const permit = new Permit({
  token: process.env.PERMIT_API_KEY,
  pdp: process.env.PERMIT_PDP_URL,
});

router.post("/login", (req: Request, res: Response) => {
...
});

router.post("/callback", async (req: Request, res: Response): Promise<any> => {
  try {
    ...
    let user = await User.findOne({ email: payload?.email });
    if (!user) {
      user = await new User({
        firstName: payload?.given_name,
        lastName: payload?.family_name,
        email: payload?.email,
        picture: payload?.picture,
        refreshToken: tokens.refresh_token,
      }).save();

      await permit.api.syncUser({
        key: user._id.toString(),
        email: user.email,
        first_name: user.firstName,
        last_name: user.lastName,
      });
    }
        ...
});

...

1. Import and initialize Permit using the Token key and PDP URL.

2. In callback API, after saving the user to your database, sync that user with Permit also.

Role Check Middleware:

In the server/src/middlewares folder, create a roleCheckMiddleware.ts file and add the following code:

import { NextFunction, Request, Response } from "express";
import { Permit } from "permitio";

const roleCheckMiddleware = (action: string, resource: string) => {
  return async (
    req: Request,
    res: Response,
    next: NextFunction
  ): Promise<any> => {
    try {
      const permit = new Permit({
        token: process.env.PERMIT_API_KEY,
        pdp: process.env.PERMIT_PDP_URL,
      });
      const userId = req.body.userInfo._id.toString();
      const allowed = await permit.check(userId, action, resource);
      if (!allowed) return res.status(403).json({ message: "Forbidden" });
      next();
    } catch (error) {
      console.error(error);
      res.status(500).json({ message: "Internal server error" });
    }
  };
};

export default roleCheckMiddleware;

1. Grab the authenticated user’s information from `req.body`

2. Call Permit with the user’s ID, action, and the resource to verify permissions.

3. If the check passes, call `next()` to grant access; otherwise, return a 403 Forbidden response.

Protecting Product APIs:

In server/routes/products.ts file, add the following code:

import express, { Request, Response } from "express";
import Product from "../models/Product";
import authMiddleware from "../middlewares/authMiddleware";
import roleCheckMiddleware from "../middlewares/roleCheckMiddleware";
const router = express.Router();

router.post(
  "/",
  authMiddleware,
  roleCheckMiddleware("create", "Products"),
  async (req: Request, res: Response) => {
    try {
      const product = await new Product(req.body).save();
      res.status(201).json(product);
    } catch (error) {
      console.log(error);
      res.status(500).send("Failed to create new product");
    }
  }
);

router.get("/", async (req: Request, res: Response) => {
  try {
    const products = await Product.find();
    res.status(200).json(products);
  } catch (error) {
    console.log(error);
    res.status(500).send("Failed to retrieve products");
  }
});

router.put(
  "/:id",
  authMiddleware,
  roleCheckMiddleware("update", "Products"),
  async (req: Request, res: Response) => {
    try {
      const product = await Product.findByIdAndUpdate(req.params.id, req.body, {
        new: true,
      });
      res.status(200).json(product);
    } catch (error) {
      console.log(error);
      res.status(500).send("Failed to update product");
    }
  }
);

router.delete(
  "/:id",
  authMiddleware,
  roleCheckMiddleware("delete", "Products"),
  async (req: Request, res: Response) => {
    try {
      const deletedProduct = await Product.findByIdAndDelete(req.params.id);
      res.status(200).json(deletedProduct);
    } catch (error) {
      console.log(error);
      res.status(500).send("Failed to delete product");
    }
  }
);

export default router;

1. Import `authMiddleware` and `roleCheckMiddleware`.

2. Apply `authMiddleware` to any route that requires an authenticated user.

3. Then apply `roleCheckMiddleware(action, resource)` to enforce the specific permission.

Conclusion

We’ve integrated Google authentication using Google’s official Node.js Auth Library — clean, straightforward, and free of unnecessary complexity. On the backend, you saw how to exchange codes for tokens, verify ID tokens, and secure routes with middleware. On the frontend, you learned to call those auth endpoints, handle redirects, display loading and error states, and automatically refresh your access token with an Axios interceptor. Finally, we added role-based access control so only the right users can perform sensitive actions.

If this tutorial saved you time, I’d love your support. You can buy me a coffee or Subscribe to my YouTube Channel. Every bit of feedback helps me create better guides, so thanks for reading and happy coding!

Source Code : https://github.com/CyberW0lves/Google-OAuth-RBAC

The Cybersecurity Risks of AI-Generated Code: What You Need to Know

Mr CyberWolf — Mon, 17 Feb 2025 19:01:40 +0000

AI coding assistants like GitHub Copilot and OpenAI’s Codex are changing the game, they boost our productivity and even open up coding to more people. But there’s a catch: Security. We need to talk about the security risks that come with AI-generated code.

Think of AI code generation as a powerful new tool, but like any tool, it can be misused or have unintended consequences. Recent research from the Center for Security and Emerging Technology (CSET) has highlighted some serious concerns, and we’re going to break them down in this article.

1. AI Can Generate Insecure Code

This is the big one. AI models can sometimes produce code that’s just not secure. CSET’s study found that a lot of AI-generated code has vulnerabilities and bugs that hackers could exploit. We’re talking about things like buffer overflows, memory leaks, and access control issues.

Why does this happen? Well, AI learns by looking at tons of existing code. It’s like learning a language; you pick up both the good and the bad. If the code AI learns from has security flaws, it might just repeat those mistakes. Think of it like learning from a cookbook that sometimes has typos in the recipes; you might accidentally make the same mistake.

2. AI Models Can Be Tricked

It’s not just about the code AI generates; the AI itself can be vulnerable. Attackers can try to manipulate these models.

Poisoning the well: Attackers could sneak insecure code into open-source projects, which AI models use for training.
Prompt injection: Attackers can also try to trick the AI with clever inputs, like whispering instructions it shouldn’t follow.

3. The Feedback Loop Problem

Here’s a tricky situation: if AI-generated code, even the insecure parts, ends up back in open-source projects, future AI models will learn from it. It’s a feedback loop; the mistakes get repeated and amplified. Think of it like a game of telephone where the message gets more and more distorted each time.

Plus, we humans can be a bit too trusting of AI. Studies show we sometimes trust AI-generated code more than code written by other people. This “automation bias” could mean we miss security problems.

4. Technical Debt

AI can sometimes create “Technical Debt.” Think of it as taking shortcuts that will cost you later. AI might generate code that works now but is hard to maintain or understand in the future, increasing security risks down the line.

5. Over-Reliance on AI

As AI gets better, we might become too reliant on it. We might stop double-checking its work, and that’s when problems can sneak in. We need to remember that AI is a tool, not a replacement for our skills and judgment.

What Can We Do?

This isn’t just one person’s problem; it’s something we all need to work on:

AI Developers: Model creators need to improve training data and security benchmarks.
Software Companies: Treat AI-generated code like any other code — test it thoroughly!
Policymakers: We need some guidelines to make sure AI-assisted programming is secure.
Developers: Don’t just trust the AI! Review its code carefully.

The Bottom Line

AI-generated code is a powerful tool, and it has the potential to enhance software development. But it also introduces some serious cybersecurity risks. If we’re not careful, these risks could lead to vulnerabilities across the entire software ecosystem. Think of it like introducing a new, powerful technology without fully understanding its potential side effects; it could have unintended consequences.

If you found this article helpful, don’t stop here! Check out our article, “Are You Making These Node.js Security Mistakes?,” where we cover best practices for securing Node.js applications. And if you’re interested in more AI insights and coding tips to level up your skills, be sure to follow us. Keep exploring, and happy coding!

Are You Making These Node.js Security Mistakes?

Mr CyberWolf — Thu, 13 Feb 2025 12:13:17 +0000

Introduction

In 2016, Uber faced a significant security breach when a hacker accessed their AWS S3 server by exploiting exposed credentials found in a private GitHub repository. This server contained sensitive data of 57 million users and 600,000 drivers. The breach occurred due to poor access control and credential management in their Node.js application. If this can happen to a tech giant like Uber, what about your app? How can you protect yourself if you’re building a startup or managing an enterprise?

This article will explore the best practices for securing Node.js applications. Whether you’re a beginner or you’ve been developing for years, adopting these tools and strategies protects your app from breaches. By the end, you’ll know how to safeguard your app and avoid the mistakes that cost Uber millions.

Vulnerabilities and Security Risks

The most effective way to protect your app is by resolving vulnerabilities before hackers exploit them. Attackers typically search for weaknesses in your code, design, or configuration to gain unauthorized access. Here are some of the most common vulnerabilities:

Injection Attacks: SQL injection, command injection, and cross-site scripting (XSS) are some of the most common threats. Attackers use weak input validation to inject malicious code, leading to unauthorized access or stealing sensitive data.
Weak Authentication: Relying on weak passwords or insecure session management puts your users' data at risk. Poorly implemented authentication can lead to issues like brute force attacks and session hijacking.
Denial of Service (DoS) Attacks: Node.js uses a single-threaded design, which makes it very efficient but also more vulnerable to DoS attacks. A single heavy request can overload the system and cause your app to crash.
Outdated Dependencies: Node.js relies heavily on NPM packages, but this ecosystem has its risks. Outdated or vulnerable dependencies can create a backdoor for attackers.
Improper Error Handling: Error messages that expose stack traces, database details, or file paths can give attackers valuable clues about your application.

Input Validation and Sanitization

To protect your app from injection attacks, always validate user input to protect your system from malicious or incorrect data. Use tools like Validator.js or DOMPurify to sanitize inputs effectively. Additionally, implement strict validation rules using tools like Joi to ensure that only valid data is processed.

In this example, we’re using validator.js to remove any extra spaces and then using Joi to validate the email format. This approach adds an extra layer of security to your API.

// ...
const validator = require('validator');
const Joi = require('joi');

app.post('/submit', (req, res) => {
  // Sanitize the email by trimming extra spaces
  const sanitizedEmail = validator.trim(req.body.email);

    // Validate the sanitized email
    const schema = Joi.object({
      email: Joi.string().email().required().label("Email")
    });

    const { error } = schema.validate({ email: sanitizedEmail });

    if (error)
      return res.status(400).json({ message: error.details[0].message }); 
  // ...
});

Implement Strong Authentication

Weak authentication mechanisms are often the entry point for unauthorized access and account breaches. Implementing strong authentication policies is crucial to protecting your application. Here are some best practices to follow:

OAuth 2.0: Implement secure authentication with the OAuth 2.0 protocol using Passport.js. Passport offers a wide range of strategies, including login through trusted providers like Google. To get started, simply install Passport.js along with the specific strategy you need, and configure it within your application.

In this example, we’re authenticating a user using the passport-google-oauth20 strategy:

const passport = require('passport');
const GoogleStrategy = require('passport-google-oauth20').Strategy;

passport.use(new GoogleStrategy({
  clientID: 'GOOGLE_CLIENT_ID',
  clientSecret: 'GOOGLE_CLIENT_SECRET',
  callbackURL: '/auth/google/callback',
}, (accessToken, refreshToken, profile, done) => {
    // ...
  return done(null, profile);
}));

Hash Password: If you prefer using email and password for authentication, that’s perfectly fine. Just make sure to never store passwords in plain text. Always hash them with a tool like bcrypt, as it offers stronger security than Node.js’ built-in crypto module.

const bcrypt = require('bcrypt');

// ...
const saltRounds = 10;
const hashedPassword = await bcrypt.hash(password, saltRounds);
// ...

Session Cookie: Avoid using the default session cookie name; set a custom cookie name and enable secure options like HTTPOnly and Secure. These measures significantly reduce the risk of attackers hijacking user sessions.

const session = require('cookie-session')
// ...
app.use(
  session({
      name: 'custom-cookie-name',
    secret: 'your-secret-key',
    cookie: {
      httpOnly: true,
      secure: true, // Use true in production with HTTPS
      maxAge: 60 * 60 * 1000, // 1 hour
    },
  })
);
// ...

By integrating OAuth 2.0, hashed passwords, and secure sessions, you create a strong authentication system that keeps hackers out and ensures your users' data remains safe and protected.

Rate Limiting and Throttling

Implement rate limiting to prevent your app from crashing. Rate limiting controls how many requests a user can make within a given timeframe. In the example below, we’re using the express-rate-limit library to restrict login attempts to 5 per IP address within a 15-minute window.

const rateLimit = require('express-rate-limit');

const limiter = rateLimit({
  windowMs: 15 * 60 * 1000, // 15 minutes
  max: 5, // Limit each IP to 5 requests per window
  message: 'Too many login attempts, please try again later.',
});

app.use('/login', limiter);

Implementing rate limiting helps protect your app by preventing hackers from flooding your system with requests or trying to guess passwords.

Keep Dependencies Up to Date

Outdated libraries can open backdoors for attackers, making it crucial to keep your dependencies updated. Use commands like NPM Audit to detect and resolve any vulnerabilities. Additionally, regularly review your package.json file and remove any unused packages to maintain your app's security.

$ npm audit fix

To strengthen your app's security even further, consider using Snyk. It provides a CLI and GitHub integration that scans your app against Snyk’s open-source database to detect any known vulnerabilities in your dependencies. Getting started is simple, just install Snyk, navigate to your project directory, and run snyk test.

$ npm install -g snyk
$ cd your-app
$ snyk test

By updating your dependencies and using tools like Snyk, you’re not only protecting your app from attacks but also improving performance, reducing bugs, and maintaining a more stable environment.

Error Handling and Logging

Avoid exposing internal errors to users. Instead, use logging tools like Winston or Bunyan to securely capture and log errors. Simply install your preferred tool, import it, and configure it accordingly. These tools help you log errors without revealing sensitive information. When something goes wrong, send a generic error message to the user while keeping detailed logs for debugging purposes.

const winston = require('winston');

// Configure winston logging
const logger = winston.createLogger({
  level: 'info',
  format: winston.format.json(),
  transports: [
    new winston.transports.Console(),
    new winston.transports.File({ filename: 'logs/app.log' })
  ]
});

// Middleware for error handling
app.use((err, req, res, next) => {
  // Log the error, without exposing sensitive details to the user
  logger.error(`Error occurred: ${err.message}`);

  // Send a generic error response to the user
  res.status(500).send('Something went wrong!');

  next();
});

Using error logging tools not only protects your app but also enables you to identify and resolve issues more quickly, while maintaining a clear log that simplifies troubleshooting.

Bonus: Configure Secure HTTP Headers

The default HTTP headers in Express are not very secure. To boost your app's security, use the Helmet.js library, a middleware that sets secure HTTP headers. It's easy to implement, just install the package, initialize it in your project, and you're all set.

// ...
const helmet = require('helmet');

const app = express();

app.use(helmet());
// ...

Helmet helps protect against threats like clickjacking, cross-site scripting, and other common vulnerabilities. While adding HTTP headers might seem like a small step, it provides a powerful defense against potential attacks. By adding this extra layer of security, you make your app much harder to exploit.

Conclusion

Securing your Node.js app might feel overwhelming at first, but every step you take strengthens it and builds trust with your users. By understanding potential risks, using the right tools, and following security best practices, you can keep your app safe in an ever-changing online world.

If you found this article helpful, don’t stop here! Check out my article on ‘Git Commands Every Developer Should Know’, I covered how to safely undo changes, explore your project’s history like a pro, and keep your branches clean and organized. Follow for more coding tips and tricks to level up your skills. Keep exploring, and happy coding!

Git Commands Every Developer Should Know!

Mr CyberWolf — Mon, 06 Jan 2025 09:36:30 +0000

Introduction:

Have you ever found yourself stuck or frustrated while using Git, thinking, “There’s got to be a better way to do this?” Trust me, you’re not alone. Git is a powerful tool, but without the right knowledge, it can sometimes feel overwhelming. That’s why today, I’m sharing a few Git commands that I wish I’d known earlier — they’ve completely changed the way I work.

Git is more than a tool — it’s a collaborator in your development process. Mastering it not only helps you work smarter but also ensures smoother collaboration with your team. Whether you’re managing solo projects or contributing to complex repositories, knowing the right commands can turn a frustrating experience into a smooth and efficient workflow.

By the end of this article, you can handle scenarios like reverting changes safely, exploring your project’s history effectively, and keeping your branches clean and organized.

If you prefer visual learning, check out the video instead.

1. Update Your Last Commit

Have you ever forgotten to include something in a commit and just pushed a new one to fix it? Sure, it works, but later, when you look back at those messy commits, you might feel a bit awkward — or worse, imagine someone else finding them and wondering who made the mess!

Example of a messy commit history:

33d6560 (HEAD -> master) Sign up form
df36560 fixed Button action
efd6560 Minor changes

Here’s a simple solution: use git commit --amend --no-edit. This command lets you add any staged changes to your last commit without changing the commit message. If you want to update the message, just leave out the --no-edit flag, and Git will prompt you to edit it.

This command comes in very handy when you catch a small mistake right after committing.

2. Undo The Last Commit

If you want to undo commits, reset your working directory, or move the commit history back to a specific point. That’s where the git reset command comes in handy.

# Undo the last commit but keep changes in the staging area
git reset --soft HEAD~1

# Undo the last commit and unstage the changes
git reset --mixed HEAD~1

# Undo the last commit and discard changes
git reset --hard HEAD~1

Beginners often find git reset and git revert confusing since both are used to undo changes, but they work in different ways. Unlike git reset, which can rewrite history, git revert creates a new commit that undoes the changes while keeping the original commit intact in the history.

git revert <commit-hash>

When to Use Each:
git revert: When working on a shared branch or with a team, and you want to undo changes without affecting the commit history.
git reset: When you’re working on a local branch and need to clean up commits or undo changes without preserving history.

3. Recover Your Git History

Making mistakes is part of being human. Imagine you accidentally deleted a branch or commit and later realize you need it back? That’s where git reflog comes to the rescue. It keeps a record of changes to HEAD, letting you recover commits even after commands like git reset.

# Find its reference
git reflog

# Output
efd6560 HEAD@{0}: reset: moving to HEAD~1
df36560 HEAD@{1}: commit: fixed Button action

# Restore the previous commit
git checkout df36560

4. Save and Restore Your Work

Imagine you’re working on a feature when you suddenly need to switch branches. Most of us end up making a quick commit to save our progress and then amend it it later — messy and unnecessary.

What if there’s a better way? With git stash, You can temporarily save your changes, switch branches, and reapply them later. Simply run git stash before switching branches, and when you're ready, use git stash pop to restore your changes.

It’s also a lifesaver when you’ve made changes on the wrong branch. For example, if you realize you’ve been working on branch_2 instead of branch_1, No problem:

git stash
git switch branch_1
git stash pop

5. Find Bugs and Fix Issues

When something suddenly breaks in your project, it can be frustrating to go through all the commits to find the bug. That’s where git bisect comes in. It helps you identify which commit introduced the bug by using a binary search. It’s a powerful, yet simple process that works like this:

Start Bisecting: Tell Git which commit is "good" (working fine) and which is "bad" (contains the bug).
Git Tests Commits: Git will check out a commit between the good and bad commits and ask you if it’s good or bad.
Repeat: Keep testing the commits Git shows you, marking them as "good" or "bad."
Find the Bug: Git narrows it down to the exact commit that introduced the bug.

# Start the bisect process:
git bisect start

# Mark the current (broken) commit as bad:
git bisect bad HEAD

# Mark the last known good commit:
git bisect good <commit-hash>

Now, Git picks a commit between the good and bad ones and asks if it’s “good” or “bad.” It keeps narrowing things down, and before you know it, you’ll find the bug.

# Mark it as bad if it contains the bug
git bisect bad

# Mark it as good if it's working fine
git bisect good

Once found, you can fix the issue and use git bisect reset to end the process. It’s a quick way to track down bugs without testing every commit manually.

6. Rewrite Commit History

While you’re working on a feature, someone else might push code that’s useful for your task. To include their changes, you might merge master into your feature branch. But this can leave your commit history cluttered with multiple master to feature branch merges. That’s where the git rebase command comes in handy.

Before pushing your code upstream, run below command. This powerful command allows you to adjust the commits in your branch, keeping your history clean and organized.

git rebase -i origin/master

You can even edit commit messages or squash commits. The best part? Git opens this in your editor, making it as simple as selecting an option to remove a commit.

7. Apply Commits Selectively

What if you only need a specific commit from another branch, but don’t want to merge the entire branch? That’s where git cherry-pick comes in. It lets you select a single commit from one branch and apply it to another. For example, you might want to apply a bug fix from feature-branch to main without merging the whole branch.

git cherry-pick <commit-hash>

This way, you can get just the changes you need, right where you need them!

8. Tagging Your Commits

you’ve just pushed a major feature or a stable release in your project and want to mark it in the commit history. git tag allow you to do exactly that. It creates a marker at a specific commit, often used to signify releases or milestones.

# To create a tag:
git tag v1.0

# To push the tag:
git push origin v1.0

9. Track Commit Changes

You're working on a project and notice a bug you didn't see before. Unsure when it was introduced, you should run git log to check the commit history. It provides a detailed list of commits, including the commit hash, author, date, and message.

# You'll get a list of commits
git log 

# Single-line summary of each commit
git log --oneline

Before committing, it’s always a good idea to double-check your staged changes, especially when you’ve made several updates. That’s where git diff comes in handy.

git diff --staged

10. Clearing Untracked Files

Sometimes, your project gets messy with untracked files like build artifacts or log files. You want to remove them without affecting your tracked files. That’s where git clean comes in — it removes the untracked files while keeping your tracked files safe.

git clean -f

Conclusion:

You’ve learned some of the most useful Git commands that enhance your workflow and keep your repositories organized. From recovering lost commits with git reflog to cleaning up histories with git rebase and marking milestones with git tag, you now have the skills to handle various scenarios with confidence.

Next steps? Practice these commands in a test repository, explore advanced Git workflows, or dive into Git’s documentation to uncover even more features. With these commands, you’re ready to handle any Git challenge and collaborate like a pro. Keep exploring, and happy coding!

JWT Authentication with Access Tokens & Refresh Tokens In Node JS

Mr CyberWolf — Wed, 20 Apr 2022 15:54:39 +0000

What's up guys. We all know most important feature in every application is authentication. To make that authentication much more secured and make better user experience we need to use refresh and access token based authentication in your app. You might be thinking what is refresh token?, why should we use?, how should we use ?. Well don't worry I'm gonna cover everything from scratch.

So let's start coding...

I highly recommend you to watch demo video for better understanding. If you like my work Subscribe to my channel to support.

Demo Video

Project Github Link

Following table shows the overview of Rest APIs that exported

Methods	Urls	Actions
POST	/signUp	Signup User
POST	/logIn	Login User
POST	/refreshToken	Get new access token
DELETE	/refreshToken	Logout User

What is refresh token?

A refresh token is nothing but a access token but it has life time about 1 or 2 months. access token has expire time about 10 to 15 minutes. when ever this access token expire. we don't ask user to login again to get new access token instead we send refresh token to the server here we verify that token and send new access token to the client. with this method user don't have to login again and again. this makes user experience much more easier to user.

create Node.js App

$ mkdir refreshTokenAuth
$ cd refreshTokenAuth
$ npm init --yes
$ npm install express mongoose jsonwebtoken dotenv bcrypt joi joi-password-complexity 
$ npm install --save-dev nodemon

Project Structure

package.json

{
  "name": "refreshTokenAuth",
  "version": "1.0.0",
  "description": "",
  "main": "server.js",
  "type": "module",
  "scripts": {
    "start": "nodemon server.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "bcrypt": "^5.0.1",
    "dotenv": "^16.0.0",
    "express": "^4.17.3",
    "joi": "^17.6.0",
    "joi-password-complexity": "^5.1.0",
    "jsonwebtoken": "^8.5.1",
    "mongoose": "^6.2.8"
  },
  "devDependencies": {
    "nodemon": "^2.0.15"
  }
}

User Model
/models/User.js

import mongoose from "mongoose";

const Schema = mongoose.Schema;

const userSchema = new Schema({
    userName: {
        type: String,
        required: true,
    },
    email: {
        type: String,
        required: true,
        unique: true,
    },
    password: {
        type: String,
        required: true,
    },
    roles: {
        type: [String],
        enum: ["user", "admin", "super_admin"],
        default: ["user"],
    },
});

const User = mongoose.model("User", userSchema);

export default User;

User Token Model
/models/UserToken.js

import mongoose from "mongoose";

const Schema = mongoose.Schema;

const userTokenSchema = new Schema({
    userId: { type: Schema.Types.ObjectId, required: true },
    token: { type: String, required: true },
    createdAt: { type: Date, default: Date.now, expires: 30 * 86400 }, // 30 days
});

const UserToken = mongoose.model("UserToken", userTokenSchema);

export default UserToken;

Generate Tokens Function
/utils/generateTokens.js

import jwt from "jsonwebtoken";
import UserToken from "../models/UserToken.js";

const generateTokens = async (user) => {
    try {
        const payload = { _id: user._id, roles: user.roles };
        const accessToken = jwt.sign(
            payload,
            process.env.ACCESS_TOKEN_PRIVATE_KEY,
            { expiresIn: "14m" }
        );
        const refreshToken = jwt.sign(
            payload,
            process.env.REFRESH_TOKEN_PRIVATE_KEY,
            { expiresIn: "30d" }
        );

        const userToken = await UserToken.findOne({ userId: user._id });
        if (userToken) await userToken.remove();

        await new UserToken({ userId: user._id, token: refreshToken }).save();
        return Promise.resolve({ accessToken, refreshToken });
    } catch (err) {
        return Promise.reject(err);
    }
};

export default generateTokens;

Verify Refresh Token Function
/utils/verifyRefreshToken.js

import UserToken from "../models/UserToken.js";
import jwt from "jsonwebtoken";

const verifyRefreshToken = (refreshToken) => {
    const privateKey = process.env.REFRESH_TOKEN_PRIVATE_KEY;

    return new Promise((resolve, reject) => {
        UserToken.findOne({ token: refreshToken }, (err, doc) => {
            if (!doc)
                return reject({ error: true, message: "Invalid refresh token" });

            jwt.verify(refreshToken, privateKey, (err, tokenDetails) => {
                if (err)
                    return reject({ error: true, message: "Invalid refresh token" });
                resolve({
                    tokenDetails,
                    error: false,
                    message: "Valid refresh token",
                });
            });
        });
    });
};

export default verifyRefreshToken;

Validation Schema Function
/utils/validationSchema.js

import Joi from "joi";
import passwordComplexity from "joi-password-complexity";

const signUpBodyValidation = (body) => {
    const schema = Joi.object({
        userName: Joi.string().required().label("User Name"),
        email: Joi.string().email().required().label("Email"),
        password: passwordComplexity().required().label("Password"),
    });
    return schema.validate(body);
};

const logInBodyValidation = (body) => {
    const schema = Joi.object({
        email: Joi.string().email().required().label("Email"),
        password: Joi.string().required().label("Password"),
    });
    return schema.validate(body);
};

const refreshTokenBodyValidation = (body) => {
    const schema = Joi.object({
        refreshToken: Joi.string().required().label("Refresh Token"),
    });
    return schema.validate(body);
};

export {
    signUpBodyValidation,
    logInBodyValidation,
    refreshTokenBodyValidation,
};

Auth Routes
/routes/auth.js

import { Router } from "express";
import User from "../models/User.js";
import bcrypt from "bcrypt";
import generateTokens from "../utils/generateTokens.js";
import {
    signUpBodyValidation,
    logInBodyValidation,
} from "../utils/validationSchema.js";

const router = Router();

// signup
router.post("/signUp", async (req, res) => {
    try {
        const { error } = signUpBodyValidation(req.body);
        if (error)
            return res
                .status(400)
                .json({ error: true, message: error.details[0].message });

        const user = await User.findOne({ email: req.body.email });
        if (user)
            return res
                .status(400)
                .json({ error: true, message: "User with given email already exist" });

        const salt = await bcrypt.genSalt(Number(process.env.SALT));
        const hashPassword = await bcrypt.hash(req.body.password, salt);

        await new User({ ...req.body, password: hashPassword }).save();

        res
            .status(201)
            .json({ error: false, message: "Account created sucessfully" });
    } catch (err) {
        console.log(err);
        res.status(500).json({ error: true, message: "Internal Server Error" });
    }
});

// login
router.post("/logIn", async (req, res) => {
    try {
        const { error } = logInBodyValidation(req.body);
        if (error)
            return res
                .status(400)
                .json({ error: true, message: error.details[0].message });

        const user = await User.findOne({ email: req.body.email });
        if (!user)
            return res
                .status(401)
                .json({ error: true, message: "Invalid email or password" });

        const verifiedPassword = await bcrypt.compare(
            req.body.password,
            user.password
        );
        if (!verifiedPassword)
            return res
                .status(401)
                .json({ error: true, message: "Invalid email or password" });

        const { accessToken, refreshToken } = await generateTokens(user);

        res.status(200).json({
            error: false,
            accessToken,
            refreshToken,
            message: "Logged in sucessfully",
        });
    } catch (err) {
        console.log(err);
        res.status(500).json({ error: true, message: "Internal Server Error" });
    }
});

export default router;

Refresh Token Routes
/routes/refreshToken.js

import { Router } from "express";
import UserToken from "../models/UserToken.js";
import jwt from "jsonwebtoken";
import { refreshTokenBodyValidation } from "../utils/validationSchema.js";
import verifyRefreshToken from "../utils/verifyRefreshToken.js";

const router = Router();

// get new access token
router.post("/", async (req, res) => {
    const { error } = refreshTokenBodyValidation(req.body);
    if (error)
        return res
            .status(400)
            .json({ error: true, message: error.details[0].message });

    verifyRefreshToken(req.body.refreshToken)
        .then(({ tokenDetails }) => {
            const payload = { _id: tokenDetails._id, roles: tokenDetails.roles };
            const accessToken = jwt.sign(
                payload,
                process.env.ACCESS_TOKEN_PRIVATE_KEY,
                { expiresIn: "14m" }
            );
            res.status(200).json({
                error: false,
                accessToken,
                message: "Access token created successfully",
            });
        })
        .catch((err) => res.status(400).json(err));
});

// logout
router.delete("/", async (req, res) => {
    try {
        const { error } = refreshTokenBodyValidation(req.body);
        if (error)
            return res
                .status(400)
                .json({ error: true, message: error.details[0].message });

        const userToken = await UserToken.findOne({ token: req.body.refreshToken });
        if (!userToken)
            return res
                .status(200)
                .json({ error: false, message: "Logged Out Sucessfully" });

        await userToken.remove();
        res.status(200).json({ error: false, message: "Logged Out Sucessfully" });
    } catch (err) {
        console.log(err);
        res.status(500).json({ error: true, message: "Internal Server Error" });
    }
});

export default router;

.env file
/.env

DB = Your database URL
SALT = 10
ACCESS_TOKEN_PRIVATE_KEY = Add your private key
REFRESH_TOKEN_PRIVATE_KEY = Add your private key

Database Connect
/dbConnect.js

import mongoose from "mongoose";

const dbConnect = () => {
    const connectionParams = { useNewUrlParser: true };
    mongoose.connect(process.env.DB, connectionParams);

    mongoose.connection.on("connected", () => {
        console.log("Connected to database sucessfully");
    });

    mongoose.connection.on("error", (err) => {
        console.log("Error while connecting to database :" + err);
    });

    mongoose.connection.on("disconnected", () => {
        console.log("Mongodb connection disconnected");
    });
};

export default dbConnect;

Sever.js
/server.js

import express from "express";
import { config } from "dotenv";
import dbConnect from "./dbConnect.js";
import authRoutes from "./routes/auth.js";
import refreshTokenRoutes from "./routes/refreshToken.js";

const app = express();

config();
dbConnect();

app.use(express.json());

app.use("/api", authRoutes);
app.use("/api/refreshToken", refreshTokenRoutes);

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

That's it guys we have successfully implemented refresh and access token based authentication in Node JS.

For bonus within this project I have implemented routes which only authenticated users can access and role based authorization. You can find it in Demo Video

Thank You :)

Stripe payment gateway integration in node.js

Mr CyberWolf — Mon, 28 Jun 2021 00:19:45 +0000

Hello guys, Today we gonna implement stripe payment gateway in node. We create simple order and pay with card. Stripe checkout gives us beautiful UI and various payment options. For better understanding watch demo video and support my channel 🙂.

So let's start coding...

Demo Video

Project Github Link

Create Node.js App

$ mkdir node-stripe-payment-gateway
$ cd node-stripe-payment-gateway
$ npm init --yes
$ npm install express stripe

Express : Express is minimal and flexible Node.js web applicaton framework.
Stripe : The Stripe Node library provides convenient access to the stripe API.

The package.json look like :

{
  "name": "node-stripe-payment-gateway",
  "version": "1.0.0",
  "description": "Implementing stripe payment gateway in node.js",
  "main": "index.js",
  "scripts": {
    "start": "node index.js"
  },
  "author": "jahangeer",
  "license": "ISC",
  "dependencies": {
    "express": "^4.17.1",
    "stripe": "^8.156.0"
  }
}

Configure Payment Route
In root folder, create index.js file

const express = require("express");
const app = express();
const path = require("path");
const stripe = require("stripe")("Add your secret key");

const YOUR_DOMAIN = "http://localhost:8080";

// static files
app.use(express.static(path.join(__dirname, "views")));

// middleware
app.use(express.json());

// routes
app.post("/payment", async (req, res) => {
    const { product } = req.body;
    const session = await stripe.checkout.sessions.create({
        payment_method_types: ["card"],
        line_items: [
            {
                price_data: {
                    currency: "inr",
                    product_data: {
                        name: product.name,
                        images: [product.image],
                    },
                    unit_amount: product.amount * 100,
                },
                quantity: product.quantity,
            },
        ],
        mode: "payment",
        success_url: `${YOUR_DOMAIN}/success.html`,
        cancel_url: `${YOUR_DOMAIN}/cancel.html`,
    });

    res.json({ id: session.id });
});

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

Style.css
/views/style.css

.container {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f5f5f5;
}

.product {
    width: 250px;
    padding: 10px;
    height: auto;
    background-color: white;
    border-radius: 5px;
    border: 2px solid black;
}

.product_img {
    width: 100%;
    height: 250px;
    object-fit: contain;
    border-bottom: 1px solid black;
}

.description {
    display: flex;
    justify-content: space-between;
}

#btn {
    width: 100%;
    padding: 10px;
}

Checkout UI
/views/checkout.html

<!DOCTYPE html>
<html>
  <head>
    <title>Buy Products</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://js.stripe.com/v3/"></script>
  </head>
  <body class="container" >
      <div class="product">
        <img
          src="https://store.storeimages.cdn-apple.com/4668/as-images.apple.com/is/iphone-12-purple-select-2021?wid=470&hei=556&fmt=jpeg&qlt=95&.v=1617130317000"
          alt="iphone 12"
          class="product_img"
        />
        <div class="description">
          <h3>iPhone 12</h3>
          <h4>&#8377 100.00</h4>
        </div>
        <button type="button" id="btn">BUY</button>
      </div>
  </body>
  <script type="text/javascript">
    // Create an instance of the Stripe object with your publishable API key
    var stripe = Stripe("Add your publishable key");
    var checkoutButton = document.getElementById("btn");

    checkoutButton.addEventListener("click", function () {
      fetch("/payment", {
        headers: {'Content-Type': 'application/json'},
        method: "POST",
        body: JSON.stringify({
            "product": {
                "name": "iPhone 12", 
                "image": "https://store.storeimages.cdn-apple.com/4668/as-images.apple.com/is/iphone-12-purple-select-2021?wid=470&hei=556&fmt=jpeg&qlt=95&.v=1617130317000", 
                "amount": 100,
                "quantity": 1
            }})
      })
        .then(function (response) {
          return response.json();
        })
        .then(function (session) {
          return stripe.redirectToCheckout({ sessionId: session.id });
        })
        .then(function (result) {
          // If redirectToCheckout fails due to a browser or network
          // error, you should display the localized error message to your
          // customer using error.message.
          if (result.error) {
            alert(result.error.message);
          }
        })
        .catch(function (error) {
          console.error("Error:", error);
        });
    });
  </script>
</html>

Transaction Success UI
/views/success.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Transaction Sucess</title>
    <link rel="stylesheet" href="style.css">
</head>
<body class="container" >
    <div class="product">
        <img
        src="https://png.pngtree.com/png-vector/20191104/ourmid/pngtree-checkmark-icon-green-color-png-image_1952984.jpg"
        alt="succes tick mark"
        class="product_img"
      />
      <h3 style="text-align: center" >Transaction Successful</h3>
    </div>
</body>
</html>

Transaction Cancel UI
/views/cancel.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cancel order</title>
    <link rel="stylesheet" href="style.css">
</head>
<body class="container" >
    <div class="product">Forgot to add something to your cart? Shop around then come back to pay!</div>
</body>
</html>

That's it, run the server and test api with fake card details. I hope you have learned something new.

Thank You...

Authentication With JWT (Json Web Token) In React - MERN Auth

Mr CyberWolf — Wed, 09 Jun 2021 16:59:28 +0000

Hi guys, Today we gonna implement authentication in React. We gonna build beautiful forms and handle APIs. Back-end of this project is already built, download it from below post.

Node.js API Authentication with JWT (Json Web Token) - Auth Middleware

For better understanding watch Demo Video & Support

Source code of this project

Let's Start Coding...

Create React App & Install dependencies

$    npx create-react-app react-auth-jwt
$    cd react-auth-jwt
$    npm install react-router-dom axios @material-ui/core jwt-decode
$    npm start

react-router-dom : A tool that allows you to handle routes in a web app
axios : It's a promise based HTTP client for the browser and Node.js
@material-ui/core (optional) : Makes writing beautiful UI easy
jwt-decode : It helps decoding JWT token

Configure Environmental Variables
/.env

REACT_APP_API_URL = http://localhost:8080/api

Configure Auth Service
/services/authServices.js

import axios from "axios";
import jwtDecode from "jwt-decode";
const apiUrl = process.env.REACT_APP_API_URL;

export function login(data) {
    return axios.post(`${apiUrl}/auth`, data);
}

export function getCurrentUser() {
    try {
        const token = localStorage.getItem("token");
        return jwtDecode(token);
    } catch (error) {
        return null;
    }
}

export function logout() {
    localStorage.removeItem("token");
}

Configure User Service
/services/userServices.js

import axios from "axios";
const apiUrl = process.env.REACT_APP_API_URL;

export function register(data) {
    return axios.post(`${apiUrl}/users`, data);
}

App.css

a {
    text-decoration: none;
}

.flex {
    display: flex;
    justify-content: center;
    align-items: center;
}

.column {
    flex-direction: column;
}

.full_screen {
    width: 100vw;
    height: 100vh;
}

.form {
    display: flex;
    flex-direction: column;
    width: 300px;
    padding: 20px;
}

.form_heading {
    font-size: 25px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 15px;
}

.input {
    width: 100% !important;
    margin: 5px 0 !important;
}

Home Component
/src/components/Home.jsx

import React, { useState, useEffect } from "react";
import { Link } from "react-router-dom";
import { getCurrentUser } from "../services/authServices";
import { AppBar, Toolbar, Button } from "@material-ui/core";

const Home = () => {
    const [user, setUser] = useState("");

    useEffect(() => {
        setUser(getCurrentUser());
    }, []);

    return (
        <AppBar color="default">
            <Toolbar>
                <h3 style={{ flexGrow: "1" }}>Domain</h3>
                {!user && (
                    <React.Fragment>
                        <Link to="/login">
                            <Button
                                style={{ marginRight: "10px" }}
                                variant="outlined"
                                color="secondary"
                            >
                                Login
                            </Button>
                        </Link>
                        <Link to="/signup">
                            <Button variant="outlined" color="secondary">
                                Signup
                            </Button>
                        </Link>
                    </React.Fragment>
                )}
                {user && (
                    <React.Fragment>
                        <h4 style={{ marginRight: "15px" }}>{user.name}</h4>
                        <Link to="/logout">
                            <Button variant="outlined" color="secondary">
                                Logout
                            </Button>
                        </Link>
                    </React.Fragment>
                )}
            </Toolbar>
        </AppBar>
    );
};

export default Home;

Input Component
/src/components/common/Input.jsx

import React from "react";
import { TextField } from "@material-ui/core";

const Input = ({ error, ...rest }) => {
    return (
        <React.Fragment>
            {error ? (
                <TextField
                    {...rest}
                    error
                    helperText={error}
                    size="small"
                    variant="outlined"
                    className="input"
                />
            ) : (
                <TextField
                    {...rest}
                    variant="outlined"
                    size="small"
                    className="input"
                />
            )}
        </React.Fragment>
    );
};

export default Input;

Form Component
/src/components/common/Form.js

import React, { Component } from "react";
import { Button } from "@material-ui/core";
import Input from "./Input";

class Form extends Component {
    state = { data: {}, errors: {} };

    handleChange = ({ currentTarget: input }) => {
        const data = { ...this.state.data };
        data[input.name] = input.value;
        this.setState({ data });
    };

    handleSubmit = (event) => {
        event.preventDefault();
        this.doSubmit();
    };

    renderInput(name, label, type = "text", required = true) {
        const { data, errors } = this.state;
        return (
            <Input
                name={name}
                label={label}
                type={type}
                required={required}
                value={data[name]}
                error={errors[name]}
                onChange={this.handleChange}
            />
        );
    }

    renderSubmitBtn(name) {
        return (
            <Button
                type="submit"
                style={{ marginLeft: "auto" }}
                variant="outlined"
                size="medium"
                color="secondary"
            >
                {name}
            </Button>
        );
    }
}

export default Form;

Signup Component
/src/components/Signup.jsx

import React from "react";
import { Link } from "react-router-dom";
import { register } from "../services/userServices";
import { Paper } from "@material-ui/core";
import Form from "./common/Form";

class Signup extends Form {
    state = { data: { name: "", email: "", password: "" }, errors: {} };

    doSubmit = async () => {
        try {
            await register(this.state.data);
            this.props.history.push("/login");
        } catch (error) {
            console.log(error);
        }
    };

    render() {
        return (
            <form
                onSubmit={this.handleSubmit}
                className="full_screen flex column"
            >
                <Paper elevation={3} className="form">
                    <div className="form_heading">Signup</div>
                    {this.renderInput("name", "Name")}
                    {this.renderInput("email", "Email", "email")}
                    {this.renderInput("password", "Password", "password")}
                    {this.renderSubmitBtn("Signup")}
                </Paper>
                <div style={{ margin: "10px 0" }}>
                    Already have an account? <Link to="/login">Login</Link>
                </div>
            </form>
        );
    }
}

export default Signup;

Login Component
/src/components/Login.jsx

import React from "react";
import { Link } from "react-router-dom";
import { login } from "../services/authServices";
import { Paper } from "@material-ui/core";
import Form from "./common/Form";

class Login extends Form {
    state = { data: { email: "", password: "" }, errors: {} };

    doSubmit = async () => {
        try {
            const { data } = await login(this.state.data);
            window.localStorage.setItem("token", data);
            window.location = "/";
        } catch (error) {
            const errors = { ...this.state.errors };
            errors.email = error.response.data;
            errors.password = error.response.data;
            this.setState({ errors });
        }
    };

    render() {
        return (
            <form
                onSubmit={this.handleSubmit}
                className="full_screen flex column"
            >
                <Paper className="form" elevation={3}>
                    <div className="form_heading">Login</div>
                    {this.renderInput("email", "Email", "email")}
                    {this.renderInput("password", "Password", "password")}
                    {this.renderSubmitBtn("Login")}
                </Paper>
                <div style={{ margin: "10px 0" }}>
                    Don't have an account? <Link to="/signup">Signup</Link>
                </div>
            </form>
        );
    }
}

export default Login;

Logout Component
/src/components/Logout.jsx

import { useEffect } from "react";
import { logout } from "../services/authServices";

const Logout = () => {
    useEffect(() => {
        logout();
        window.location = "/";
    }, []);
    return null;
};

export default Logout;

React Router Dom
In Index.js

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";
import "./index.css";
import App from "./App";

ReactDOM.render(
    <React.StrictMode>
        <BrowserRouter>
            <App />
        </BrowserRouter>
    </React.StrictMode>,
    document.getElementById("root")
);

In App.js

import {Switch, Route} from 'react-router-dom';
import Home from './components/Home';
import Signup from './components/Signup';
import Login from './components/Login';
import Logout from './components/Logout';
import "./App.css";

function App() {
    return (
        <Switch>
            <Route path="/" exact component={Home} />
            <Route path="/signup" component={Signup} />
            <Route path="/login" component={Login} />
            <Route path="/logout" component={Logout} />
        </Switch>
    );
}

export default App;

That's it Run on local server and test app. If you found any mistakes or making code better please let me know in comment. I hope you have learned something.

Thank you...

Node.js API Authentication with JWT (Json Web Token) - Auth Middleware

Mr CyberWolf — Fri, 04 Jun 2021 17:59:20 +0000

Hi, Today we are going to implement API authentication with JWT in node.js application. Authentication is most important feature in every application. Even if you are beginner feel free to try this tutorial, we gonna start from scratch. We also gonna write Auth middleware, which allow only authenticated people to access the route.

Authentication With JWT (Json Web Token) In React

For better understanding watch Demo Video

Source Code

Let's Start Coding...

App Overview :

Project Structure

Following table shows the overview of the Rest APIs that be exported :

Methods	Urls	Actions
POST	/api/users	Create user
POST	/api/auth	Authenticate user
GET	/api/users/me	Get authenticated user details

Create Node.js App and Install dependencies

$    mkdir node-auth-jwt
$    cd node-auth-jwt
$    npm init --yes
$    npm install express mongoose jsonwebtoken bcrypt joi dotenv

express : Express is minimal and flexible Node.js web applicaton framework.
mongoose : Mongoose is an Object Data Modeling (ODM) library for MongoDB and Node.js.
jsonwebtoken : It's a compact URL of representing claims to be transferred between two parties.
bcrypt : It's a password hashing function.
joi : Joi is an object schema description language and validator for javascript objects.
dotenv : It loads environment variables from a .env file.

Setup Express Web Server
/index.js

require("dotenv").config();
const express = require("express");
const app = express();

app.use(express.json());

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

Configure Environmental Variables
/.env

DB = "mongodb://localhost/node-auth-api/"
JWTPRIVATEKEY = "secretkey"
SALT = 10

Configure MongoDB Database
/db.js

const mongoose = require("mongoose");

module.exports = async () => {
    try {
        const connectionParams = {
            useNewUrlParser: true,
            useUnifiedTopology: true,
            useCreateIndex: true,
        };
        await mongoose.connect(process.env.DB, connectionParams);
        console.log("connected to database.");
    } catch (error) {
        console.log("could not connect to database", error);
    }
};

Import db.js in index.js and call it

//...
const connection = require("./db");
const express = require("express");
const app = express();

connection();
app.use(express.json());
//...

Create User Model
/models/user.js

const mongoose = require("mongoose");
const Schema = mongoose.Schema;
const jwt = require("jsonwebtoken");
const Joi = require("joi");

const userSchema = new Schema({
    name: {
        type: String,
        required: true,
    },
    email: {
        type: String,
        required: true,
    },
    password: {
        type: String,
        required: true,
    },
});

userSchema.methods.generateAuthToken = function () {
    const token = jwt.sign({ _id: this._id }, process.env.JWTPRIVATEKEY);
    return token;
};

const User = mongoose.model("user", userSchema);

const validate = (user) => {
    const schema = Joi.object({
        name: Joi.string().required(),
        email: Joi.string().email().required(),
        password: Joi.string().required(),
    });
    return schema.validate(user);
};

module.exports = { User, validate };

What we have done :

We have created user table with name, email and password.
With JWT, we generate token with payload of user id.
With Joi, we gonna validate data.

Register Route
/routes/users.js

const { User, validate } = require("../models/user");
const bcrypt = require("bcrypt");
const express = require("express");
const router = express.Router();

router.post("/", async (req, res) => {
    try {
        const { error } = validate(req.body);
        if (error) return res.status(400).send(error.details[0].message);

        const user = new User(req.body);

        const salt = await bcrypt.genSalt(Number(process.env.SALT));
        user.password = await bcrypt.hash(user.password, salt);
        await user.save();

        res.send(user);
    } catch (error) {
        console.log(error);
        res.send("An error occured");
    }
});

module.exports = router;

Login Route
/routes/auth.js

const { User } = require("../models/user");
const bcrypt = require("bcrypt");
const Joi = require("joi");
const express = require("express");
const router = express.Router();

router.post("/", async (req, res) => {
    try {
        const { error } = validate(req.body);
        if (error) return res.status(400).send(error.details[0].message);

        const user = await User.findOne({ email: req.body.email });
        if (!user) return res.status(400).send("Invalid email or password");

        const validPassword = await bcrypt.compare(
            req.body.password,
            user.password
        );
        if (!validPassword)
            return res.status(400).send("Invalid email or password");

        const token = user.generateAuthToken();
        res.send(token);
    } catch (error) {
        console.log(error);
        res.send("An error occured");
    }
});

const validate = (user) => {
    const schema = Joi.object({
        email: Joi.string().email().required(),
        password: Joi.string().required(),
    });
    return schema.validate(user);
};

module.exports = router;

Auth Middleware
/middleware/auth.js

const jwt = require("jsonwebtoken");

module.exports = (req, res, next) => {
    try {
        const token = req.header("x-auth-token");
        if (!token) return res.status(403).send("Access denied.");

        const decoded = jwt.verify(token, process.env.JWTPRIVATEKEY);
        req.user = decoded;
        next();
    } catch (error) {
        res.status(400).send("Invalid token");
    }
};

User Get Route
/routes/users.js

const auth = require("../middleware/auth");
//...

router.get("/me", auth, async (req, res) => {
    try {
        const user = await User.findById(req.user._id).select("-password -__v");
        res.send(user);
    } catch (error) {
        console.log(error);
        res.send("An error occured");
    }
});

module.exports = router;

Import Routes in Index.js

//...
const users = require("./routes/users");
const auth = require("./routes/auth");
//...

app.use(express.json());

app.use("/api/users", users);
app.use("/api/auth", auth);

//...

That's it Run the server and test the APIs. If you found any mistakes or making code better please let me know in comment. I hope you have learned something.

Thank you...

How to call APIs in React Redux ?

Mr CyberWolf — Mon, 31 May 2021 15:36:31 +0000

Hi, Today we are going to build simple React application which call the get request and show the data. We are using Redux for this application, Redux is a state management library for javascript applications. If you are not familiar with Redux, I highly recommend you to read the Redux fundamentals from Redux documentation. For better understanding watch the demo video.

So let's start coding...

Demo Video

Source Code

Project Structure

Create React App

$ npx create-react-app react-redux-api
$ cd react-redux-api
$ npm start

Install Dependencies

Redux : It's a State management library for javascript applications.
Axios : It's a promise-based HTTP client that supports an easy-to-use API.
React-Redux : React Redux is the official React Ui bindings layer for Redux.
@reduxjs/toolkit : For writing clean redux code and it comes with most widly used Redux addons.

Create API Actions
src/store/api.js

import { createAction } from "@reduxjs/toolkit";

export const apiCallBegan = createAction("api/callBegan");
export const apiCallSucess = createAction("api/callSuccess");
export const apiCallFailed = createAction("api/callFailed");

Create API Middleware
src/store/middleware/api.js

import axios from "axios";
import * as actions from "../api";

const api =
    ({ dispatch }) =>
    (next) =>
    async (action) => {
        if (action.type !== actions.apiCallBegan.type) return next(action);

        const { url, method, data, onStart, onSuccess, onError } =
            action.payload;

        if (onStart) dispatch({ type: onStart });

        next(action);

        try {
            const response = await axios.request({
                baseURL: "https://jsonplaceholder.typicode.com",
                url,
                method,
                data,
            });
            // General
            dispatch(actions.apiCallSucess(response.data));
            // Specific
            if (onSuccess)
                dispatch({ type: onSuccess, payload: response.data });
        } catch (error) {
            // General
            dispatch(actions.apiCallFailed(error.message));
            // Specific
            if (onError) dispatch({ type: onError, payload: error.message });
        }
    };

export default api;

Redux already has an async middleware function called Redux "Thunk" middleware. The thunk middleware allows us to write functions that get dispatch and getState as arguments. For better understanding read documentation.

Create Actions & Reducers for Posts
src/store/posts.js

import { createSlice } from "@reduxjs/toolkit";
import { apiCallBegan } from "./api";

const slice = createSlice({
    name: "posts",
    initialState: {
        list: [],
        loading: false,
    },

    reducers: {
        postsRequested: (posts, action) => {
            posts.loading = true;
        },

        postsReceived: (posts, action) => {
            posts.list = action.payload;
            posts.loading = false;
        },

        postsRequestFailed: (posts, action) => {
            posts.loading = false;
        },
    },
});

export default slice.reducer;

const { postsRequested, postsReceived, postsRequestFailed } = slice.actions;

const url = "/posts";

export const loadposts = () => (dispatch) => {
    return dispatch(
        apiCallBegan({
            url,
            onStart: postsRequested.type,
            onSuccess: postsReceived.type,
            onError: postsRequestFailed.type,
        })
    );
};

Configure Store

import { configureStore, getDefaultMiddleware } from "@reduxjs/toolkit";
import reducer from "./posts";
import api from "./middleware/api";

export default function store() {
    return configureStore({
        reducer,
        middleware: [...getDefaultMiddleware(), api],
    });
}

Posts Component
src/components/posts.js

import { useDispatch, useSelector } from "react-redux";
import { loadposts } from "../store/posts";
import { useEffect } from "react";

const Posts = () => {
    const dispatch = useDispatch();
    const posts = useSelector((state) => state.list);

    useEffect(() => {
        dispatch(loadposts());
    }, [dispatch]);

    return (
        <div>
            <h1>Posts</h1>
            <ul>
                {posts.map((post) => (
                    <li key={post.id}>{post.title}</li>
                ))}
            </ul>
        </div>
    );
};

export default Posts;

App.js

import { Provider } from "react-redux";
import configureStore from "./store/configureStore";
import Posts from "./components/posts";
import "./App.css";

const store = configureStore();

const App = () => {
    return (
        <Provider store={store}>
            <Posts />
        </Provider>
    );
};

export default App;

That's it, run the project on your local server. check APIs are working or not. If you found any mistakes or making code better please let me know. I hope you have learned something.

If you like this post, support me on my youtube channel it inspire me a lot.

Thank You...

How To Create Forms In React ? - Controlled Inputs & Material UI

Mr CyberWolf — Thu, 27 May 2021 13:39:01 +0000

Hi guys, Today we are going to build a simple form which take input from user and we log the data in console. We gonna build reusable inputs, which makes our code look clean and easy to build forms.

so let's start coding...

Demo Video

Source Code

Project Structure

Create a New React App

npx create-react-app react-forms
cd react-forms
npm start

I'am using material-ui/core package, It is optional . If you wanna follow along with me install this package by this command.

npm install @material-ui/core

App.css

.App {
    width: 100vw;
    height: 100vh;
    background-color: #f5f5f5;
}

.flex {
    display: flex;
    justify-content: center;
    align-items: center;
}

.column {
    flex-direction: column;
}

.form {
    display: flex;
    flex-direction: column;
    width: 350px;
    padding: 10px;
}

.input {
    width: 100% !important;
    margin: 5px 0 !important;
}

Create textInput component

/src/components/common/textInput.js

import TextField from "@material-ui/core/TextField";

const TextInput = ({ ...rest }) => {
    return (
        <TextField
            variant="outlined"
            size="small"
            className="input"
            {...rest}
        />
    );
};

export default TextInput;

...rest = You're simply pulling off the rest of the properties defined on your props object into a new argument called rest.

Create selectInput component

/src/components/common/selectInput.js

import TextField from "@material-ui/core/TextField";

const SelectInput = ({ options, ...rest }) => {
    return (
        <TextField
            variant="outlined"
            size="small"
            className="input"
            select
            {...rest}
            SelectProps={{ native: true }}
        >
            <option defaultValue="" style={{ display: "none" }}></option>
            {options.map((option) => (
                <option key={option} value={option}>
                    {option}
                </option>
            ))}
        </TextField>
    );
};

export default SelectInput;

Create radioInput component

/src/components/common/radioInput.js

import Radio from "@material-ui/core/Radio";
import RadioGroup from "@material-ui/core/RadioGroup";
import FormControlLabel from "@material-ui/core/FormControlLabel";
import FormLabel from "@material-ui/core/FormLabel";

const RadioInput = ({ label, options, required, ...rest }) => {
    return (
        <div style={{ justifyContent: "space-between" }} className="flex input">
            <FormLabel component="legend">{label}</FormLabel>
            <RadioGroup {...rest} row>
                {options.map((option) => (
                    <FormControlLabel
                        value={option}
                        control={<Radio color="primary" required={required} />}
                        label={option}
                        key={option}
                    />
                ))}
            </RadioGroup>
        </div>
    );
};

export default RadioInput;

Create form component

/src/components/common/form.js

import React, { Component } from "react";
import Button from "@material-ui/core/Button";
import TextInput from "./textInput";
import RadioInput from "./radioInput";
import SelectInput from "./selectInput";

class Form extends Component {
    state = { data: {} };

    handleChange = ({ currentTarget: input }) => {
        const data = { ...this.state.data };
        data[input.name] = input.value;
        this.setState({ data });
    };

    handleSubmit = (event) => {
        event.preventDefault();
        this.doSubmit();
    };

    renderTextInput(name, label, type = "text", required = true) {
        const { data } = this.state;
        return (
            <TextInput
                name={name}
                value={data[name]}
                type={type}
                required={required}
                label={label}
                onChange={this.handleChange}
            />
        );
    }

    renderRadioInput(name, label, options, required = true) {
        const { data } = this.state;
        return (
            <RadioInput
                name={name}
                value={data[name]}
                onChange={this.handleChange}
                label={label}
                options={options}
                required={required}
            />
        );
    }

    renderSelectInput(name, label, options, required = true) {
        const { data } = this.state;
        return (
            <SelectInput
                name={name}
                value={data[name]}
                options={options}
                label={label}
                required={required}
                onChange={this.handleChange}
            />
        );
    }

    renderSubmitBtn(name) {
        return (
            <Button
                type="submit"
                style={{ marginLeft: "auto" }}
                variant="contained"
                size="medium"
                color="primary"
            >
                {name}
            </Button>
        );
    }
}

export default Form;

Create profile component

/src/components/profile.js

import React from "react";
import Form from "./common/form";
import Card from "@material-ui/core/Card";

class Profile extends Form {
    state = {
        data: { name: "", email: "", status: "", gender: "" },
    };

    doSubmit = () => {
        console.log(this.state.data);
    };

    render() {
        return (
            <div className="flex column">
                <h1>Profile</h1>
                <form onSubmit={this.handleSubmit}>
                    <Card className="form">
                        {this.renderTextInput("name", "Name")}
                        {this.renderTextInput("email", "Email", "email")}
                        {this.renderSelectInput("status", "Marital Status", [
                            "Single",
                            "Married",
                            "Divorced",
                            "Widowed",
                        ])}
                        {this.renderRadioInput("gender", "Gender", [
                            "Male",
                            "Female",
                            "Other",
                        ])}
                        {this.renderSubmitBtn("Submit")}
                    </Card>
                </form>
            </div>
        );
    }
}

export default Profile;

App.js

import Profile from "./components/profile";
import "./App.css";

function App() {
    return (
        <div className="App flex">
            <Profile />
        </div>
    );
}

export default App;

That's it test the form in browser, If you found any mistakes or making code better let me know in comment. For better understanding please watch Youtube video. Subscribe to my Youtube channel to get more knowledgeable content every week.

Arigato Gozaimasu.. 🙂

Forgot password & Password reset flow in node.js

Mr CyberWolf — Sun, 23 May 2021 10:21:08 +0000

Hi guys today we gonna implement password reset via email in node.js. If you user forgot there password, we send an link to you user email account. From that link user can add there new password. If you just wanna know how this concept works, you can start from Model section .

So let's start coding...

Demo Video

Project Github Link

App Overview :
Project Structure

Following table shows the overview of Rest APIs that exported

Methods	Urls	Actions
POST	/users	create user
POST	/password-reset	Send password reset link
POST	/password-reset/:userId/:token	Reset user password

create Node.js App

$ mkdir node-email-password-reset
$ cd node-email-password-reset
$ npm init --yes
$ npm install express mongoose dotenv nodemailer joi

Express : Express is minimal and flexible Node.js web applicaton framework.
Mongoose : Mongoose is an Object Data Modeling (ODM) library for MongoDB and Node.js.
Nodemailer : Nodemailer allow us to send email.
Joi : Joi is an object schema description language and validator for javascript objects.
Dotenv : It loads environment variables from a .env file.

package.json

{
  "name": "node-email-password-reset",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "dotenv": "^9.0.2",
    "express": "^4.17.1",
    "joi": "^17.4.0",
    "mongoose": "^5.12.10",
    "nodemailer": "^6.6.0"
  }
}

Setup Express Web Server
In the root folder, let's create index.js file :

require("dotenv").config();
const express = require("express");
const app = express();

app.use(express.json());

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

Configure Environment Variables
In the root folder, let's create .env file :

DB = // mongodb url
HOST = // email host
USER = // email id
PASS = // email password
SERVICE = // email service
BASE_URL = "http://localhost:8080/api"

Configure MongoDB Database
In the root folder, let's create db.js file :

const mongoose = require("mongoose");

module.exports = connection = async () => {
    try {
        const connectionParams = {
            useNewUrlParser: true,
            useCreateIndex: true,
            useUnifiedTopology: true,
        };
        await mongoose.connect(process.env.DB, connectionParams);
        console.log("connected to database.");
    } catch (error) {
        console.log(error, "could not connect database.");
    }
};

import db.js in index.js and call it :

//....
const connection = require("./db");
const express = require("express");
const app = express();

connection();

app.use(express.json());
//....

Define The Models
In the root directory create models folder.
models/user.js like this :

const mongoose = require("mongoose");
const Schema = mongoose.Schema;
const Joi = require("joi");

const userSchema = new Schema({
    name: {
        type: String,
        required: true,
    },
    email: {
        type: String,
        required: true,
    },
    password: {
        type: String,
        required: true,
    },
});

const User = mongoose.model("user", userSchema);

const validate = (user) => {
    const schema = Joi.object({
        name: Joi.string().required(),
        email: Joi.string().email().required(),
        password: Joi.string().required(),
    });
    return schema.validate(user);
};

module.exports = { User, validate };

models/token.js file like this :

const mongoose = require("mongoose");
const Schema = mongoose.Schema;

const tokenSchema = new Schema({
    userId: {
        type: Schema.Types.ObjectId,
        required: true,
        ref: "user",
    },
    token: {
        type: String,
        required: true,
    },
    createdAt: {
        type: Date,
        default: Date.now,
        expires: 3600,
    },
});

module.exports = mongoose.model("token", tokenSchema);

Configure The Email Transporter
In the root directory create utils folder.
utils/sendEmail.js file like this :

const nodemailer = require("nodemailer");

const sendEmail = async (email, subject, text) => {
    try {
        const transporter = nodemailer.createTransport({
            host: process.env.HOST,
            service: process.env.SERVICE,
            port: 587,
            secure: true,
            auth: {
                user: process.env.USER,
                pass: process.env.PASS,
            },
        });

        await transporter.sendMail({
            from: process.env.USER,
            to: email,
            subject: subject,
            text: text,
        });

        console.log("email sent sucessfully");
    } catch (error) {
        console.log(error, "email not sent");
    }
};

module.exports = sendEmail;

Define The Routes
In the root directory create routes folder.
routes/users.js file like this :

const { User, validate } = require("../models/user");
const express = require("express");
const router = express.Router();

router.post("/", async (req, res) => {
    try {
        const { error } = validate(req.body);
        if (error) return res.status(400).send(error.details[0].message);

        const user = await new User(req.body).save();

        res.send(user);
    } catch (error) {
        res.send("An error occured");
        console.log(error);
    }
});

module.exports = router;

routes/passwordReset.js file like this :

const { User } = require("../models/user");
const Token = require("../models/token");
const sendEmail = require("../utils/sendEmail");
const crypto = require("crypto");
const Joi = require("joi");
const express = require("express");
const router = express.Router();

router.post("/", async (req, res) => {
    try {
        const schema = Joi.object({ email: Joi.string().email().required() });
        const { error } = schema.validate(req.body);
        if (error) return res.status(400).send(error.details[0].message);

        const user = await User.findOne({ email: req.body.email });
        if (!user)
            return res.status(400).send("user with given email doesn't exist");

        let token = await Token.findOne({ userId: user._id });
        if (!token) {
            token = await new Token({
                userId: user._id,
                token: crypto.randomBytes(32).toString("hex"),
            }).save();
        }

        const link = `${process.env.BASE_URL}/password-reset/${user._id}/${token.token}`;
        await sendEmail(user.email, "Password reset", link);

        res.send("password reset link sent to your email account");
    } catch (error) {
        res.send("An error occured");
        console.log(error);
    }
});

router.post("/:userId/:token", async (req, res) => {
    try {
        const schema = Joi.object({ password: Joi.string().required() });
        const { error } = schema.validate(req.body);
        if (error) return res.status(400).send(error.details[0].message);

        const user = await User.findById(req.params.userId);
        if (!user) return res.status(400).send("invalid link or expired");

        const token = await Token.findOne({
            userId: user._id,
            token: req.params.token,
        });
        if (!token) return res.status(400).send("Invalid link or expired");

        user.password = req.body.password;
        await user.save();
        await token.delete();

        res.send("password reset sucessfully.");
    } catch (error) {
        res.send("An error occured");
        console.log(error);
    }
});

module.exports = router;

If you are using this routes in front-end, you might need another route in passwordReset.js. We need to show password reset form only if the link is valid. So, we need a GET route which will validate the link and show password reset form.

Import routes in index.js

//...
const passwordReset = require("./routes/passwordReset");
const users = require("./routes/users");
const connection = require("./db");
//.....

app.use(express.json());

app.use("/api/users", users);
app.use("/api/password-reset", passwordReset);
//....

That's it, test the APIs in postman, If you found any mistakes or making code better let me know in comment. For better understanding please watch Youtube video. Subscribe to my Youtube channel to get more knowledgeable content every week.

Arigato gozaimasu.. 🙂

DEV Community: Mr CyberWolf

From Idea to Deployed App: AI Resume Generator Tool (Lovable Tutorial)

Google Sign‑In with Official SDK (No Passport.js) & Role‑Based Access

Introduction

What Is OAuth 2.0?

Basic Setup

1. Clone the boilerplate from GitHub:

2. Inside the project you’ll find two folders:

3. At server/.env file, add your MongoDB URI and Client URL.

Google Credentials

Creating a Project:

1. Go to the Google Cloud console.

2. Click on select project on the top left of the screen and select New project to create a new project.

Configuring Consent Screen:

1. Click on APIs & Services on the top left menu and select OAuth consent screen to create your app’s consent screen.

2. Enter your application name and support email, then select “External” as the audience type.

3. Complete the consent screen setup by accepting Google’s Privacy Policy.

Creating OAuth Client:

1. Click on Create OAuth Client.

2. Select the application type as web and add name for your OAuth client.

3. Enter “http://localhost:3000” as authorized origin.

4. Enter “http://localhost:3000/redirect” as authorized redirect URL.

5. Click on Create to obtain the client ID and client secrets.

6. Copy the generated credentials and add them to your server/.env file.

Google OAuth Routes

Import and Initialize OAuth2 client:

1. Import the Express router, the Google Auth Library, and the User model.

2. Configure the OAuth2 client to generate authorization URLs, exchange authorization codes for tokens, and handle token refreshes.

Generate the Authorization URL:

1. access_type: "offline" requests a refresh token so you can get new access tokens later without user interaction.

2. scope: ["openid", "email", "profile"] tells Google exactly which user data your app needs.

3. On the frontend, we use this URL to redirect users to Google’s sign-in page.

Exchange Authorization Code for Tokens:

1. Grab the authorization code from req.body. If it’s missing, return a 400 error.

2. Call client.getToken(code) to exchange the code for tokens.

3. Verify the id_token with client.verifyIdToken({ idToken }) and extract the user’s information.

4. Check if a user with the provided email already exists; if not, create a new user record and store the refresh token.

5. Send back cookies containing the tokens and user information, each with the appropriate expiration time.

Obtain a New Access Token:

1. Grab the refresh token from req.body. If it’s missing, return a 400 error.

2. Set the refresh token as credentials, then call client.getAccessToken() to request a new access token from Google.

3. Send the new access token back as an HTTP-only cookie.

Logout by Clearing Cookies:

1. Clear all cookies and send back a success response.

2. Don’t delete the refresh token unless absolutely necessary; losing it forces the user to re-authorize, so store it securely.

3. Export the router and import it in your server/index.ts file.

Client API Setup

First, add the API URL in the client/.env file.

Axios Instance:

1. Initialize the Axios instance with API URL and enable withCredentials

2. The Axios interceptor handles 401 errors by calling the refresh endpoint to obtain a new access token, then retries the original request with the updated credentials.

Redirect to Google Sign-In Page:

1. Call the login API when the user clicks the “Sign In” button.

2. Once you receive the authUrl, redirect the user to that URL.

Invoke the Callback API:

1. Use the search params hook to retrieve the authorization code when the page loads.

2. call the callback API with that code, then redirect the user to the dashboard.

Invoke the Logout API:

1. Call the logout API using axios instance, which clears the user’s cookies on the server.

2. After a successful response, call router.push("/") to redirect the user back to the home page.

Retrieve User Information:

1. Use Next.js cookies() helper to read cookies from the incoming request.

2. Checks for a refreshToken cookie; if it’s missing, immediately redirects the user to the home page.

3. Gets the userInfo cookie and parses it into a JavaScript object for use in the component.

Middleware's & RBAC

Auth Middleware:

1. Grab accessToken from req.cookies; if it’s missing, return a 401 Unauthorized response.

2. Initialize an OAuth2Client with your Google credentials and call client.getTokenInfo(accessToken). Verify that the token’s aud matches your GOOGLE_CLIENT_ID; if not, return a 401 response.

3. Check if a user with that email exists in the database; if not, return a 401 response.

4. Attach the user object to req.body.userInfo and call next() to grant access to the protected route.

Permit Credentials:

1. Go to Permit.io and create an account

2. Create a workspace by choosing a name and a unique key.

3. Add a “Products” resource and enable all CRUD actions.

4. In the policy editor, assign permissions to each role—admin, editor, and viewer—so you control who can do what.

5. Install the Permit SDK via npm (we already installed while setting up basic setup).

6. Copy your PDP URL and API key.

7. Add those credentials to your server/.env file.

Initialize Permit & Sync Users:

1. Import and initialize Permit using the Token key and PDP URL.

3. At `server/.env` file, add your MongoDB URI and Client URL.

6. Copy the generated credentials and add them to your `server/.env` file.

1. `access_type: "offline"` requests a refresh token so you can get new access tokens later without user interaction.

2. `scope: ["openid", "email", "profile"]` tells Google exactly which user data your app needs.

1. Grab the authorization code from `req.body`. If it’s missing, return a 400 error.

2. Call `client.getToken(code)` to exchange the code for tokens.

3. Verify the `id_token` with `client.verifyIdToken({ idToken })` and extract the user’s information.

1. Grab the refresh token from `req.body`. If it’s missing, return a 400 error.

2. Set the refresh token as credentials, then call `client.getAccessToken()` to request a new access token from Google.

3. Export the router and import it in your `server/index.ts` file.

First, add the API URL in the `client/.env` file.

1. Initialize the Axios instance with API URL and enable `withCredentials`

2. Once you receive the `authUrl`, redirect the user to that URL.

2. After a successful response, call `router.push("/")` to redirect the user back to the home page.

1. Use Next.js `cookies()` helper to read cookies from the incoming request.

2. Checks for a `refreshToken` cookie; if it’s missing, immediately redirects the user to the home page.

3. Gets the `userInfo` cookie and parses it into a JavaScript object for use in the component.

1. Grab `accessToken` from `req.cookies`; if it’s missing, return a 401 Unauthorized response.

2. Initialize an `OAuth2Client` with your Google credentials and call `client.getTokenInfo(accessToken)`. Verify that the token’s `aud` matches your `GOOGLE_CLIENT_ID`; if not, return a 401 response.

4. Attach the user object to `req.body.userInfo` and call `next()` to grant access to the protected route.

7. Add those credentials to your `server/.env` file.

1. Grab the authenticated user’s information from `req.body`

3. If the check passes, call `next()` to grant access; otherwise, return a 403 Forbidden response.

1. Import `authMiddleware` and `roleCheckMiddleware`.

2. Apply `authMiddleware` to any route that requires an authenticated user.

3. Then apply `roleCheckMiddleware(action, resource)` to enforce the specific permission.