Forem: Harsh Mangalam

🧩 Why Dialog Doesn’t Work When Wrapped with Tooltip in Radix / ShadCN UI (And How to Fix It)

Harsh Mangalam — Thu, 07 Aug 2025 17:37:45 +0000

When working with Radix UI (used under the hood in shadcn/ui), things are usually smooth — composable, accessible, and beautifully engineered.

But one day, I wrapped a DialogTrigger with a Tooltip and…

Nothing happened.

No errors. No warnings. Just a button that didn’t open the dialog. 🤯

Turns out, there's a common but sneaky mistake that trips up many devs — and it’s all about the order in which you nest your components.

❌ The Broken Version

This is what I initially wrote — trying to wrap my dialog trigger in a tooltip:

<Dialog open={open} onOpenChange={setOpen}>
  <DialogTrigger asChild>
    <Tooltip>
      <TooltipTrigger asChild>
        <Button size="icon" variant="outline">
          <EditIcon />
        </Button>
      </TooltipTrigger>
      <TooltipContent>Edit podcast</TooltipContent>
    </Tooltip>
  </DialogTrigger>
  <DialogContent className="max-w-4xl max-h-[80vh] overflow-y-auto">
    {/* Form goes here */}
  </DialogContent>
</Dialog>

At first glance, this looks totally fine.

But the dialog wouldn’t open when clicking the button.
The tooltip shows, but the dialog never appears.

🤔 What’s Going Wrong?
Let’s break this down.

Both DialogTrigger and TooltipTrigger from Radix use the asChild prop, which means:

They don’t render any DOM element themselves.

Instead, they pass event handlers like onClick to their child — which must be a real DOM element, like a .

In the broken example, DialogTrigger wraps Tooltip, which is not a DOM element — it's just a React component.
So the click event never reaches a usable target for Dialog.

✅ The Working Version
Here’s the corrected nesting:

<Dialog open={open} onOpenChange={setOpen}>
  <Tooltip>
    <TooltipTrigger asChild>
      <DialogTrigger asChild>
        <Button size="icon" variant="outline">
          <EditIcon />
        </Button>
      </DialogTrigger>
    </TooltipTrigger>
    <TooltipContent>Edit podcast</TooltipContent>
  </Tooltip>
  <DialogContent className="max-w-4xl max-h-[80vh] overflow-y-auto">
    {/* Form goes here */}
  </DialogContent>
</Dialog>

Why does this work?

TooltipTrigger passes props down to DialogTrigger
DialogTrigger passes props down to the final Button
The Button becomes the single, shared DOM element that receives both behaviors

🧠 Rule of Thumb

Always place the outermost wrapper (like Tooltip) outside, and the final DOM element (like Button) inside both DialogTrigger and TooltipTrigger, using asChild.

Understanding Legacy Promise Throwing Behavior in React

Harsh Mangalam — Mon, 06 Jan 2025 06:39:14 +0000

React is a powerful and versatile JavaScript library used for building user interfaces. One of its modern features, Suspense, allows components to handle asynchronous data gracefully. However, the concept of "Legacy Promise Throwing Behavior" in React often causes confusion among developers. This blog post aims to break down what this behavior entails, how it fits into React’s rendering process, and why it’s important to understand when working with concurrent features.

What Is Legacy Promise Throwing Behavior?

Legacy Promise Throwing Behavior refers to the mechanism where React components "throw" a promise during rendering. This tells React that the component is waiting for some asynchronous data to be resolved before it can be fully rendered.

When a promise is thrown, React pauses rendering of that part of the component tree and instead renders a fallback UI, if defined, using Suspense. Once the promise resolves, React re-renders the component with the resolved data.

Key Features of Legacy Promise Throwing:

Throwing Promises During Rendering: Components can indicate they’re awaiting data by throwing a promise.
Integration with Suspense: This behavior works seamlessly with Suspense to show fallback content.
Asynchronous Data Handling: It provides a declarative way to handle async data fetching within React’s rendering lifecycle.

How Does It Work?

Let’s take a step-by-step look at how this behavior functions:

Component Throws a Promise: During rendering, a component encounters a promise and throws it.
Rendering Paused: React halts rendering for that branch of the component tree.
Fallback UI: If a Suspense boundary is present, React renders the fallback UI.
Promise Resolves: Once the promise resolves, React resumes rendering and integrates the resolved data.

Example of Legacy Promise Throwing

import React, { Suspense } from 'react';

// Simulated fetch function
function fetchData() {
  return new Promise((resolve) => {
    setTimeout(() => resolve("Data loaded!"), 2000);
  });
}

// Component that throws a promise
function AsyncComponent() {
  const data = useData(); // Custom hook
  return <div>{data}</div>;
}

function useData() {
  const promise = fetchData();
  if (!promise._result) {
    throw promise;
  }
  return promise._result;
}

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <AsyncComponent />
    </Suspense>
  );
}

export default App;

Explanation:

Fetching Data: The useData hook fetches data asynchronously using the fetchData function.
Throwing a Promise: If the data is not yet available, the promise is thrown.
Suspense Fallback: The Suspense component displays "Loading..." until the promise resolves.
Resolved Data: Once the promise resolves, the AsyncComponent renders the loaded data.

Modern React and Concurrent Features

React 18 introduced concurrent rendering, which refines how promise throwing works. Key improvements include:

Time-Slicing: React’s concurrent rendering splits work into smaller chunks, keeping the UI responsive even while waiting for async data.
Controlled Suspense Boundaries: Suspense boundaries handle promise throwing more gracefully.
Improved Error Handling: Better error boundaries for components that fail to fetch data.

Best Practices

While Legacy Promise Throwing is foundational to Suspense, developers should use modern libraries and patterns for a better experience:

Use React Query or SWR

Libraries like React Query and SWR provide robust solutions for data fetching, caching, and synchronization, eliminating the need to manually throw promises.

Leverage use Hook (React 18+)

React 18 introduced the use hook (experimental) for handling promises in a cleaner, declarative way.

function AsyncComponent() {
  const data = use(fetchData());
  return <div>{data}</div>;
}

Avoid Throwing Promises Directly

Throwing promises manually can lead to unexpected issues, especially in non-concurrent environments. Instead, rely on libraries or utilities that abstract these complexities.

Wrap Suspense for Reusability

Encapsulate Suspense logic in reusable components for cleaner code:

function WithSuspense({ children }) {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      {children}
    </Suspense>
  );
}

Conclusion

Legacy Promise Throwing Behavior is a cornerstone of React’s Suspense feature, enabling seamless handling of asynchronous data during rendering. However, as React evolves, so do the tools and patterns for managing async operations. By understanding this behavior and leveraging modern practices, developers can create efficient, responsive, and maintainable applications.

Mastering Literal Types in TypeScript: true as const vs true

Harsh Mangalam — Wed, 18 Dec 2024 12:03:12 +0000

In TypeScript, there is a significant difference between the two statements:

clientLoader.hydrate = true as const;
clientLoader.hydrate = true;

FYI I have picked these example from React router v7.

Let’s break down the difference with detailed explanations and examples

clientLoader.hydrate = true as const;

The as const assertion in TypeScript is a way of telling the TypeScript compiler to treat a value as its literal type, rather than the general type.
In this case, true as const means that the type of hydrate will be the literal true and not boolean. It essentially locks the value of hydrate to true specifically.

Example:

interface ClientLoader {
  hydrate: true;  // The type of hydrate is set to the literal value `true`
}

const clientLoader: ClientLoader = {
  hydrate: true as const,
};

clientLoader.hydrate = true; // This is valid

// clientLoader.hydrate = false; // Error: Type 'false' is not assignable to type 'true'

In the above example, clientLoader.hydrate is specifically typed as true. You cannot assign any value other than true to hydrate because of the as const assertion.
This type of assignment is useful when you want to enforce immutability for certain properties.

clientLoader.hydrate = true;

Without the as const assertion, TypeScript will infer the type of hydrate as boolean. This means that hydrate can be assigned any boolean value (true or false).

Example:

interface ClientLoader {
  hydrate: boolean;  // The type of hydrate is set to `boolean`
}

const clientLoader: ClientLoader = {
  hydrate: true,
};

clientLoader.hydrate = true;  // This is valid
clientLoader.hydrate = false; // This is also valid

In this case, since hydrate is typed as boolean, you can assign true or false to it.
It provides flexibility to switch between both true and false.

Feature	`clientLoader.hydrate = true as const;`	`clientLoader.hydrate = true;`
Type of hydrate	`true` (literal type)	`boolean` (general type)
Flexibility	Can only be `true`	Can be `true` or `false`
Use Case	When you want the property to be strictly `true` and not allow changes	When the property can hold any boolean value
Type Inference	The type of `hydrate` is narrowed to `true`	The type of `hydrate` is inferred as `boolean`

Why Use as const?

Enforcing Immutability: as const locks down the value so that it can’t be changed to something else. This is particularly useful when you want to ensure that a specific value is always the same throughout the program.
Literal Types for Discriminated Unions: When working with discriminated unions, as const allows you to create specific cases based on literal types, as shown below:

type Status = 'pending' | 'completed' | 'failed';

const status: Status = 'pending'; // 'pending' is a valid value

// status = 'in-progress'; // Error: Type '"in-progress"' is not assignable to type 'Status'

// With 'as const'
const taskStatus = 'pending' as const;
// Now taskStatus is narrowed down to the literal type 'pending'

Conclusion

Use as const when you want to assign a specific literal value to a property and enforce that the value remains fixed.
Use regular assignment (true, false, etc.) when you want to allow a property to accept different boolean values or when the exact value doesn’t need to be restricted.

This makes as const a useful tool for more precise typing and enforcing stricter value constraints in your TypeScript code.

Celebrating 100th Open Source Contributions: A Journey of Growth and Collaboration.

Harsh Mangalam — Tue, 27 Aug 2024 18:25:24 +0000

I'm thrilled to announce that I've reached a personal milestone: completing my 100th open-source contribution! This journey has been nothing short of incredible, and I'm honored to have contributed to a vibrant and diverse range of projects that have not only sharpened my skills but also allowed me to give back to the community that has given me so much.

