K
Kinde2mo ago
TJ

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
Claire_Kinde2mo ago
Hey TJ, I'll grab our Next.js guy and get back to you soon.
Peteswah
Peteswah2mo 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.
No description
TJ
TJ2mo 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.
TJ
TJ2mo 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?
No description
TJ
TJ2mo 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?
TJ
TJ2mo 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.
TJ
TJ5w ago
@Claire_Kinde Are you able to guide me on this? 🥹
TJ
TJ4w 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
Claire_Kinde4w ago
Hi TJ. Just catching up on this - will get back to you
Want results from more Discord servers?
Add your server
More Posts
Logout button doesn't renderedI have implemented user auth using kinde successfully and my ecommerce website is able to login andChaining Middlewares Next.JS Kinde + next-internationalHi, as the title says I'm struggling to figure out how to use two different Next.js middlewares togeHas anyone used kinde_flutter_sdk to build android app?I am having issues building android APK with kinde_flutter_sdk for auth. I install the SDK and withoUnable to login to our dashboard in KindeHello, I'm getting this error when I sign in to my account 404 Domain not found The requested domaiBilling feature launch dateWhen will the billing feature be available to integrate and use. At least give the tentative dateWhat would be the most secure way to create invitation link for users to join an organizations ?I'm using resend to send the invitation link (Nextjs app router SDK). The link should be created witDoes the expo/RN SDK work with react native web?Hi, I am starting a new project and wanted to know if the Expo SDK supports React Native Web?How to prefill "First name" and "Last name" like we can do email with "login_hint"We have a custom authentication page. So email/first name/last name are already curated. We are ableWhy I am getting this error , even though I have setup callback url and redirect url.eroor: The provided authorization grant (e.g., authorization code, resource owner credentials) or reSAML per organization - estimation https://updates.kinde.com/board/set-authentication-options-per-orDo you guys have an estimation for this ticket? https://updates.kinde.com/board/set-authentication-o