"Rate Limiting, Simplified": My Journey with Unkey, the Open-Source API Management Platform

Manish Kr Prasad — Thu, 24 Oct 2024 20:58:38 +0000

As a developer, one of the most rewarding experiences is bringing an idea to life. I recently embarked on a project called devTinder, a platform designed to connect developers and tech enthusiasts for collaboration and networking. As I prepared for the deployment phase (only backend), I realized that ensuring fair usage of resources was paramount to the success of my project. I wanted to protect my application from potential misuse and abuse, so I decided to implement rate limiting using Unkey.

Why Unkey & How I came to know about Unkey?

My journey with Unkey began during the ongoing Hacktoberfest 2024, an event that celebrates open-source contributions and encourages developers to collaborate on exciting projects. As I learned more about its capabilities, I realized that Unkey also offered exactly what I needed for devTinder ie rate-limiting. Now let's answer the question why Unkey:

Open Source:
Unkey is built on an open-source model, allowing developers to contribute, customize, and adapt the tool to fit their specific needs. This fosters a collaborative community that continuously improves the platform.
Protection Against DoS Attacks:
With robust rate limiting features and simple to integrate, Unkey can provides essential protection against Denial of Service (DoS) attacks. It prevent excessive or abusive use of a resource and to ensure that the resource is available to all legitimate users.
No Credit Card Required:
Getting started with Unkey is hassle-free—there’s no need to provide credit card information. This allows developers to explore the platform without any financial commitments, making it accessible for projects of all sizes.

Using Unkey rate-limiting feature

Go to https://app.unkey.com/settings/root-keys/new
Give a name and in the Workspace section make sure to check all options of Ratelimit. Then click on Create new Key.
Copy your key, it will be shown as Your API key

If you feel lost, you can follow their well documented doc.
Now copy the above key in your .env file and make sure to keep the key as UNKEY_ROOT_KEY.

eg. UNKEY_ROOT_KEY="unkey_************************"

Now we need to create a file rateLimit.ts (filename is not fixed)
to store the ratelimit configuration.

Final step

I want to protect my routes /signup and /login from being misuse, so I will protect this two routes. Below is the code

Note: you only need those 4-5 line to get rate-limiting in your app. Yes, it's that easy and it works like magic.

Demo:

Conclusion:

If you’re considering launching your own application, I highly recommend looking into rate limiting as a means of protecting your resources and ensuring fair usage. Tools like Unkey make it easier than ever to implement these features, allowing you to focus on what you do best—building great software!

Introducing Hanko: the open-source alternative to clerk

Manish Kr Prasad — Fri, 18 Oct 2024 17:56:03 +0000

In the world of authentication management, Clerk has been a popular choice for many developers. However, with the rise of open-source alternatives, Hanko has emerged as a strong contender in the market. In this blog, we will explore Hanko, its features, and how it provides easy authentication management.

What is Hanko?
Hanko is an open-source authentication management platform that allows developers to easily manage user authentication and authorization. It provides a simple and secure way to handle user identities, making it an ideal choice for developers who want to focus on building their applications without worrying about authentication complexities.

Benefits of Using Hanko

Open-source: Hanko is open-source, which means that developers can customize and extend the platform to fit their needs.
Easy to use: Hanko provides a simple and intuitive API that makes it easy to manage user authentication.
Secure: Hanko provides enterprise-grade security features, including encryption and access controls.
Customizable: Hanko allows developers to customize the authentication experience to fit their application's needs.

Easy Authentication Management with Hanko

We will demonstrate how to create fully functional login and sign up functionality using Hanko's authentication management in a React application, including the implementation of cookie management.

First, you need to signup on Hanko Cloud . Don't worry there is already a youtube video available you can follow that to set up your account, here is the link Hanko Cloud setup.After the setup, you will have your API URL we will need that soon.

Now let's integrate hanko into our React App, assuming you have set up your React project.Let's follow the steps:

1. Install @teamhanko/hanko-elements:

Once you’ve initialized your React app, installing hanko-elements provides you with access to the prebuilt components: hanko-auth and hanko-profile.

npm install @teamhanko/hanko-elements
OR
yarn add @teamhanko/hanko-elements

2. Add the Hanko API URL:

Now add the API URL which you got while setting the Hanko Cloud, in your .env file.
REACT_APP_HANKO_API_URL=https://f4****-4802-49ad-8e0b-3d3****ab32.hanko.io

Let's create a React component Login which will handle the functionality of both login and signup.

import { useCallback, useEffect, useMemo } from "react";
import { Hanko, register } from "@teamhanko/hanko-elements";
import { useNavigate } from "react-router-dom";
import { hankoApi } from "./constants";

function Login() {

    const hanko = useMemo(() => new Hanko(hankoApi), []);
    const navigate = useNavigate();
    const defaultOptions = {
      cookieDomain: undefined,
      cookieSameSite: "none", // Specify whether/when cookies are sent with cross-site requests.
    };

    const redirectAfterLogin = useCallback(() => {
        navigate("/todos");
      }, [navigate]);

    useEffect(
        () =>
          hanko.onSessionCreated(() => {
            redirectAfterLogin();
          }),
        [hanko, redirectAfterLogin]
      );

    useEffect(() => {
      const registerHanko = async () => {
        try {
          await register(hankoApi, defaultOptions);
        } catch (error) {
          // handle error
          console.error("Error: ", error);
        }
      };

      registerHanko();
      }, []);

    return (
        <div  className=" flex justify-center">
            <hanko-auth />
        </div>
    )
}

export default Login

With this code, your login and signup functionality is fully functional with cookies and session. Yes, that is all we need to do everything else will be handled by hanko.

Verifying the token in hanko
We have written an authMiddleware which is in Nodejs(Express) which checks if the user is an authenticated user or not so that you will be able to protect your routes.

import { NextFunction, Request, Response } from "express";
import * as jose from "jose"
import dotenv from 'dotenv'


dotenv.config()

const JWKS = jose.createRemoteJWKSet(
    new URL(`${process.env.HANKO_API_URL}/.well-known/jwks.json`)
  );

export default async function authMiddleware(req: Request, res: Response, next: NextFunction) {
  try {
    let token = req.cookies.hanko
    console.log('Cookie: ', token, typeof(token))

    // Extracting the token
    if (req.cookies && req.cookies.hanko ) {
      token = req.cookies.hanko;
    } else if ( req.headers.authorization && req.headers.authorization.split(" ")[0] === "Bearer" ) {
      token = req.headers.authorization.split(" ")[1];
    }

    if (token === null || (token && token.length === 0) ) {
      res.status(401).send("Unauthorized");
      return;
    }

    // Verifying the token
    let authError = false;
    await jose.jwtVerify(token, JWKS).catch((err) => {
      authError = true;
      console.log(err);
    });

    if (authError) {
      res.status(401).send("Authentication Token not valid");
      return;
    }
    next()
  } catch (error) {
    console.log("Error:", error)
  }

}

Conclusion:
Hanko makes it easy for developers to manage user authentication and authorization.You can find more about the API by visiting .Whether you're building a new application or migrating from an existing authentication solution, Hanko is definitely worth considering.

DEV Community: Manish Kr Prasad