My 100th contribution was made to the modular-forms library, an open source form library with performance, type safety and bundle size in mind.

If you're passionate about building cool stuff, check out my GitHub profile: https://github.com/harshmangalam – I'm always working on new and exciting projects!

A Look Back: My Open Source Journey

Over the years, I have had the privilege of contributing to a wide variety of open-source projects, each one teaching me something new and providing me with invaluable experiences. Here are some of the projects that I've been a part of:

Expo
Expo is a framework and platform for building cross-platform mobile applications using React Native. It simplifies the development process by providing a set of tools and libraries that handle common tasks like navigation, camera access, and push notifications. Expo's managed workflow allows developers to build, test, and deploy apps with minimal configuration and hassle.

Deno
Deno is a modern runtime for JavaScript and TypeScript built on V8 and Rust. It aims to improve security, simplicity, and performance by offering built-in TypeScript support, a secure sandboxed execution environment, and a single executable with no need for a package manager. Deno emphasizes a standard library and modularity, providing an alternative to Node.js with enhanced features for contemporary development.

Fresh.js
Fresh.js is a web framework for building high-performance applications with a focus on simplicity and speed. It is built on Deno and leverages its features to offer server-side rendering (SSR) and static site generation (SSG) out of the box. Fresh.js emphasizes minimal client-side JavaScript, optimizing performance by delivering fast initial loads and efficient updates. It uses a component-based architecture, similar to other modern frameworks, to facilitate building dynamic, reactive user interfaces.

Qwik
Qwik is a modern front-end framework designed for building high-performance, instantly loading web applications. It was developed by the team at Builder.io to address the performance limitations of traditional frameworks when it comes to building complex web applications

Qwik UI
Qwik UI is a component library designed to work seamlessly with the Qwik framework. It provides a set of pre-built, reusable UI components that can be used to quickly build user interfaces while taking full advantage of Qwik's unique performance characteristics. By leveraging Qwik's principles of resumability and instant loading, Qwik UI aims to deliver highly optimized and responsive user experiences.

Solid.js
SolidJS is a declarative, efficient, and flexible JavaScript library for building user interfaces. It emphasizes fine-grained reactivity, enabling high performance by updating only the parts of the DOM that change. Unlike other frameworks, SolidJS compiles components down to optimized, low-level JavaScript code, making it exceptionally fast. It offers a syntax similar to React, making it easy for React developers to transition. SolidJS also prioritizes simplicity and predictability, allowing developers to build complex applications with a straightforward and intuitive approach.

SolidStart
SolidStart is a full-stack framework built on top of SolidJS, designed for creating highly performant web applications. It provides features like server-side rendering (SSR), routing, and data fetching, making it easier to build scalable and efficient applications. SolidStart leverages SolidJS's fine-grained reactivity to deliver fast and seamless user experiences from the server to the client.

GraphQL Yoga
GraphQL Yoga is a fully-featured GraphQL server that is simple to set up and easy to use. It provides a flexible, plug-and-play architecture that supports various frameworks and environments, including Express, Fastify, and serverless functions. GraphQL Yoga includes features like subscriptions, real-time data, and file uploads out-of-the-box. It's designed to work seamlessly with TypeScript, offering type safety and developer-friendly tools. GraphQL Yoga aims to be lightweight yet powerful, making it suitable for both small projects and large-scale applications.

Shotstack
Shotstack is a cloud-based video editing API that enables developers to programmatically create, edit, and render videos. It offers a range of features like transitions, effects, text overlays, and audio integration, making it possible to automate video production tasks. Shotstack supports a wide array of media formats and can handle both 2D and 3D rendering

Remix.run:
Remix.run is a modern web framework focused on optimizing user experience and performance by leveraging server-side rendering (SSR) and client-side navigation. It emphasizes data fetching and caching strategies that improve speed and responsiveness. Remix enables developers to build robust and scalable applications with a strong emphasis on traditional web fundamentals like progressive enhancement and full-page reloads. It integrates well with various backends and APIs, allowing for flexible and efficient data management. Remix's architecture aims to provide a seamless user experience and a streamlined development process.

Deno SaaSKit
Deno SaaSKit is a SaaS boilerplate built on Deno, designed to accelerate the development of software-as-a-service applications. It provides essential features like authentication, billing, and multi-tenancy out-of-the-box. Deno SaaSKit leverages Deno's modern runtime and TypeScript support to deliver a secure, scalable, and maintainable foundation for SaaS projects.

Revoltchat
Revoltchat is an open-source alternative to Discord, designed for creating and managing online communities and chat environments. It offers features such as text and voice channels, user roles, and real-time messaging. Revoltchat emphasizes privacy and control, allowing users to host their own servers and manage data independently. The platform is built with a focus on flexibility and customizability, catering to various community needs and preferences.

Prisma
Prisma is a modern ORM (Object-Relational Mapping) tool for Node.js and TypeScript applications that simplifies database interactions. It provides a type-safe database client and a powerful schema management tool, allowing developers to define their data models using a declarative schema language. Prisma supports various databases, including PostgreSQL, MySQL, and SQLite, and offers features like automatic migrations and query optimization. It aims to streamline database workflows, improve developer productivity, and enhance the overall developer experience.

Drizzle ORM
Drizzle ORM is a lightweight, type-safe ORM (Object-Relational Mapping) library for TypeScript and JavaScript. It focuses on simplicity and performance, providing a straightforward API for querying and managing database records. Drizzle ORM supports various databases, including PostgreSQL, MySQL, and SQLite. It emphasizes type safety and minimal configuration, making it easier for developers to work with databases while ensuring reliable and maintainable code.

Open source is more than just code. It's about community, collaboration, and continuous learning. Every contribution I've made has been an opportunity to learn from others, share my knowledge, and solve real-world problems. Open source has given me the platform to experiment, innovate, and most importantly, connect with like-minded individuals who share the same passion for technology.

Looking Forward
As I celebrate this milestone, I am more motivated than ever to continue my journey in the open-source world. There are countless more projects to explore, more challenges to tackle, and more communities to engage with. I am excited about the future and the endless possibilities that lie ahead.

To everyone who has been part of this journey—thank you! Here's to the next 100 contributions and beyond!

Thanks.

Managing Static Assets in Public Directory vs Imports

Harsh Mangalam — Fri, 19 Jul 2024 09:21:33 +0000

When building modern web applications, handling static assets such as images, fonts, and stylesheets is a crucial aspect of ensuring a smooth user experience. Developers often face the dilemma of whether to place these assets in a public directory or to import them directly into their modules with the help of bundler like vite. Each approach has its pros and cons, and the best choice often depends on the specific needs of the project. In this blog post, we will explore both methods and help you decide which strategy might be best for your application.

The Public Directory Approach

The public directory is a common place to store static assets. This directory is usually located at the root of your project and serves files directly to the client.

For example if you have created your project using vite you can see something like this

Pros:

Simplicity: Placing assets in the public directory is straightforward. You simply add your files to the public folder, and they are served from url.
Direct Access: Assets in the public directory are accessible via a URL path, making it easy to reference them in your HTML files or stylesheets.
No Build Dependency: Since these assets are not part of the build process, they don't need to be processed by your build tool (e.g., Webpack, Vite), which can reduce build times.

Cons:

Lack of Versioning: Since files in the public directory are not processed by the build tool, they lack automatic cache-busting mechanisms. This can lead to issues with outdated files being served to users.
No Module Context: Public assets are not part of the module system, so they can't be easily imported or manipulated within your JavaScript code.
Potential Security Risks: Exposing a public directory can sometimes lead to security risks if sensitive files are inadvertently included.

Example

export default function App() {
  return (
    <div>
      <a href="https://vitejs.dev" target="_blank">
        <img src={"/vite.svg"} className="logo" alt="Vite logo" />
      </a>
    </div>
  );
}

Importing Assets

Alternatively, you can import assets directly into your JavaScript or CSS modules. This method involves using a build tool like vite to bundle and process these assets.

Pros:

Versioning and Cache Busting: Build tools can automatically hash filenames, ensuring that users always get the most up-to-date version of your assets.
Module Context: Imported assets are part of the module system, allowing you to leverage tree-shaking and other optimizations.
Conditional Loading: You can conditionally load assets based on the current environment or user actions, which can improve performance.
Easier Refactoring: As your project grows, imported assets make it easier to refactor and move files around without breaking references.

Cons:

Build Complexity: Incorporating assets into the build process can add complexity and increase build times, especially for large projects.
Tooling Requirements: This approach requires a build tool like Webpack, Rollup, or Vite, which adds a layer of dependency and configuration.
Learning Curve: Developers need to understand how to configure their build tools to handle different types of assets, which can be challenging for beginners.

Example

import reactLogo from "./assets/react.svg";

export default function App() {
  return (
    <div>
      <a href="https://react.dev" target="_blank">
        <img src={reactLogo} className="logo react" alt="React logo" />
      </a>
    </div>
  );
}

Which Approach Should You Choose?

Choosing between the public directory and imports depends on your project's requirements and constraints.

Use the Public Directory if:

You need a simple and quick setup.
Your assets are relatively static and infrequently changed.
You prefer direct URL access without involving build tools.

Use Imports if:

You need better asset versioning and cache-busting.
Your project benefits from module-based asset management.
You want to leverage build-time optimizations and conditional loading.

In many cases, a hybrid approach might be the best solution. For example, you can place large, infrequently changed files in the public directory while importing smaller, more dynamic assets directly into your modules.

Optimize DX with Typesafe Environment Variables and code Autocomplete

Harsh Mangalam — Mon, 08 Jul 2024 09:10:39 +0000

Hello! In this article, we'll guide you through configuring your codebase to achieve autocomplete for environment variables and ensure that missing variables trigger build-time errors.

Typesafe environment variables offer several benefits:

Reduced Errors: They help catch missing or incorrectly typed environment variables at compile time, reducing runtime errors.
Improved Developer Experience: Autocomplete support in IDEs speeds up development by providing hints and suggestions for environment variables.
Enhanced Code Readability: TypeScript's type annotations make it clear what type each environment variable should be, improving code clarity and maintainability.
Better Documentation: Type annotations serve as documentation, making it easier for developers to understand how to use environment variables correctly in different parts of the codebase.

