DEV Community: Istaprasad Patra

Protecting Routes in Next.js with Unkey: A Personal Experience

Istaprasad Patra — Fri, 25 Oct 2024 13:43:54 +0000

When we build web applications with Next.js, securing sensitive routes is a critical aspect of maintaining the integrity of the app and user data. I recently implemented Unkey, a modern security platform, to protect the routes in a Next.js project.
Here’s a detailed walkthrough of my experience with it, highlighting why I choose Unkey, how I integrated it, and the results I achieved.

About Unkey

Before diving into the integration, I was looking for a solution that could offer robust access control with minimal configuration. Unkey stood out because of its:

Simplicity: It provides pre-built SDKs for JavaScript frameworks, making it easy to set up.
Granular Control: Unkey enables fine-grained access control, letting you protect routes based on user roles, permissions, and other custom rules.
Scalability: It works well for both small projects and large-scale applications, which was appealing for future growth.

Setting up Unkey into NextJs

I am building a stock management application and in this blog I will be telling you about the backend of this project.

The steps to setup are pretty clearly given in the docs. Firstly, we need create an account in unkey.com and create an api key and then go through the below steps.

 npx create-next-app@latest
 npm install @unkey/nextjs
 npm install mongoose mongodb

Setting up Database

I am using mongodb as my database, you can database as per your comfort.

import { NextResponse } from "next/server";
import mongoose, { Document, Model, Schema } from "mongoose";

const uri: string = process.env.MONGO_URI as string;

// Connect to MongoDB using mongoose
export async function connectToDatabase(): Promise<void> {
  try {
    await mongoose.connect(uri, {
      useNewUrlParser: true,
      useUnifiedTopology: true,
    });
    console.log("Connected to the database");
  } catch (error) {
    console.error("Database connection error:", error);
    throw error;
  }
}

// Define the Inventory interface
interface IInventory extends Document {
  slug: string;
  quantity: number;
  price: string;
}

// Define the schema
const inventorySchema: Schema<IInventory> = new Schema({
  slug: {
    type: String,
    required: true,
    unique: true,
  },
  quantity: {
    type: Number,
    required: true,
  },
  price: {
    type: String,
    required: true,
  },
});

// Create the model
const Inventory: Model<IInventory> = mongoose.models.Inventory || mongoose.model<IInventory>("Inventory", inventorySchema);

Making Fetching Data, Adding Data and Searching Data Routes

import { NextResponse } from "next/server";
import { withUnkey } from "@unkey/sdk/next";  // Ensure this import path is correct based on your SDK setup.
import type { NextRequest } from "next/server";

export const POST = withUnkey(async (req: NextRequest) => {
  if (!req.unkey?.valid) {
    return new NextResponse("Unauthorized", { status: 403 });
  }

  await connectToDatabase();

  try {
    const data = await req.json();
    console.log(data);
    const product = await Inventory.create(data);
    return NextResponse.json({ product, ok: true }, { status: 200 });
  } catch (error: any) {
    return NextResponse.json({ error: error.message }, { status: 400 });
  }
});

export const GET = withUnkey(async (req: NextRequest) => {
  if (!req.unkey?.valid) {
    return new NextResponse("Unauthorized", { status: 403 });
  }

  await connectToDatabase();

  try {
    const allProducts = await Inventory.find({});
    return NextResponse.json({ allProducts }, { status: 200 });
  } catch (error: any) {
    return NextResponse.json({ error: error.message || "An error occurred" }, { status: 400 });
  }
});

Now the searching data route is in another page :

import { NextResponse } from "next/server";
import { withUnkey } from "@unkey/sdk/next"; 
import { connectToDatabase } from "../mongo/route"; 
import { Inventory } from "../mongo/route";
import type { NextRequest } from "next/server";

export const GET = withUnkey(async (req: NextRequest) => {
  if (!req.unkey?.valid) {
    return new NextResponse("Unauthorized", { status: 403 });
  }

  await connectToDatabase();

  try {
    const { searchParams } = new URL(req.url);
    const slug = searchParams.get("slug") || "";

    const allProducts = await Inventory.find({
      slug: { $regex: slug, $options: "i" },
    });

    return NextResponse.json({ allProducts }, { status: 200 });
  } catch (error: any) {
    return NextResponse.json({ error: error.message || "An error occurred" }, { status: 400 });
  }
});

Benefits I Experienced

Using Unkey to secure my Next.js app brought several advantages:

Customization: I appreciated the flexibility to define custom rules for different user roles. This gave me full control over route access management.
Ease of Use: The SDK’s tight integration with Next.js allowed me to focus more on the business logic while handling security effortlessly.

Initially I faced a few problems as I wasn't able to understand what exactly it does but as I used it, I understood how it helps. In a big application, it will handle the security of the routes and remove a huge burden from my shoulders.

Conclusion

Using Unkey to protect routes in Next.js provided a powerful yet simple solution for managing access control in my application. Its integration with Next.js was seamless, and the flexibility it offers for defining custom rules based on user roles made it perfect for my needs.

For anyone looking for a scalable security solution to protect routes in their Next.js application, I highly recommend giving Unkey a try.

Easy Authentication Using Hanko.io

Istaprasad Patra — Sat, 19 Oct 2024 18:05:06 +0000

Building dependable online apps in the rapidly changing world of web development today requires smooth and secure authentication. A contemporary, safe, and passwordless method of user authentication is provided by Hanko, a robust authentication API. I'll demonstrate how to integrate Hanko Elements and Hanko API into a React application in this blog post, and then I'll show you a demonstration of the authentication system we created.

