K
Kinde3mo ago
WiESA

Chaining Middlewares Next.JS Kinde + next-international

Hi, as the title says I'm struggling to figure out how to use two different Next.js middlewares together. Has anyone tried this Using the Kinde middleware + something else. Or am I approaching this the wrong way? Thank you
6 Replies
Claire_Kinde
Claire_Kinde3mo ago
Hi there. Here's some recommendations for how to approach this: 1. ​Combine Middleware Functions​: You can combine multiple middleware functions into a single middleware module. This allows you to apply different authentication and authorization checks or other functionalities in a sequential manner. 2. ​Use withAuth Middleware​: Utilize the withAuth middleware provided by Kinde for handling authentication. This middleware ensures that if a user is not authenticated, they are redirected to the login page. 3. ​Custom Middleware for Additional Logic​: After setting up the withAuth middleware, you can create another custom middleware function to handle additional logic specific to your application needs. This could include user role checks, logging, or other custom behaviors. 4. ​Order of Middleware​: Ensure the order of middleware is correct. Typically, authentication checks (like those provided by withAuth) should come before any other business logic checks. This ensures that only authenticated users can access certain functionalities. 5. ​Configuration in Next.js​: Configure your middleware in the Next.js application by exporting them from a middleware file. Use the config object to specify which paths the middleware should apply to. 6. ​Testing​: Thoroughly test the combined middleware to ensure that they work seamlessly together and do not interfere with each other’s operations. Here’s a basic example of how you might set this up in your Next.js project: // pages/_middleware.js import { withAuth } from "@kinde-oss/kinde-auth-nextjs/middleware"; import customMiddleware from "../path/to/customMiddleware"; export default function middleware(req) { withAuth(req); customMiddleware(req); } export const config = { matcher: ["/protected/*"] }; Let us know if this helps. Or if you are still stuck.
WiESA
WiESA3mo ago
Thank you so much for the answer, I will try this out and get back to you
chef
chef2mo ago
hi @WiESA did you solve the problem? If so, could you show the code?
WiESA
WiESA2mo ago
Hi @Jan no not yet, had to remove the translation for now. Did you have the same issue?
chef
chef2mo ago
Yes, I am using intl-middleware and auth-middleware from Kinde and all auth endpoints delivered by Kinde I have to exclude from the intl-middleware like following
import { NextRequest } from 'next/server';
import createMiddleware from 'next-intl/middleware';
import { AppConfig } from './utils/app-config';
import { withAuth } from '@kinde-oss/kinde-auth-nextjs/middleware';

const intlMiddleware = createMiddleware({
locales: AppConfig.locales,
localePrefix: AppConfig.localePrefix,
defaultLocale: AppConfig.defaultLocale,
});

const excluded = [
'/api/auth/login',
'/api/auth/logout',
'/api/auth/kinde_callback',
'/api/kindeSession',
]

export function middleware(req: NextRequest) {
if (excluded.includes(req.nextUrl.pathname)) {
return
}

let response = intlMiddleware(req)
if (req.nextUrl.pathname === '/user') {
return withAuth(req)
}

return response
}

export const config = {
matcher: ['/((?!.+\\.[\\w]+$|_next).*)', '/', '/(api|trpc)(.*)'],
};
import { NextRequest } from 'next/server';
import createMiddleware from 'next-intl/middleware';
import { AppConfig } from './utils/app-config';
import { withAuth } from '@kinde-oss/kinde-auth-nextjs/middleware';

const intlMiddleware = createMiddleware({
locales: AppConfig.locales,
localePrefix: AppConfig.localePrefix,
defaultLocale: AppConfig.defaultLocale,
});

const excluded = [
'/api/auth/login',
'/api/auth/logout',
'/api/auth/kinde_callback',
'/api/kindeSession',
]

export function middleware(req: NextRequest) {
if (excluded.includes(req.nextUrl.pathname)) {
return
}

let response = intlMiddleware(req)
if (req.nextUrl.pathname === '/user') {
return withAuth(req)
}

return response
}

export const config = {
matcher: ['/((?!.+\\.[\\w]+$|_next).*)', '/', '/(api|trpc)(.*)'],
};
WiESA
WiESA2mo ago
Great, thank you for the answer! @Jan I implemented it similar to you
import { withAuth } from "@kinde-oss/kinde-auth-nextjs/middleware";
import { type NextRequest } from "next/server";
import createMiddleware from "next-intl/middleware";

const intlMiddleware = createMiddleware({
locales: ["en", "de"],
defaultLocale: "de",
});

const excluded = [
"/api/auth/login",
"/api/auth/logout",
"/api/auth/kinde_callback",
"/api/kindeSession",
];

export default withAuth(async function middleware(req: NextRequest) {
if (excluded.includes(req.nextUrl.pathname)) {
return req;
}

return intlMiddleware(req);
});

export const config = {
matcher: ["/((?!api|_next/static|_next/image|favicon.ico).*)"],
};
import { withAuth } from "@kinde-oss/kinde-auth-nextjs/middleware";
import { type NextRequest } from "next/server";
import createMiddleware from "next-intl/middleware";

const intlMiddleware = createMiddleware({
locales: ["en", "de"],
defaultLocale: "de",
});

const excluded = [
"/api/auth/login",
"/api/auth/logout",
"/api/auth/kinde_callback",
"/api/kindeSession",
];

export default withAuth(async function middleware(req: NextRequest) {
if (excluded.includes(req.nextUrl.pathname)) {
return req;
}

return intlMiddleware(req);
});

export const config = {
matcher: ["/((?!api|_next/static|_next/image|favicon.ico).*)"],
};
Want results from more Discord servers?
Add your server
More Posts
Has 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-oadd user in mongodb database on nuxtHey, I'm currently trying to create a nuxt app. The login is working but I don't know how I can add work email verificationHi, We have been using kinde for our applications and it’s awesome. Thanks for this wonderful tool.