In environment variables, we store sensitive data that should not be exposed in the codebase, such as JWT secrets, Database URLs, Stripe API keys, and other confidential information. This practice enhances security by preventing sensitive data from being hardcoded into the source code, thereby reducing the risk of exposure in case of unauthorized access or leaks.

By default, developers do not receive autocomplete support for process.env in Node.js, Bun.env in Bun runtime, or Deno.env.get() in Deno runtime. This lack of autocomplete can lead to manual errors and inefficiencies during development. Implementing typesafe handling of environment variables ensures that developers benefit from IDE autocomplete features, improving efficiency, reducing errors, and enhancing the overall development experience. This practice also promotes code clarity and maintainability by enforcing strict typing and documentation of environment variable usage throughout the codebase.

Let's set up a new server using the Hono framework.

bun create hono@latest typesafe-env

Here I am using Bun because it doesn't require any third-party libraries to parse .env files. Bun has built-in features for parsing .env files, which makes configuration straightforward. Similarly, Deno also provides native capabilities for handling environment variables without additional dependencies.

If you are using Node.js, you will need third-party libraries like dotenv to parse .env files for environment variable configuration.

Bun can reads the following files automatically.

.env
.env.production, .env.development, .env.test (depending on value of NODE_ENV)
.env.local

Create new .env file and add all the env variables.


DATABASE_URL="postgresql://harshmangalam:123456@localahost:5432/typesafe-env?schema=default"
JWT_SECRET="itssecret!!"
PORT=4000
MAINTENANCE_MODE=false
DOMAINS=["http://localhost:3000","http://localhost:4000","https://openeventblend.com"]

Install zod

bun add zod

Zod is a TypeScript-first schema validation library that allows you to define and validate data schemas easily. It provides a way to create robust, composable, and typed schemas for your application's data, ensuring type safety and validation at runtime.

/src/config/env.ts


import * as z from "zod";

// Create zod schema for env variables
const envSchema = z.object({
  DATABASE_URL: z.string(),
  JWT_SECRET: z.string(),
  PORT: z.coerce.number().min(1000).max(65535),
  MAINTENANCE_MODE: z.coerce.boolean(),
});

export async function parseENV() {
  try {
    envSchema.parse(Bun.env);
  } catch (err) {
    console.error("Invalid Env variables Configuration::::", err);
    process.exit(1);
  }
}

declare module "bun" {
  interface Env extends z.TypeOf<typeof envSchema> {}
}

This code snippet is a TypeScript declaration that extends the Env interface within the "bun" module or namespace. Here's a breakdown of what each part means:

declare module "bun": This declares a module or namespace named "bun" in TypeScript. Modules or namespaces in TypeScript are used to organize code and encapsulate its components.
interface Env extends z.TypeOf<typeof envSchema>: Within the "bun" module, this declares an interface named Env. It extends (extends) the type derived from a Zod schema (z.TypeOf).
z.TypeOf<typeof envSchema>: This is a TypeScript type operator provided by the Zod library. It retrieves the TypeScript type that corresponds to the Zod schema envSchema. Essentially, it defines the structure and types of environment variables as validated by the Zod schema.

This declaration allows TypeScript to enforce type checking and provide IntelliSense support for environment variables accessed through bun.Env, ensuring that they adhere to the structure defined by envSchema.

src/index.ts

import { Hono } from "hono";
import { parseENV } from "./config/env";

parseENV();

const app = new Hono();

app.get("/", (c) => {
  return c.text("Hello Hono!");
});

export default {
  fetch: app.fetch,
  port: Bun.env.PORT,
};

Import parseENV into the root file, and you'll immediately benefit from autocomplete for Bun.env across all your project files.

Repo link

Implement JWT Refresh Token Authentication with Elysia JS and Prisma: A Step-by-Step Guide

Harsh Mangalam — Thu, 13 Jun 2024 16:39:03 +0000

In this comprehensive guide, we'll walk you through the process of integrating JWT refresh token authentication into your application using Elysia JS and Prisma.

Authentication vs Authorization

Authentication is the process of verifying the identity of a user or system attempting to access a resource or service.

Authorization is the process of determining what actions or resources a user is permitted to access within a system or application after they have been successfully authenticated.

JWT

JSON Web Token (JWT) authentication is a stateless, token-based authentication mechanism used to securely transmit information between parties as a JSON object

Header: Contains metadata about the token, such as the type of token (JWT) and the signing algorithm (e.g., HMAC SHA256 or RSA).
Payload: Contains the claims, which are statements about an entity (typically, the user) and additional data. Claims can be of three types: registered, public, and private.
Signature: Ensures that the token hasn't been altered. It's created by taking the encoded header, the encoded payload, a secret, the algorithm specified in the header, and signing them.

Tech Stack

Bun - Bun is a javascript runtime just like Nodejs and Deno but with better performance and developer experience.

Elysia - Elysia is a web framework built on top of Bun just like Express is a web framework built on top of Nodejs.

Prisma - Prisma is an ORM and Database Toolkit provide smoother way to connect SQL and NoSQL database. Prisma provide easy to use API to interact with db.

PostgreSQL - PostgreSQL is the World's Most Advanced Open Source Relational Database.

Typescript - A javascript with type safety features.

Setup new elysia project

Step 1
Make sure Bun is already installed in your system. You can install bun using curl

curl https://bun.sh/install | bash

Step 2
Create new elysia project using bun. elysia-prisma-jwt-auth is name of our project

bun create elysia elysia-prisma-jwt-auth

Step 3
Go to the project directory

cd elysia-prisma-jwt-auth

Step 4
Now you can open the project in vscode

code .

Step 5
Start the elysia server

bun dev

You can also follow Elsysia Quick start guide to setup project or if you want custom setup
https://elysiajs.com/quick-start.html

In the next process we will define our required routes

POST /api/auth/sign-up - Create new account
POST /api/auth/sign-in - Sign in to existing account
GET /api/auth/me - Fetch current user
POST /api/auth/logout - Logout current user
POST /api/auth/refresh - Create new pair of access & refresh token from existing refresh token

Create new file route.ts to keep all routes related code here
src/route.ts

import { Elysia } from "elysia";

export const authRoutes = new Elysia({ prefix: "/auth" })
  .post(
    "/sign-in",
    async (c) => {
      return {
        message: "Sig-in successfully",
      };
    },

  )
  .post(
    "/sign-up",
    async (c) => {
      return {
        message: "Account created successfully",
      };
    },
  )
  .post(
    "/refresh",
    async (c) => {
      return {
        message: "Access token generated successfully",
      };
    }
  )
  .post("/logout", async (c) => {
    return {
      message: "Logout successfully",
    };
  })
  .get("/me", (c) => {
    return {
      message: "Fetch current user",
    };
  });

Elysia is using method chaining to synchronize type safety for later use. Without method chaining, Elysia can't ensure your type integrity.

src/index.ts

import { Elysia } from "elysia";
import { authRoutes } from "./route";

const app = new Elysia({ prefix: "/api" }).use(authRoutes).listen(3000);

console.log(
  `🦊 Elysia is running at ${app.server?.hostname}:${app.server?.port}`
);

Now import the auth routes and pass in use() method. We have added the prefix /api so that all the routes will start with /api like sign-in will be now /api/auth/sign-in.

Setup Prisma

Step 1
Install prisma cli as dev dependencies. dev dependencies are only required in local development it does not included in production build and runtime

bun add -d prisma

Step 2
Initialize prisma project

bunx prisma init

Step 3
Add prisma schema that will map to database table. Here we are going to add User schema to store user information.

enum UserRole {
  User
  Admin
}

model User {
  id           String    @id @default(uuid())
  name         String    @db.VarChar(60)
  email        String    @unique
  password     String
  location     Json?
  isAdult      Boolean   @default(false)
  isOnline     Boolean?  @default(false)
  role         UserRole? @default(User)
  refreshToken String?
  createdAt    DateTime  @default(now())
  updatedAt    DateTime  @updatedAt
}

createdAt field will be added when new user will be added. updatedAt field will be initially same as createdAt but will change once you will be update any field of this table. For id here we are using uuid this will generate unique id as a string.

We have also created an enum for user role their value can be User or Admin and will help to implement Authorization and role based authentication.

Step 4
Update .env file created by prisma init command and add DATABASE_URL value. We are using PostgrSQL hence the URI will be in the form of postgresql://username:password@host:port/db?schema=public

DATABASE_URL="postgresql://harshmangalam:123456@localhost:5432/meetup?schema=public"

You can omit ?schema=public by default in postgres it is public schema.

Step 5
Sync up the prisma schema with the postgresql database

bunx prisma db push

This command should not be used in production in production always run migration command instead of push command.

For better developer expericence you can put this command in package.json scripts

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "bun run --watch src/index.ts",
    "prisma:push": "bunx prisma db push"
  },

So that later you can use this short command instead of long prisma command.

bun prisma:push

Step 6
Install @prisma/client to make interaction with prisma server. usually this step is not required because during Step 5 its automatically get installed

bun i @prisma/client

Step 7
generate prisma schema types for autocomplete. This step is also not required usually because during Step 5 it automatically get generated and added types to node_modules

Step 8
Create new instance of prisma client so that we can reuse that instance to make interact with db.

lib/prisma.ts

import { PrismaClient } from "@prisma/client";
export const prisma = new PrismaClient();

Now our db setup is completed and ready to use the prisma instance in our route handlers.

Implement Sign-up

src/route.ts

import { loginBodySchema, signupBodySchema } from "./schema";
import { prisma } from "./lib/prisma";
import { reverseGeocodingAPI } from "./lib/geoapify";
import { jwt } from "@elysiajs/jwt";
import {
  ACCESS_TOKEN_EXP,
  JWT_NAME,
  REFRESH_TOKEN_EXP,
} from "./config/constant";
import { getExpTimestamp } from "./lib/util";

