Kinde•2mo ago

Protect Next.js API Routes?

Hi, I have succesfully implemented Kinde to protect my Next.js application. Works nice. I have decided to go with Next.js for the backend API and database fetching as well and by default they're also protected by the standard Kinde configuration with <KindeProvider>. Problem is, I need to be able to call the api routes from other clients as well and for simplicity Postman but I can't seem to just do a request with a access token (generated in Kinde portal). The application want to redirect me to the login route when doing HTTP requests from Postman. Is it possible to protect pages and api routes but in a way where I am allowed to call the api routes with authentication by Kinde?

4 Replies

DanielOP•2mo ago

If it helps anyone to help me this is how my middleware look like now (where I have tried solving this challenge):

import { withAuth } from "@kinde-oss/kinde-auth-nextjs/middleware";
import { NextRequest, NextResponse } from "next/server";
import jwt from "jsonwebtoken"; // For JWT validation

const SECRET_KEY = process.env.KINDE_CLIENT_SECRET || "KINDE_CLIENT_SECRET"; // Your secret key

// JWT Validation for API routes
async function validateJwtToken(request: NextRequest) {
  const authHeader = request.headers.get("Authorization");

  console.log(authHeader);

  if (!authHeader || !authHeader.startsWith("Bearer ")) {
    console.log(authHeader)
    return NextResponse.json({ message: "Unauthorized: Missing or invalid token" }, { status: 401 });
  }

  const token = authHeader.split(" ")[1];

  try {
    // Verify the JWT token
    const decoded = jwt.verify(token, SECRET_KEY);
    console.log(decoded);
    // Attach decoded user data to the request
    (request as any).user = decoded;
    return null; // No need to return anything if token is valid
  } catch (error) {
    return NextResponse.json({ message: "Unauthorized: Invalid token" }, { status: 401 });
  }
}

export default async function middleware(req: NextRequest) {
  // Apply Kinde Auth to non-API routes
  if (!req.nextUrl.pathname.startsWith("/api/v1")) {
    return withAuth(req); // Continue with Kinde's authentication for non-API routes
  }

  // Apply JWT validation for API routes
  const jwtResponse = await validateJwtToken(req);
  if (jwtResponse) {
    return jwtResponse; // If the token is invalid, respond with Unauthorized
  }

  // If both checks pass, allow the API request to proceed
  return NextResponse.next();
}

export const config = {
  matcher: [
    // This will match all paths, allowing both non-API and API routes to be handled
    "/((?!_next/static|_next/image|favicon.ico|sitemap.xml|robots.txt).*)",
  ],
};

import { withAuth } from "@kinde-oss/kinde-auth-nextjs/middleware";
import { NextRequest, NextResponse } from "next/server";
import jwt from "jsonwebtoken"; // For JWT validation

const SECRET_KEY = process.env.KINDE_CLIENT_SECRET || "KINDE_CLIENT_SECRET"; // Your secret key

// JWT Validation for API routes
async function validateJwtToken(request: NextRequest) {
  const authHeader = request.headers.get("Authorization");

  console.log(authHeader);

  if (!authHeader || !authHeader.startsWith("Bearer ")) {
    console.log(authHeader)
    return NextResponse.json({ message: "Unauthorized: Missing or invalid token" }, { status: 401 });
  }

  const token = authHeader.split(" ")[1];

  try {
    // Verify the JWT token
    const decoded = jwt.verify(token, SECRET_KEY);
    console.log(decoded);
    // Attach decoded user data to the request
    (request as any).user = decoded;
    return null; // No need to return anything if token is valid
  } catch (error) {
    return NextResponse.json({ message: "Unauthorized: Invalid token" }, { status: 401 });
  }
}

export default async function middleware(req: NextRequest) {
  // Apply Kinde Auth to non-API routes
  if (!req.nextUrl.pathname.startsWith("/api/v1")) {
    return withAuth(req); // Continue with Kinde's authentication for non-API routes
  }

  // Apply JWT validation for API routes
  const jwtResponse = await validateJwtToken(req);
  if (jwtResponse) {
    return jwtResponse; // If the token is invalid, respond with Unauthorized
  }

  // If both checks pass, allow the API request to proceed
  return NextResponse.next();
}

export const config = {
  matcher: [
    // This will match all paths, allowing both non-API and API routes to be handled
    "/((?!_next/static|_next/image|favicon.ico|sitemap.xml|robots.txt).*)",
  ],
};

I can see my bearer token in the log but I always get this in postman: { "message": "Unauthorized: Invalid token" } which indicates that the validation of jwt is not succeeding:

  try {
    // Verify the JWT token
    const decoded = jwt.verify(token, SECRET_KEY);
    console.log(decoded);
    // Attach decoded user data to the request
    (request as any).user = decoded;
    return null; // No need to return anything if token is valid
  } catch (error) {
    return NextResponse.json({ message: "Unauthorized: Invalid token" }, { status: 401 });
  }

  try {
    // Verify the JWT token
    const decoded = jwt.verify(token, SECRET_KEY);
    console.log(decoded);
    // Attach decoded user data to the request
    (request as any).user = decoded;
    return null; // No need to return anything if token is valid
  } catch (error) {
    return NextResponse.json({ message: "Unauthorized: Invalid token" }, { status: 401 });
  }

Ages•2mo ago

Hi Daniel, Thanks for reaching out. I took a look at your middleware, and I noticed you’re manually verifying the JWT using your Kinde client secret. Our access tokens are typically signed using an asymmetric algorithm (RS256), which means they’re verified using a public key (accessible via our JWKS endpoint), not the client secret. This mismatch is often why you see the "Unauthorized: Invalid token" error when testing via Postman. To resolve this, you have a couple of options: • Use our built‐in Next.js authentication helpers (like withAuth) for API routes, which handle token verification (including fetching the correct public keys) automatically. • If you need custom JWT validation, consider using a library such as jwks‑rsa to fetch the JWKS from your Kinde domain (e.g. https://<your_kinde_subdomain>.kinde.com/.well‑known/jwks) and verify the token’s signature accordingly. Could you please confirm if the token’s header indicates RS256? If so, updating your verification process should clear the issue. Let me know if you have any questions or need further assistance! For more details on token verification and access tokens, please refer to our documentation https://docs.kinde.com/build/tokens/about-access-tokens/ https://docs.kinde.com/developer-tools/about/using-kinde-without-an-sdk/

Kinde docs

Access tokens

Our developer tools provide everything you need to get started with Kinde.

Kinde docs

Using Kinde without an SDK

Our developer tools provide everything you need to get started with Kinde.

DanielOP•2mo ago

Hi @Ages and thank you so much for this. I will read through the links. Why I did not use withAuth for API routes was jsut because I could not get it to work for API calls from other clients. I maybe missed somehting.

David Bainbridge•2mo ago

Sure, Daniel.

That sounds great. Please take your time to go through the links, and let me know how it goes. If you encounter any issues or need further clarification, feel free to reach out—I’d be happy to assist you.

Gaming

Programming

Protect Next.js API Routes?

Did you find this page helpful?