Kinde•7mo ago

Protect Next.js route handlers with machine-to-machine application?

Hi, I want to expose the route handlers defined in Next.js 14 application for external applications to call using OAuth 2 client credentials flow. Can I do this with machine-to-machine application? I tried to get the access token like this,

curl --request POST \
--url $KINDE_ISSUER_URL/oauth/token \
--header 'content-type: application/x-www-form-urlencoded' \
--header 'accept: application/json' \
--data grant_type=client_credentials \
--data client_id=$KINDE_CLIENT_ID \
--data client_secret=$KINDE_CLIENT_SECRET \
--data audience=$KINDE_ISSUER_URL/api

curl --request POST \
--url $KINDE_ISSUER_URL/oauth/token \
--header 'content-type: application/x-www-form-urlencoded' \
--header 'accept: application/json' \
--data grant_type=client_credentials \
--data client_id=$KINDE_CLIENT_ID \
--data client_secret=$KINDE_CLIENT_SECRET \
--data audience=$KINDE_ISSUER_URL/api

but it failed with this error,

{"error":"invalid_request","error_description":"The request is missing a required parameter, includes an invalid parameter value, includes a parameter more than once, or is otherwise malformed. Requested audience 'https://xxxxx.kinde.com/api' has not been whitelisted by the OAuth 2.0 Client."}

{"error":"invalid_request","error_description":"The request is missing a required parameter, includes an invalid parameter value, includes a parameter more than once, or is otherwise malformed. Requested audience 'https://xxxxx.kinde.com/api' has not been whitelisted by the OAuth 2.0 Client."}

Do you know what could be the problem?

9 Replies

Claire_Kinde•7mo ago

Hey TJ, I'll grab our Next.js guy and get back to you soon.

Peteswah•7mo ago

Hey TJ, seems like you're on the right track. You may need to visit this page and enable APIs for applications. This article may help: https://kinde.com/docs/build/add-a-m2m-application-for-api-access/

Kinde Docs

Add a machine to machine application - Build on Kinde - Help center

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

TJOP•7mo ago

@Peter (Kinde) I think what is missing from the document is to create an API (e.g. m2m) under Settings, and add this m2m API to the machine-to-machine application.

TJOP•7mo ago

also, may I know what is the purpose of API Id and Audience? I see that we need to specify the audience whe requesting the access token, but does it serve any purpose?

TJOP•7mo ago

Hi, I have a Next.js application which I want the external applications to call the API using the access token obtain from the client credentials flow. I created one Next.js machine-to-machine application in Kinde. app/api/auth/[kindeAuth]/route.js

import { handleAuth } from "@kinde-oss/kinde-auth-nextjs/server";

export const GET = handleAuth();

import { handleAuth } from "@kinde-oss/kinde-auth-nextjs/server";

export const GET = handleAuth();

the protected API in app/api/payment/[id]/route.js

export const GET = (_, { params }) => Response.json({ message: params.id});

export const GET = (_, { params }) => Response.json({ message: params.id});

and protect the API in middleware.js

import { withAuth } from "@kinde-oss/kinde-auth-nextjs/middleware";

export const middleware = (req) => withAuth(req);

export const config = {
  matcher: ["/api/payment/:path*"],
};

import { withAuth } from "@kinde-oss/kinde-auth-nextjs/middleware";

export const middleware = (req) => withAuth(req);

export const config = {
  matcher: ["/api/payment/:path*"],
};

and I only defined these environment variables in my Next.js, .env.local

KINDE_CLIENT_ID=...
KINDE_CLIENT_SECRET=...
KINDE_ISSUER_URL=https://xxxx.kinde.com
KINDE_SITE_URL=http://localhost:3000

KINDE_CLIENT_ID=...
KINDE_CLIENT_SECRET=...
KINDE_ISSUER_URL=https://xxxx.kinde.com
KINDE_SITE_URL=http://localhost:3000

Now, I have requested an access token successfully,

curl --request POST \
--url $KINDE_ISSUER_URL/oauth2/token \
--header 'content-type: application/x-www-form-urlencoded' \
--header 'accept: application/json' \
--data grant_type=client_credentials \
--data client_id=$KINDE_CLIENT_ID \
--data client_secret=$KINDE_CLIENT_SECRET \
--data audience=test

curl --request POST \
--url $KINDE_ISSUER_URL/oauth2/token \
--header 'content-type: application/x-www-form-urlencoded' \
--header 'accept: application/json' \
--data grant_type=client_credentials \
--data client_id=$KINDE_CLIENT_ID \
--data client_secret=$KINDE_CLIENT_SECRET \
--data audience=test

but I got a 307 redirect when I called the API with the access token

curl --request GET \
--url 'http://localhost:3000/api/payment/b' \
--header 'content-type: application/json' \
--header 'authorization: Bearer xxx' -I
HTTP/1.1 307 Temporary Redirect
location: /api/auth/login
Date: Mon, 29 Apr 2024 10:09:12 GMT
Connection: keep-alive
Keep-Alive: timeout=5
Transfer-Encoding: chunked

curl --request GET \
--url 'http://localhost:3000/api/payment/b' \
--header 'content-type: application/json' \
--header 'authorization: Bearer xxx' -I
HTTP/1.1 307 Temporary Redirect
location: /api/auth/login
Date: Mon, 29 Apr 2024 10:09:12 GMT
Connection: keep-alive
Keep-Alive: timeout=5
Transfer-Encoding: chunked

Do you know what am I missing here?

TJOP•7mo ago

Hi, I try to summarize what I did in the GitHub repository at https://github.com/tjhoo/kinde-client-credentials and the steps I performed in README.md

GitHub

GitHub - tjhoo/kinde-client-credentials

Contribute to tjhoo/kinde-client-credentials development by creating an account on GitHub.

TJOP•7mo ago

@Claire_Kinde Are you able to guide me on this? 🥹

TJOP•7mo ago

@Claire_Kinde I tried https://auth0.com/docs/quickstart/backend/nodejs/01-authorization Can I achieve the same using Kinde?

Auth0 Docs

Auth0 Node (Express) API SDK Quickstarts: Authorization

This tutorial demonstrates how to add authorization to an Express.js API.

Claire_Kinde•7mo ago

Hi TJ. Just catching up on this - will get back to you

Gaming

Programming

Protect Next.js route handlers with machine-to-machine application?