.post(
    "/sign-up",
    async ({ body }) => {
      // hash password
      const password = await Bun.password.hash(body.password, {
        algorithm: "bcrypt",
        cost: 10,
      });

      // fetch user location from lat & lon
      let location: any;
      if (body.location) {
        const [lat, lon] = body.location;
        location = await reverseGeocodingAPI(lat, lon);
      }
      const user = await prisma.user.create({
        data: {
          ...body,

          password,
          location,
        },
      });
      return {
        message: "Account created successfully",
        data: {
          user,
        },
      };
    },
    {
      body: signupBodySchema,
      error({ code, set, body }) {
        // handle duplicate email error throw by prisma
        // P2002 duplicate field erro code
        if ((code as unknown) === "P2002") {
          set.status = "Conflict";
          return {
            name: "Error",
            message: `The email address provided ${body.email} already exists`,
          };
        }
      },
    }
  )

Client will make an api call to /api/auth/sign-up with the json body

{
    "name":"Harsh Mangalam",
    "email":"harshdev8218@gmail.com",
    "password":"12345678",
    "isAdult":true,
    "location":[25.5940947,85.1375645] // [lat,lon]
}

Bun has built in methods to hash passowrd you do not need to install any third party libs like bcryptjs or argon.
You can read more about this here Hash a password with Bun

I have create a function reverseGeocodingAPI() that will accept lat and lon to return the location from geoapify services.

We can configure geoapify using following steps:-

Step 1
Collect API key from https://www.geoapify.com/

Step 2
Create a new file lib/geoapify.ts that will handle making api call to geoapify service and collect location response from there

async function reverseGeocodingAPI(lat: number, lon: number) {
  const resp = await fetch(
    `https://api.geoapify.com/v1/geocode/reverse?lat=${lat}&lon=${lon}&apiKey=${Bun.env.GEOAPIFY_API_KEY}`
  );
  const jsonResp = await resp.json();
  const data = jsonResp?.features[0]?.properties;
  return data;
}

export { reverseGeocodingAPI };

Again we do not need to install any third party libs for making api request like node-fetch, axios etc... because Bun support web standared and fetch is generally available to make api request built into the platform.

Next we will create schema for the body by default elysia use Typebox to provide type safety of request params, body, etc...

src/schema.ts

import { t } from "elysia";

const signupBodySchema = t.Object({
  name: t.String({ maxLength: 60, minLength: 1 }),
  email: t.String({ format: "email" }),
  password: t.String({ minLength: 8 }),
  location: t.Optional(t.Tuple([t.Number(), t.Number()])),
  isAdult: t.Boolean(),
});

export { signupBodySchema };

Also we are handling errors for duplicate email because prisma throw error for duplicate fields with code P2002 in that case we can return Conflict status code with 409.

Implement Log-in

src/route.ts

.post(
    "/sign-in",
    async ({ body, jwt, cookie: { accessToken, refreshToken }, set }) => {
      // match user email
      const user = await prisma.user.findUnique({
        where: { email: body.email },
        select: {
          id: true,
          email: true,
          password: true,
        },
      });

      if (!user) {
        set.status = "Bad Request";
        throw new Error(
          "The email address or password you entered is incorrect"
        );
      }

      // match password
      const matchPassword = await Bun.password.verify(
        body.password,
        user.password,
        "bcrypt"
      );
      if (!matchPassword) {
        set.status = "Bad Request";
        throw new Error(
          "The email address or password you entered is incorrect"
        );
      }

      // create access token
      const accessJWTToken = await jwt.sign({
        sub: user.id,
        exp: getExpTimestamp(ACCESS_TOKEN_EXP),
      });
      accessToken.set({
        value: accessJWTToken,
        httpOnly: true,
        maxAge: ACCESS_TOKEN_EXP,
        path: "/",
      });

      // create refresh token
      const refreshJWTToken = await jwt.sign({
        sub: user.id,
        exp: getExpTimestamp(REFRESH_TOKEN_EXP),
      });
      refreshToken.set({
        value: refreshJWTToken,
        httpOnly: true,
        maxAge: REFRESH_TOKEN_EXP,
        path: "/",
      });

      // set user profile as online
      const updatedUser = await prisma.user.update({
        where: {
          id: user.id,
        },
        data: {
          isOnline: true,
          refreshToken: refreshJWTToken,
        },
      });

      return {
        message: "Sig-in successfully",
        data: {
          user: updatedUser,
          accessToekn: accessJWTToken,
          refreshToken: refreshJWTToken,
        },
      };
    },
    {
      body: loginBodySchema,
    }
  )

Client will make an api call to /api/auth/log-in and will send json body

{
    "email":"user5@gmail.com",
    "password":"12345678"
}

We will verify the email and password from db. Next we will generate two tokens one for Access token and another for Refresh token.
We will send both tokens in response cookies so that the further api call to protected route will have those tokens and will store refresh token in db for further use to generate access token.

Again we do not need to add any third party libs for cookies handling Elysia provides all methods to handle cookies.

We will need to add jwt plugin to handle jwt token generation and verification

bun add @elysiajs/jwt

You can read more about jwt plugins here https://elysiajs.com/plugins/jwt.html

Here also we have added login body schema we can add those schema in src/schema.ts file

...

const loginBodySchema = t.Object({
  email: t.String({ format: "email" }),
  password: t.String({ minLength: 8 }),
});

export { loginBodySchema, signupBodySchema };

Next we will create new auth plugin that will take care of velidate and verify jwt token when any request will received.

API Request ------->  Auth Plugin --------> API Handler

src/plugin.ts

import jwt from "@elysiajs/jwt";
import Elysia from "elysia";
import { JWT_NAME } from "./config/constant";
import { prisma } from "./lib/prisma";
import { User } from "@prisma/client";

const authPlugin = (app: Elysia) =>
  app
    .use(
      jwt({
        name: JWT_NAME,
        secret: Bun.env.JWT_SECRET!,
      })
    )
    .derive(async ({ jwt, cookie: { accessToken }, set }) => {
      if (!accessToken.value) {
        // handle error for access token is not available
        set.status = "Unauthorized";
        throw new Error("Access token is missing");
      }
      const jwtPayload = await jwt.verify(accessToken.value);
      if (!jwtPayload) {
        // handle error for access token is tempted or incorrect
        set.status = "Forbidden";
        throw new Error("Access token is invalid");
      }

      const userId = jwtPayload.sub;
      const user = await prisma.user.findUnique({
        where: {
          id: userId,
        },
      });

      if (!user) {
        // handle error for user not found from the provided access token
        set.status = "Forbidden";
        throw new Error("Access token is invalid");
      }

      return {
        user,
      };
    });

export { authPlugin };

Here we have utilized the jwt plugin to verify jwt token received from request cookies. During login we have added userId in jwt sub and here we have just got the userId and fetch user info from db and added to derive so that available in next request handler.

Here we have raised two error status code

401 Unauthorized that can be raise in case of access token is not available
403 Forbidden in case of access token is incorrect.

Lets utilize auth plugin in our protected route like /api/auth/logout/ and /api/auth/me.

Create new route to fetch current user
/src/route.ts

import { authPlugin } from "./plugin";

.use(authPlugin)
  .get("/me", ({ user }) => {
    return {
      message: "Fetch current user",
      data: {
        user,
      },
    };
  })

We are receiving user in context that are added from derive in auth plugin.

Lets add new route to logout user

/src/route.ts

  .use(authPlugin)
  .post("/logout", async ({ cookie: { accessToken, refreshToken }, user }) => {
    // remove refresh token and access token from cookies
    accessToken.remove();
    refreshToken.remove();

    // remove refresh token from db & set user online status to offline
    await prisma.user.update({
      where: {
        id: user.id,
      },
      data: {
        isOnline: false,
        refreshToken: null,
      },
    });
    return {
      message: "Logout successfully",
    };
  })

After logout we are just removing all the cookies and setting user status to offline.

Create access token from refresh token

/src/route.ts

  .post(
    "/refresh",
    async ({ cookie: { accessToken, refreshToken }, jwt, set }) => {
      if (!refreshToken.value) {
        // handle error for refresh token is not available
        set.status = "Unauthorized";
        throw new Error("Refresh token is missing");
      }
      // get refresh token from cookie
      const jwtPayload = await jwt.verify(refreshToken.value);
      if (!jwtPayload) {
        // handle error for refresh token is tempted or incorrect
        set.status = "Forbidden";
        throw new Error("Refresh token is invalid");
      }

      // get user from refresh token
      const userId = jwtPayload.sub;

      // verify user exists or not
      const user = await prisma.user.findUnique({
        where: {
          id: userId,
        },
      });

      if (!user) {
        // handle error for user not found from the provided refresh token
        set.status = "Forbidden";
        throw new Error("Refresh token is invalid");
      }
      // create new access token
      const accessJWTToken = await jwt.sign({
        sub: user.id,
        exp: getExpTimestamp(ACCESS_TOKEN_EXP),
      });
      accessToken.set({
        value: accessJWTToken,
        httpOnly: true,
        maxAge: ACCESS_TOKEN_EXP,
        path: "/",
      });

      // create new refresh token
      const refreshJWTToken = await jwt.sign({
        sub: user.id,
        exp: getExpTimestamp(REFRESH_TOKEN_EXP),
      });
      refreshToken.set({
        value: refreshJWTToken,
        httpOnly: true,
        maxAge: REFRESH_TOKEN_EXP,
        path: "/",
      });

      // set refresh token in db
      await prisma.user.update({
        where: {
          id: user.id,
        },
        data: {
          refreshToken: refreshJWTToken,
        },
      });

      return {
        message: "Access token generated successfully",
        data: {
          accessToken: accessJWTToken,
          refreshToken: refreshJWTToken,
        },
      };
    }
  )

Here we are re creating the access token and refresh token from existing refresh token and setting in cookies also we are updating available refresh token in db.

I have added all constants in src/config/constant.ts

const ACCESS_TOKEN_EXP = 5 * 60; // 5 minutes
const REFRESH_TOKEN_EXP = 7 * 86400; // 7 days
const JWT_NAME = "jwt";
export { ACCESS_TOKEN_EXP, REFRESH_TOKEN_EXP, JWT_NAME };