Let's get started!

What is Hanko?

Hanko is an authentication service that offers a passwordless experience to streamline the user authentication process. Because it supports WebAuthn, developers may use security keys, biometrics, or other passwordless login methods. Additionally, Hanko offers pre-made user interface components (known as Hanko Elements) to facilitate a smooth integration process.

Step 1: Setting Up Your React Application

First, if you haven’t already, initialize a React application using the following commands:

npx create-react-app hanko
cd hanko
npm install react-router-dom
npm start

This will create a new React project and spin up the development server.

Step 2: Install Hanko Elements

Next, install the Hanko Elements library to get access to their pre-built authentication components:

npm install @teamhanko/hanko-elements

This package will allow us to easily embed Hanko authentication elements into our React components.

Step 3: Configure Hanko in Your Application

Before diving into the code, you’ll need to sign up at Hanko.io and get your API key. After setting up your Hanko project, you can retrieve the Hanko API base URL and Hanko API key from your dashboard.

Add these values to your environment variables in the .env file:

REACT_APP_HANKO_API_URL=<YOUR_HANKO_API_BASE_URL>
REACT_APP_HANKO_API_KEY=<YOUR_HANKO_API_KEY>

Step 4: Building the Authentication Flow

Now that we have the project set up and the Hanko Elements installed, let's move on to integrating the authentication functionality.

Create a Login.js file that will handle user authentication:

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

const hankoApi = process.env.REACT_APP_HANKO_API_URL;

function Login() {
  const navigate = useNavigate();
  const hanko = useMemo(() => new Hanko(hankoApi), []);
  const [userState, setUserState] = useState({
    id: "",
    email: "",
    error: "",
  });

  const [sessionState, setSessionState] = useState({
    userID: "",
    jwt: "",
    isValid: false,
    error: "",
  });

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

  useEffect(
    () =>
      hanko.onSessionCreated(() => {
        hanko?.user
          .getCurrent()
          .then(({ id, email }) => {
            setUserState({ id, email, error: "" });
            console.log(id,email)
          })
          .catch((error) => {
            setUserState((prevState) => ({ ...prevState, error: error }));
          });
        redirectAfterLogin();
      }),
    [hanko, redirectAfterLogin]
  );

  useEffect(() => {
    if (hanko) {
      const isValid = hanko.session.isValid();
      const session = hanko.session.get();

      if (isValid && session) {
        const { userID, jwt = "" } = session;
        setSessionState({
          userID,
          jwt,
          isValid,
          error: null,
        });
        console.log(jwt);
      } else {
        setSessionState((prevState) => ({
          ...prevState,
          isValid: false,
          error: "Invalid session",
        }));
      }
    }
  }, [hanko]);

  useEffect(() => {
    register(hankoApi).catch((error) => {
      console.log(error);
    });
  }, []);
  return (
    <div className="m-0 flex justify-center items-center">
      <hanko-auth />
    </div>
  );
}

export default Login;

In the above code, we authenticate without even using an backend server, simply using hanko.io . The provides a frontend block which helps the user to login and also signin it he/she doesn't has an account. It authenticates does email verfication by sending OTP to the user's email. It also provides the feature of login even if the user forgets his password and also provides 2-factor authentication using passkeys and also using device's biometrics .You can also other social authentication methods like google,facebook,github etc.

Here, we also get jwt tokens which can be further used in other routes to check the user's autheticity using the JWKS URL. We will be able to do all these stuff without even having a backend server.

Step 7: Handling Logout

To allow users to log out, we can just add a logout button in the further pages of the website.

import React, { useState, useEffect } from "react";
import { useNavigate } from "react-router-dom";
import { Hanko } from "@teamhanko/hanko-elements";

const hankoApi = process.env.REACT_APP_HANKO_API_URL;

function Logout() {
    const navigate = useNavigate();
    const [hanko, setHanko] = useState(<Hanko />);

    useEffect(() => {
      import("@teamhanko/hanko-elements").then(({ Hanko }) =>
        setHanko(new Hanko(hankoApi ?? ""))
      );
    }, []);

    const logout = async () => {
      try {
        await hanko?.user.logout();
        navigate("/");
      } catch (error) {
        console.error("Error during logout:", error);
      }
    };

    return (
    <button onClick={logout} className="mt-10 bg-red-50 w-24 text-2xl hover:text-3xl hover:text-red-400 duration-300">Logout</button>
);
}

export default Logout

This is just an example how you can use the logout component in your website. As you can see that we can logout easily just using simple functions.

My Experience

I personally loved hanko.io because first of all, it has made my work very easy and also when I read the docs, it is super easy to understand and use. Most of the code which will be used in development process is already mentioned in the docs and so it makes our work very easy.

Secondly, there are a lot of options to use it like we can use it with other frontend frameworks like Vue, Angular, Svelte etc. We can also with many languages with which backend servers are written like NodeJs, Go, Python, Rust etc. So this makes it very compatible with every language. We can also use it with other frameworks like NextJs, Remix, Nuxt etc.

When I first visited their website, I found it to be very professional and easy to navigate. If someone just follows it step by step then it is super easy to understand and use.

With this blog, developers can understand how to integrate a modern and secure authentication system using Hanko in their projects, ensuring robust security while enhancing the user experience.

For more information you can visit hanko.io