I have created one utility function related to date that will return timestamps from seconds.

src/lib/util.ts

function getExpTimestamp(seconds: number) {
  const currentTimeMillis = Date.now();
  const secondsIntoMillis = seconds * 1000;
  const expirationTimeMillis = currentTimeMillis + secondsIntoMillis;

  return Math.floor(expirationTimeMillis / 1000);
}

export { getExpTimestamp };

All the codebase is open source you can access and contribute to repo
https://github.com/harshmangalam/elysia-prisma-jwt-auth

Simplified Job Application Automation With Javascript

Harsh Mangalam — Sat, 19 Aug 2023 07:14:24 +0000

Are you tired of spending countless hours applying for jobs on online portals? 🕒💼 Say goodbye to manual clicking with our latest video tutorial on browser automation! 🚀✨ Learn how to harness the power of the browser console to streamline your job application process. Our step-by-step guide will walk you through automating the entire process, from navigating job listings to clicking that 'Apply' button. 🎯📋

We are going to write a javascript function that will run in an interval of 300 ms and automatically click on the "Apply" button of the job card.

function applyNow() {
  const btns = document.querySelectorAll("button");
  for (const btn of btns) {
    if (btn.textContent.trim() === "Apply") {
      btn.click();
    }
  }
}

setInterval(() => applyNow(), 300);

Click on the below thumbnail to watch complete video.

Mobile OTP based authentication in golang

Harsh Mangalam — Sat, 05 Aug 2023 20:47:36 +0000

In this post, we will develop a mobile OTP-based authentication API in Golang.

Tech stack

Golang

Go (or Golang) is an open-source programming language developed by Google. It emphasizes simplicity, efficiency, and concurrency support. Go is widely used for web development, system programming, and cloud-native applications.

https://go.dev/

Gofiber

GoFiber is a lightweight and fast web framework written in Go (Golang). It is built on top of Fasthttp, making it an efficient choice for building high-performance APIs and web applications. GoFiber offers features like middleware support, routing, and context handling.

https://gofiber.io/

MongoDB

MongoDB is a NoSQL, document-oriented database, known for its flexibility and scalability. It stores data in JSON-like BSON format, enabling easy manipulation and indexing. MongoDB is widely used for handling large-scale, unstructured, and real-time data in modern applications.

https://www.mongodb.com/

Twilio

Twilio is a cloud communications platform that enables developers to integrate messaging, voice, and video functionalities into their applications using APIs. It simplifies the process of building communication features such as SMS, MMS, phone calls, and more, allowing businesses to engage with their customers programmatically.

https://www.twilio.com/

Create a new directory auth and init go modules inside the project.

go mod init auth

Install required packages

go get github.com/gofiber/fiber/v2
go get github.com/golang-jwt/jwt/v5
go get github.com/joho/godotenv
go get github.com/twilio/twilio-go
go get go.mongodb.org/mongo-driver/mongo

Create folder structure for our project

Project
├── README.md
├── config
│   └── config.go
├── database
│   ├── connection.go
│   └── database.go
├── go.mod
├── go.sum
├── handler
│   └── auth.go
├── main.go
├── middleware
│   └── auth.go
├── model
│   └── user.go
├── router
│   └── router.go
├── schema
│   ├── auth.go
│   └── response.go
└── util
    ├── twilio.go
    └── user.go

config folder contains configurations i.e. env variable configuration.
database folder contains database connections and types related to db i.e. mongodb driver setup.
handler folder contains route handler i.e. register handler, login handler etc...
middleware folder contains route middleware that runs before or after any handler executes i.e. auth jwt validation middleware.
model contains MongoDB schema i.e. User schema.
router contains route initialization and maps API routes to specific route handlers i.e. auth routes.
schema contains application schema i.e. incoming request body schema.
util contains reusable database query and application helper function i.e. Find user by phone, send sms etc...
.env contains environment variables i.e. Twilio api-key, mongodb-uri etc...
copy all .env.example and paste it inside .env.
main.go is the entry point of the Go application.

Next, I will show you the required routes for this project.

- /api/auth
    - /register
    - /login
    - /verify_otp
    - /resend_otp
    - /me

main.go

package main

import (
    "auth/database"
    "auth/router"
    "log"
)

func main() {
    app := router.New()
    err := database.Connect()
    if err != nil {
        panic(err)
    }
    log.Fatal(app.Listen(":3000"))
}

If you are familiar with Express then you will find gofiber syntax is similar to Express (Node web framework).

Here we have done 3 things:-

Initialized our router.
Connected with MongoDB database.
And started our server to listen on port 3000

database/database.go

package database

import "go.mongodb.org/mongo-driver/mongo"

const Users = "users"

type MongoInstance struct {
    Client *mongo.Client
    Db     *mongo.Database
}

Users const store collection name so that we can reuse this variable where we required users collection for query users data.

We have also created one struct to store MongoDB client and database pointers.

database/connection.go

package database

import (
    "auth/config"
    "context"
    "log"

    "go.mongodb.org/mongo-driver/mongo"
    "go.mongodb.org/mongo-driver/mongo/options"
)

var Mg MongoInstance

func Connect() error {
    dbName := config.Config("DATABASE_NAME")
    uri := config.Config("DATABASE_URI") + dbName
    client, err := mongo.Connect(context.TODO(), options.Client().ApplyURI(uri))
    if err != nil {
        return err
    }
    log.Printf("Connected with databse %s", dbName)
    db := client.Database(dbName)
    Mg = MongoInstance{
        Client: client,
        Db:     db,
    }

    return nil
}

We have defined package level variable Mg and store database info here so that we can use this variable to query our database.

DATABASE_NAME and DATABASE_URI is an environment variable whose value is loaded from the .env file.

The context package is commonly used in Go to pass context information between different function calls in a chain or across concurrent goroutines. This package provides the ability to propagate cancellation signals and deadlines through the call stack.

The context.TODO() function in Go's context package is used to create a new, empty context when you don't have a more specific context available or when you are not sure which context to use.

config/config.go

package config

import (
    "fmt"
    "os"

    "github.com/joho/godotenv"
)

// Config func to get env value
func Config(key string) string {
    // load .env file
    err := godotenv.Load(".env")
    if err != nil {
        fmt.Print("Error loading .env file")
    }
    return os.Getenv(key)
}

Here we have used the github.com/joho/godotenv package to load the env variables from the .env file.

router/router.go

package router

import (
    "auth/handler"
    "auth/middleware"

    "github.com/gofiber/fiber/v2"
    "github.com/gofiber/fiber/v2/middleware/compress"
    "github.com/gofiber/fiber/v2/middleware/cors"
    "github.com/gofiber/fiber/v2/middleware/logger"
    "github.com/gofiber/fiber/v2/middleware/monitor"
)

func New() *fiber.App {
    app := fiber.New()
    api := app.Group("/api")
    auth := api.Group("/auth")

    auth.Post("/register", handler.Register)
    auth.Post("/login", handler.Login)
    auth.Post("/verify_otp", handler.VerifyOTP)
    auth.Post("/resend_otp", handler.ResendOTP)
    auth.Get("/me", middleware.Protected(), handler.GetCurrentUser)

    return app
}

We have initialized fiber and added Groups for api and auth so that we do need to type each path again and again. It also provides a better way to apply middleware to a group of routes instead of applying the same middleware to each route one by one.

model/user.go


package model

import "go.mongodb.org/mongo-driver/bson/primitive"

type User struct {
    ID    primitive.ObjectID `json:"id" bson:"_id"`
    Name  string             `json:"name"`
    Phone string             `json:"phone"`
    Otp   string             `json:"otp,omitempty"`
}

We have created a User model to store user data consistently in MongoDB database.

schema/response.go

package schema

type ResponseHTTP struct {
    Success bool   `json:"success"`
    Data    any    `json:"data"`
    Message string `json:"message"`
}

We will use this schema to send HTTP responses in a consistent way.

schema/auth.go

package schema

type RegisterBody struct {
    Name  string `json:"name"`
    Phone string `json:"phone"`
}

type LoginSchema struct {
    Phone string `json:"phone"`
}

type VerifyOTPSchema struct {
    Phone string `json:"phone"`
    Otp   string `json:"otp"`
}

We will use this schema to parse the incoming request body data.

handler/auth.go

package handler

import (
    "auth/model"
    "auth/schema"
    "auth/util"

    "github.com/gofiber/fiber/v2"
)

We have added the required package imports later we will add many utility functions in util.

// ...
// ...
func Register(c *fiber.Ctx) error {
    // request body data
    body := new(schema.RegisterBody)
    if err := c.BodyParser(body); err != nil {
        return c.Status(fiber.StatusBadRequest).JSON(schema.ResponseHTTP{
            Success: false,
            Data:    nil,
            Message: err.Error(),
        })
    }

    // validate duplicate mobile number

    user, err := util.FindUserByPhone(body.Phone)

    if err != nil {
        return c.Status(fiber.StatusInternalServerError).JSON(schema.ResponseHTTP{
            Success: false,
            Data:    nil,
            Message: err.Error(),
        })
    }

    if user != nil {
        return c.Status(fiber.StatusBadRequest).JSON(schema.ResponseHTTP{
            Success: false,
            Data:    nil,
            Message: "Phone number already in use",
        })
    }

    // create new user

    id, err := util.InsertUser(body)
    if err != nil {
        return c.Status(fiber.StatusInternalServerError).JSON(schema.ResponseHTTP{
            Success: false,
            Data:    nil,
            Message: err.Error(),
        })
    }

    return c.Status(fiber.StatusCreated).JSON(schema.ResponseHTTP{
        Success: true,
        Data: fiber.Map{
            "id": id,
        },
        Message: "Account registered successfully",
    })
}

Here we have added a login handler it will send OTP to a mobile number if the specific user is already registered.

First, it will parse request body data and store it in the body.
Next, it will verify the user from the database using the mobile number.
Generate OTP and update otp field of users collection in the database.
And send generated OTP to the user's mobile number.

func VerifyOTP(c *fiber.Ctx) error {
    // request body data
    body := new(schema.VerifyOTPSchema)
    if err := c.BodyParser(body); err != nil {
        return c.Status(fiber.StatusBadRequest).JSON(schema.ResponseHTTP{
            Success: false,
            Data:    nil,
            Message: err.Error(),
        })
    }

    // find phone in database
    user, err := util.FindUserByPhone(body.Phone)

    if err != nil {
        return c.Status(fiber.StatusInternalServerError).JSON(schema.ResponseHTTP{
            Success: false,
            Data:    nil,
            Message: err.Error(),
        })
    }

    if user == nil {
        return c.Status(fiber.StatusBadRequest).JSON(schema.ResponseHTTP{
            Success: false,
            Data:    nil,
            Message: "Phone number not exists",
        })
    }

    if user.Otp != body.Otp {
        return c.Status(fiber.StatusBadRequest).JSON(schema.ResponseHTTP{
            Success: false,
            Data:    nil,
            Message: "Incorrect Otp",
        })
    }

    // generate jwt token
    token, err := util.GenerateJWT(user.ID.Hex())
    if err != nil {
        return c.Status(fiber.StatusInternalServerError).JSON(schema.ResponseHTTP{
            Success: false,
            Data:    nil,
            Message: err.Error(),
        })
    }

    // remove old otp from db
    util.UpdateUser(user.ID, map[string]any{
        "otp": "",
    })

    return c.Status(fiber.StatusCreated).JSON(schema.ResponseHTTP{
        Success: true,
        Data: fiber.Map{
            "token": "Bearer " + token,
        },
        Message: "Account login successfully",
    })
}

This handler will verify the user's OTP and return the JWT Bearer token in response if OTP will be correct.

First, it will parse request body data and store it in the body.
Verify provided phone number.
Verify provided OTP.
Create a JWT token with userId as a payload.
Remove old OTP from the user collection.

func ResendOTP(c *fiber.Ctx) error {
    // request body data
    body := new(schema.VerifyOTPSchema)
    if err := c.Status(fiber.StatusBadRequest).BodyParser(body); err != nil {
        return c.JSON(schema.ResponseHTTP{
            Success: false,
            Data:    nil,
            Message: err.Error(),
        })
    }

    // find phone in database
    user, err := util.FindUserByPhone(body.Phone)

    if err != nil {
        return c.Status(fiber.StatusInternalServerError).JSON(schema.ResponseHTTP{
            Success: false,
            Data:    nil,
            Message: err.Error(),
        })
    }

    if user == nil {
        return c.Status(fiber.StatusBadRequest).JSON(schema.ResponseHTTP{
            Success: false,
            Data:    nil,
            Message: "Phone number not exists",
        })
    }

    otp := util.GenerateRandomNumber()

    // save otp in database
    util.UpdateUser(user.ID, map[string]any{
        "otp": otp,
    })
    // send otp to user phone

    err = util.SendOTP(user.Phone, otp)
    if err != nil {
        return c.Status(fiber.StatusInternalServerError).JSON(schema.ResponseHTTP{
            Success: false,
            Data:    nil,
            Message: err.Error(),
        })
    }

    return c.Status(fiber.StatusCreated).JSON(schema.ResponseHTTP{
        Success: true,
        Data:    nil,
        Message: "Sent otp to registered mobile number",
    })
}

This handler will handle resend of OTP to the specific mobile number.


func GetCurrentUser(c *fiber.Ctx) error {
    user := c.Locals("user").(*model.User)
    user.Otp = ""
    return c.Status(fiber.StatusOK).JSON(schema.ResponseHTTP{
        Success: true,
        Data:    user,
        Message: "Get current user",
    })
}

This handler will return the currently logged-in user. We have added user value in locals from auth middleware. We removed the OTP value so that the user can't get otp in the response.

util/user.go

package util

import (
    "auth/config"
    "auth/database"
    "auth/model"
    "auth/schema"
    "context"
    "math/rand"
    "strconv"
    "time"

    "github.com/golang-jwt/jwt/v5"
    "go.mongodb.org/mongo-driver/bson"
    "go.mongodb.org/mongo-driver/bson/primitive"
    "go.mongodb.org/mongo-driver/mongo"
)

func FindUserByPhone(phone string) (*model.User, error) {
    // Create a context and a collection instance
    ctx := context.TODO()
    collection := database.Mg.Db.Collection(database.Users)

    // Create a filter to find the user by phone number
    filter := bson.M{"phone": phone}

    // Create a variable to store the result
    var result model.User

    // Find the user with the given phone number
    err := collection.FindOne(ctx, filter).Decode(&result)

    if err != nil {
        if err == mongo.ErrNoDocuments {
            // If the error is ErrNoDocuments, it means no user was found
            return nil, nil
        }
        // Handle other potential errors
        return nil, err
    }

    return &result, nil
}

func InsertUser(user *schema.RegisterBody) (any, error) {
    // Create a context and a collection instance
    ctx := context.TODO()
    collection := database.Mg.Db.Collection(database.Users)

    // Insert the user into the collection
    result, err := collection.InsertOne(ctx, user)
    return result.InsertedID, err
}

func UpdateUser(userID primitive.ObjectID, updatedFields map[string]any) error {
    // Create a context and a collection instance
    ctx := context.TODO()
    collection := database.Mg.Db.Collection(database.Users)

    // Create a filter to find the user by ID
    filter := bson.M{"_id": userID}

    // Create an update with the provided fields
    update := bson.M{"$set": updatedFields}

    // Update the user document in the collection
    _, err := collection.UpdateOne(ctx, filter, update)
    return err

}

func FindUserById(userId string) (*model.User, error) {
    // Create a context and a collection instance
    id, err := primitive.ObjectIDFromHex(userId)
    if err != nil {
        return nil, err
    }
    ctx := context.TODO()
    collection := database.Mg.Db.Collection(database.Users)

    // Create a filter to find the user by phone number
    filter := bson.M{"_id": id}

    // Create a variable to store the result
    var result model.User

    // Find the user with the given phone number
    err = collection.FindOne(ctx, filter).Decode(&result)

    if err != nil {
        if err == mongo.ErrNoDocuments {
            // If the error is ErrNoDocuments, it means no user was found
            return nil, nil
        }
        // Handle other potential errors
        return nil, err
    }

    return &result, nil
}

func GenerateRandomNumber() string {
    // Generate a random number between 1000 and 9999 (inclusive)
    num := rand.Intn(9000) + 1000
    return strconv.Itoa(num)
}

func GenerateJWT(id string) (string, error) {
    token := jwt.New(jwt.SigningMethodHS256)
    claims := token.Claims.(jwt.MapClaims)
    claims["userId"] = id
    claims["exp"] = time.Now().Add(time.Hour * 72).Unix()
    return token.SignedString([]byte(config.Config("SECRET")))

}

Here we have added all utility helper function to query our database and auth-related helper functions.

util/twilio.go


package util

import (
    "auth/config"
    "fmt"
    "log"

    "github.com/twilio/twilio-go"

    openapi "github.com/twilio/twilio-go/rest/api/v2010"
)

func SendOTP(to string, otp string) error {
    accountSid := config.Config("TWILIO_ACCOUNT_SID")
    authToken := config.Config("TWILIO_AUTH_TOKEN")

    client := twilio.NewRestClientWithParams(twilio.ClientParams{
        Username: accountSid,
        Password: authToken,
    })

    params := &openapi.CreateMessageParams{}

    params.SetTo(to)
    params.SetFrom(config.Config("TWILIO_PHONE_NUMBER"))

    msg := fmt.Sprintf("Your OTP is %s", otp)
    params.SetBody(msg)

    _, err := client.Api.CreateMessage(params)
    if err != nil {
        log.Println(err.Error())
        return err
    }
    log.Println("SMS sent successfully!")

    return nil
}

Here we have used the Twilio sms service to send OTP to mobile numbers. You need to create an account in Twilio to use their services.

You can generate your virtual mobile number from the Twilio dashboard and also copy the account sid and auth token from the dashboard.

middleware/auth.go

package middleware

import (
    "auth/config"
    "auth/schema"
    "auth/util"

    jwtware "github.com/gofiber/contrib/jwt"
    "github.com/gofiber/fiber/v2"
    "github.com/golang-jwt/jwt/v5"
)

// Protected protect routes
func Protected() fiber.Handler {
    return jwtware.New(jwtware.Config{
        SigningKey:     jwtware.SigningKey{Key: []byte(config.Config("SECRET"))},
        ErrorHandler:   jwtError,
        SuccessHandler: jwtSuccess,
        ContextKey:     "payload",
    })
}

func jwtSuccess(c *fiber.Ctx) error {
    payload := c.Locals("payload").(*jwt.Token)
    claims := payload.Claims.(jwt.MapClaims)
    userId := claims["userId"].(string)
    user, err := util.FindUserById(userId)
    if err != nil {
        return c.Status(fiber.StatusUnauthorized).JSON(schema.ResponseHTTP{
            Success: false,
            Message: "User not exists",
            Data:    nil,
        })
    }
    c.Locals("user", user)
    return c.Next()
}
func jwtError(c *fiber.Ctx, err error) error {
    if err.Error() == "Missing or malformed JWT" {
        return c.Status(fiber.StatusBadRequest).
            JSON(schema.ResponseHTTP{Success: false, Message: "Missing or malformed JWT", Data: nil})
    }
    return c.Status(fiber.StatusUnauthorized).
        JSON(schema.ResponseHTTP{Success: false, Message: "Invalid or expired JWT", Data: nil})
}

Protected middleware will do the following thing:-

Verify and parse the JWT token and get a payload from it.
Handle error using jwtError handler function in case of wrong or expired JWT token.
If there is no error then it will execute jwtSuccess.
We find the user by userId.
Add user info in locals to access from any hander.
c.Next() will execute the next handler function.

By default ContextKey was user but we have changed it to payload .

You can explore complete codebase in github

harshmangalam / golang-mobile-otp-auth

Mobile OTP based authentication using golang

Golang Mobile OTP based Auth

Tech stack

golang
gofiber
mongodb
twilio sdk

Project structure

Project
├── README.md
├── config
│   └── config.go
├── database
│   ├── connection.go
│   └── database.go
├── go.mod
├── go.sum
├── handler
│   └── auth.go
├── main.go
├── middleware
│   └── auth.go
├── model
│   └── user.go
├── router
│   └── router.go
├── schema
│   ├── auth.go
│   └── response.go
└── util
    ├── twilio.go
    └── user.go

Routes

/api/auth
- /register (create new account)
- /login (sent otp to registered mobile number)
- /verify_otp
- /resend_otp
- /me (get current loggedin user)

View on GitHub

Achieve fine grained reactivity and super fast UI updates in React with Legend-state

Harsh Mangalam — Wed, 26 Jul 2023 09:28:30 +0000

Introduction

Legend state is a super fast state management library that is built on top of observables.

Features

Better Performance
Easy to use
Fine grained reactivity
Built-in persistent
Better memory usage
No Boilerplate
Lightweight (~4kb)
Better DX (Developer Experience)

Legend-state Observables use Proxy in a unique way which is really fast and it doesn't modify the underlying data.
In optimized mode for an array only re render the changed element instead of the whole array.
Legend-state render component only once and update needed part of ui yes it feels like the Solid.js.

If we look into the current mental model of React when we update the state it rerender the component and then execute side effects.

State changed => Rerender component => Execute side effect

But legend mental model skip the second step from React mental model and execute your side effect directly after state change.

State changed => Execute side effect

If it comes to optimize react app we jump into applying useCallback, useMemo to prevent from unusual rerender but in legend component render only once you do not required these react hooks.

You can easily replace useState and useReducer with useObservable hook that keep track of deep object and notify listeners when state change and instead of rerendering the whole component it will only updates the needed part of UI.

In the same way you can replace useEffect with useObserve so no need to maintain the dependency array.

Okay now we are going to develop a todo app that will utilize legend-state and natural fine grained reactivity.

Initialize new project with vite react-ts and follow the terminal instructions.

 pnpm create vite todo --template react-ts

Setup tailwindcss

pnpm i -D tailwindcss postcss autoprefixer
pnpx tailwindcss init -p

tailwind.config.js

import daisyui from "daisyui"
/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

src/index.css

@tailwind base;
@tailwind components;
@tailwind utilities;

Add daisyui plugins to make our component beautiful with fewer classes.

npm i -D daisyui@latest

tailwind.config.js


module.exports = {
  //...
  plugins: [require("daisyui")],
}

Define Todo type and Status enum

types/todo.ts

export enum Status {
  Initialized = "initialized",
  Progress = "progress",
  Done = "done",
}

export type Todo = {
  id: string;
  text: string;
  status: Status;
};

Create global store using legend state observable

src/store/todo.ts

import { observable } from "@legendapp/state";
import { Todo } from "../types/todo";

export const state = observable<{ todos: Todo[] }>({
  todos: [],
});

Update main.tsx


import { enableReactUse } from "@legendapp/state/config/enableReactUse";

enableReactUse(); // This adds the use() function to observables

// ...
// ...

Update App.tsx


import TodoItem from "./components/todo-item";
import { state } from "./store/todo";
import { Status } from "./types/todo";
import { For, Reactive, useObservable } from "@legendapp/state/react";
import { enableReactComponents } from "@legendapp/state/config/enableReactComponents";

enableReactComponents();
export default function App() {
  const input = useObservable("");
  const handleAddTodo = () => {
    state.todos.push({
      id: crypto.randomUUID(),
      status: Status.Initialized,
      text: input.get(),
    });
    input.set("");
  };

  return (
    <div className="min-h-screen h-full bg-base-100 py-8">
      <div className="max-w-xl mx-auto">
        <section className="flex flex-col gap-y-2 items-center  text-center">
          <h1 className="font-bold text-3xl">Todo</h1>
          <p className="text-xl">
            Todo web app build with React | Vite | Legend State | Tailwindcss |
            Daisyui
          </p>
        </section>

        <section className="mt-8 flex items-center gap-2">
          <Reactive.input
            autoFocus
            placeholder="Start typing..."
            $value={input}
            className="input input-bordered w-full"
          />
          <button onClick={handleAddTodo} className="btn btn-primary">
            Add
          </button>
        </section>

        <section className="mt-8">
          <div className="grid grid-cols-1 gap-2">
            <For each={state.todos}>
              {(todo) => <TodoItem todo={todo.get()} />}
            </For>
          </div>
        </section>
      </div>
    </div>
  );
}

Legend-State provides reactive versions of all platform components with reactive props to use these components first enable it using enableReactComponents()

Reactive.input add two-way binding to the value, so that the observable is always in sync with the displayed value of the element.

<For> component is optimized for rendering arrays of observable objects so that they are extracted into a separate tracking context and don't re-render the parent.

Using .get() we can get value from Observable and .set() trigger the state update.

Create src/components/todo-item.tsx


import { state } from "../store/todo";
import { Status, Todo } from "../types/todo";
import { Reactive } from "@legendapp/state/react";
import TodoStatus from "./todo-status";

export default function TodoItem({ todo }: { todo: Todo | undefined }) {
  const handleRemoveTodo = () => {
    state.todos.set((todos) => todos.filter((t) => t.id !== todo?.id));
  };
  return (
    <Reactive.article
      $className={
        todo?.status === Status.Progress
          ? "border-warning card card-bordered"
          : todo?.status === Status.Done
          ? "border-error card card-bordered"
          : "card card-bordered"
      }
    >
      <div className="card-body p-4">
        {todo?.text}

        <div className="card-actions flex gap-2">
          <TodoStatus id={todo?.id} status={todo?.status} />

          <button onClick={handleRemoveTodo} className="btn btn-error btn-sm">
            Remove
          </button>
        </div>
      </div>
    </Reactive.article>
  );
}

src/components/todo-status.tsx

import { state } from "../store/todo";
import { Status } from "../types/todo";

export default function TodoStatus({
  id,
  status,
}: {
  id: string | undefined;
  status: Status | undefined;
}) {
  const handleChangeStatus = (status: Status) => {
    state.todos.set((todos) =>
      todos.map((todo) => {
        if (todo.id === id) {
          return {
            ...todo,
            status,
          };
        }
        return todo;
      })
    );
  };
  return (
    <select
      className="select flex-1 select-sm select-bordered"
      value={status}
      onChange={(e) => handleChangeStatus(e.target.value as Status)}
    >
      <option value={Status.Initialized}>Initialized</option>
      <option value={Status.Progress}>Progress</option>
      <option value={Status.Done}>Done</option>
    </select>
  );
}

You can go through legend-state documentation here
Full source code is available on github

harshmangalam / reactjs-legend-state-daisyui-todo

Todo web app build with React 18 | Vite | Tailwindcss | Dasiyui | Legend state

React + TypeScript + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

@vitejs/plugin-react uses Babel for Fast Refresh
@vitejs/plugin-react-swc uses SWC for Fast Refresh

Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:

Configure the top-level parserOptions property like this:

   parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
    project: ['./tsconfig.json', './tsconfig.node.json'],
    tsconfigRootDir: __dirname,
   },

Replace plugin:@typescript-eslint/recommended to plugin:@typescript-eslint/recommended-type-checked or plugin:@typescript-eslint/strict-type-checked
Optionally add plugin:@typescript-eslint/stylistic-type-checked
Install eslint-plugin-react and add plugin:react/recommended & plugin:react/jsx-runtime to the extends list

View on GitHub

Also i have developed for nextjs using nextjs-13 app router | shadcn-ui | legend-state

harshmangalam / nextjs-legend-state-shadcn-ui-todo

Todo web app build with Next.js 13 app router | Legend state | Shadcn-ui

This is a Next.js project bootstrapped with create-next-app.

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

This project uses next/font to automatically optimize and load Inter, a custom Google Font.

Learn More

To learn more about Next.js, take a look at the following resources:

Next.js Documentation - learn about Next.js features and API.
Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.

View on GitHub

Add JWT Authentication in Bun API

Harsh Mangalam — Sun, 11 Jun 2023 19:21:42 +0000

In this blog post we are going to add authentication in Bun based REST API.

Bun

Bun is relatively new javascript runtime that is built on top of JavaScriptCore engine (used in apple safari) and Zig programming language. It has built in transpiler, bundler, test runner and npm-compatible package manager.

Elysia

Elysia is a fully type-safe web framework built on top of Bun having familier syntax like express.

Prisma

Prisma is a Nodejs and Typescript ORM that reduce the burden of writting pure SQL command to interact with database. You can use both SQL and NoSQL database with prisma.

In this post we are going to use Postgresql to store user data and we will use Prisma cli to initialize new postgresql database and apply schema migrations.

Prerequisite

Install Bun (https://bun.sh/docs/installation)
Setup Postgresql (https://www.postgresql.org/download/)

Lets create new elysia project using bun command line

bun create elysia auth

Now open auth project in vscode

cd auth
code .

src/index.ts


import Elysia from "elysia";
import { auth } from "~modules/auth";
import { cookie } from "@elysiajs/cookie";
import { jwt } from "@elysiajs/jwt";
const app = new Elysia()
  .group("/api", (app) =>
    app
      .use(
        jwt({
          name: "jwt",
          secret: Bun.env.JWT_SECRET!,
        })
      )
      .use(cookie())
      .use(auth)
  )
  .listen(8080);
console.log(
  `🦊 Elysia is running at ${app.server?.hostname}:${app.server?.port}`
);

First we created an instance of Elysia then we added jwt and cookie plugins provided by elysia. You can install both plugins using bun command.

bun add @elysiajs/cookie @elysiajs/jwt

cookie plugin adds support for using cookie in Elysia handler and jwt plugin adds support for using JWT in Elysia handler. Internally @elysiajs/jwt use jose (https://github.com/panva/jose).

We used grouping features of elysia which allows you to combine multiple prefixes into one.

Suppose that we have these routes having repeated prefix.

/api/auth/signup
/api/auth/login
/api/auth/logout

Instead we can group them with prefix /api/.

For jwt plugin you can explicitly register the JWT function with a different name using name property.

You can access environment variable in Bun using Bun.env. Create a dot file on top level .env.local and add JWT_SECRET.

.env.local

JWT_SECRET="itssecret"

Then you can use Bun.env.JWT_SECRET to access JWT_SECRET value available in env file. Because Bun is Node compatible so you can also use process.env.JWT_SECRET.

In TypeScript, the exclamation mark (!) is known as the non-null assertion operator. It is used to assert that a value is not null or undefined.

We have registered auth module using app.use(auth) so that we can keep our auth related handlers separate.

Next we are going to setup prisma.

Add Prisma CLI as a development dependency

bun add -d  prisma

Next, set up your Prisma project by creating your Prisma schema file with the following command:

bunx prisma init

bunx is similer to npx or pnpx the primary purpose of bunx is to facilitate the execution of packages that are listed in the dependencies or devDependencies section of a project's package.json file. Instead of manually installing these packages globally or locally, you can use bunx to run them directly.

Now create user schema inside prisma/schema.prisma file

generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

model User {
  id                String    @id @default(uuid())
  name              String
  username          String    @unique
  email             String    @unique
  salt              String
  hash              String
  summary           String?
  links             Json?
  location          Json?
  profileImage      String
  createdAt         DateTime  @default(now())
  updatedAt         DateTime  @updatedAt
}

Next we are going to apply migrations to create user table in our database.

bunx prisma db push

Migrations are changes to your database schema, such as creating tables, altering columns, or adding indexes.

Next we are going to add prisma client package to interact with database.

bun add @prisma/client

Inside /src/libs/prisma.ts create instance of prisma client and export it.

import { PrismaClient } from "@prisma/client";
export const prisma = new PrismaClient();

Inside /src/modules/auth/index.ts add auth related handlers

import { Elysia, t } from "elysia";
import { prisma } from "~libs/prisma";
import { comparePassword, hashPassword, md5hash } from "~utils/bcrypt";
import { isAuthenticated } from "~middlewares/auth";
export const auth = (app: Elysia) =>
  app.group("/auth", (app) =>
    app
      .post(
        "/signup",
        async ({ body, set }) => {
          const { email, name, password, username } = body;
          // validate duplicate email address
          const emailExists = await prisma.user.findUnique({
            where: {
              email,
            },
            select: {
              id: true,
            },
          });
          if (emailExists) {
            set.status = 400;
            return {
              success: false,
              data: null,
              message: "Email address already in use.",
            };
          }

          // validate duplicate username
          const usernameExists = await prisma.user.findUnique({
            where: {
              username,
            },
            select: {
              id: true,
            },
          });

          if (usernameExists) {
            set.status = 400;
            return {
              success: false,
              data: null,
              message: "Someone already taken this username.",
            };
          }

          // handle password
          const { hash, salt } = await hashPassword(password);
          const emailHash = md5hash(email);
          const profileImage = `https://www.gravatar.com/avatar/${emailHash}?d=identicon`;

          const newUser = await prisma.user.create({
            data: {
              name,
              email,
              hash,
              salt,
              username,
              profileImage,
            },
          });

          return {
            success: true,
            message: "Account created",
            data: {
              user: newUser,
            },
          };
        },
        {
          body: t.Object({
            name: t.String(),
            email: t.String(),
            username: t.String(),
            password: t.String(),
          }),
        }
      )
      .post(
        "/login",
        async ({ body, set, jwt, setCookie }) => {
          const { username, password } = body;
          // verify email/username
          const user = await prisma.user.findFirst({
            where: {
              OR: [
                {
                  email: username,
                },
                {
                  username,
                },
              ],
            },
            select: {
              id: true,
              hash: true,
              salt: true,
            },
          });

          if (!user) {
            set.status = 400;
            return {
              success: false,
              data: null,
              message: "Invalid credentials",
            };
          }

          // verify password
          const match = await comparePassword(password, user.salt, user.hash);
          if (!match) {
            set.status = 400;
            return {
              success: false,
              data: null,
              message: "Invalid credentials",
            };
          }

          // generate access 

          const accessToken = await jwt.sign({
            userId: user.id,
          });

          setCookie("access_token", accessToken, {
            maxAge: 15 * 60, // 15 minutes
            path: "/",
          });


          return {
            success: true,
            data: null,
            message: "Account login successfully",
          };
        },
        {
          body: t.Object({
            username: t.String(),
            password: t.String(),
          }),
        }
      )
      .use(isAuthenticated)
      // protected route
      .get("/me", ({ user }) => {
        return {
          success: true,
          message: "Fetch authenticated user details",
          data: {
            user,
          },
        };
      })
  );

Here we have grouped all handlers in /auth prefix.

set is used to set status code , headers or redirect for response.
Using body we can parse request body data in our case this will be JSON request body.

We have used Elysia Schema to add validation for request body. Schema is used to define the strict type for the Elysia handler. Like in Login route we defined the structure of schema that we are going to receive from client in the third parameter of app.post(). Here we have added schema validation for body but you can add schema validation for query, params, header etc...

Now create /src/utils/bcrypt.ts and add following codes:

import { randomBytes, pbkdf2, createHash } from "node:crypto";
async function hashPassword(
  password: string
): Promise<{ hash: string; salt: string }> {
  const salt = randomBytes(16).toString("hex");
  return new Promise((resolve, reject) => {
    pbkdf2(password, salt, 1000, 64, "sha512", (error, derivedKey) => {
      if (error) {
        return reject(error);
      }
      return resolve({ hash: derivedKey.toString("hex"), salt });
    });
  });
}

async function comparePassword(
  password: string,
  salt: string,
  hash: string
): Promise<boolean> {
  return new Promise((resolve, reject) => {
    pbkdf2(password, salt, 1000, 64, "sha512", (error, derivedKey) => {
      if (error) {
        return reject(error);
      }
      return resolve(hash === derivedKey.toString("hex"));
    });
  });
}

function md5hash(text: string) {
  return createHash("md5").update(text).digest("hex");
}

export { hashPassword, comparePassword, md5hash };

We added utility function to hash plain password , compare password and generate md5 hash from strings using node:crypto package.

/src/middlewares/auth.ts

import { Elysia } from "elysia";
import { prisma } from "~libs";

export const isAuthenticated = (app: Elysia) =>
  app.derive(async ({ cookie, jwt, set }) => {
    if (!cookie!.access_token) {
      set.status = 401;
      return {
        success: false,
        message: "Unauthorized",
        data: null,
      };
    }
    const { userId } = await jwt.verify(cookie!.access_token);
    if (!userId) {
      set.status = 401;
      return {
        success: false,
        message: "Unauthorized",
        data: null,
      };
    }

    const user = await prisma.user.findUnique({
      where: {
        id: userId,
      },
    });
    if (!user) {
      set.status = 401;
      return {
        success: false,
        message: "Unauthorized",
        data: null,
      };
    }
    return {
      user,
    };
  });

derive allows you to customize Context based on existing Context. Here we have retured user from derive now user will available in handlers context.

You can configure tsconfig.json paths directory to resolve non-relative module names.


 "paths": {
      "~libs/*":["./src/libs/*"],
      "~modules/*":["./src/modules/*"],
      "~utils/*":["./src/utils/*"],
      "~middlewares/*":["./src/middlewares/*"]
    },

Lets start the server

bun run dev

🦊 Elysia is running at 0.0.0.0:8080

Mongogram - Social media backend api using golang and mongodb

Harsh Mangalam — Sun, 04 Dec 2022 11:41:26 +0000

What I built

I have build an open source social media backend api server using Golang, Gofiber and Mongodb native driver.

Category Submission:

Think Outside the JS Box

App Link

https://github.com/harshmangalam/mongogram-api

Description

Mongogram backend api build using mongodb driver and golang.
I have utilize gofiber which is based of fasthttp - fastest http server written in go and alternative to go http. I have implemented these features in mongogram

Authentication
- Login
- Signup
Accounts
- Change password
- Deactivate account
- Update profile
- Reset password
Media
- upload media in gridfs
- Fetch media from gridfs
Search
- Atlas search
- Fetch recent searches
- Clear specific recent search
- Empty recent searches
Post
- Create new post
- Fetch post lists
- Fetch post details
User
- Follow user
- Unfollow user
- Fetch user lists
- Fetch current user
- Fetch user profile

Link to Source Code

harshmangalam / mongogram-api

A social media rest api build with gofiber and mongodb

Mongogram

Social media backend api build with golang and mongodb

Features

Authentication
- Login
- Signup
Accounts
- Change password
- Deactivate account
- Update profile
- Reset password
Media
- upload media in gridfs
- Fetch media from gridfs
Search
- Atlas search
- Fetch recent searches
- Clear specific recent search
- Empty recent searches
Post
- Create new post
- Fetch post lists
- Fetch post details
User
- Follow user
- Unfollow user
- Fetch user lists
- Fetch current user
- Fetch user profile

View on GitHub

Permissive License

MIT
https://github.com/harshmangalam/mongogram-api/blob/main/LICENSE

Background

Golang is getting popularity now a days in web and serverless. Many of the serverless , network related tools and libraries are developed using golang. Even ecosystem of go is getting mature day by day and with great open source developer community support on stackoverflow and DEV community. You can find wide variety of open source project and documentation related to go.
To develop any backend api we utilize language specific framework from where you expect better developer experience go have many backend framework that you can utilize to create api ie. Gorilla mux, Echo, Gofiber, Gokit etc...
Many database provide native drive support like Mongodb, Sqlite, Redis etc...
Golang have great concurrency support using channels and can scale to millions with little effort.

How I built it

I have utilize Mongodb Cloud to store documents related to users data and posts.
I have added search support for users profile in mongogram using mongodb atlas search.
I have utlize mongodb gridfs to store media chunks and files metadata.
Mongodb provide native go driver which have great support for vast majority of latest mongodb api.

Additional Resources/Info

https://www.mongodb.com/
https://www.mongodb.com/docs/drivers/go/current/
https://university.mongodb.com/
https://gofiber.io/
https://github.com/valyala/fasthttp
https://github.com/gofiber/fiber
https://awesome-go.com/database-drivers/