Convex Auth with next-intl middleware
Anyone have experience in writing a middleware that handles both convex auth and next-intl (i18n)?
3 Replies
Thanks for posting in <#1088161997662724167>.
Reminder: If you have a Convex Pro account, use the Convex Dashboard to file support tickets.
- Provide context: What are you trying to achieve, what is the end-user interaction, what are you seeing? (full error message, command output, etc.)
- Use search.convex.dev to search Docs, Stack, and Discord all at once.
- Additionally, you can post your questions in the Convex Community's <#1228095053885476985> channel to receive a response from AI.
- Avoid tagging staff unless specifically instructed.
Thank you!
This seems to work:
import createMiddleware from "next-intl/middleware";
import { routing } from "./i18n/routing";
import {
convexAuthNextjsMiddleware,
createRouteMatcher,
nextjsMiddlewareRedirect,
} from "@convex-dev/auth/nextjs/server";
/*
When editing this file need to test for:
1. i18n adding locales
2. i18n correct translations
3. Authentication status before and after login in
4. Authentication redirects (e.g. app to sign-in if not logged in)
5. OAuth sign in works
/
const intlMiddleware = createMiddleware(routing);
const isAuthPage = createRouteMatcher(
routing.locales.map((locale) =>
/${locale}/sign-in),
);
const isProtectedRoute = createRouteMatcher(
routing.locales.map((locale) => `/${locale}/app(.)),
);
// const isHomePage = createRouteMatcher(
// routing.locales.map((locale) => /${locale}`),
// );
export default convexAuthNextjsMiddleware(async (request, { convexAuth }) => {
const pathname = request.nextUrl.pathname;
// Home page reserve for landing page website, after implementation remove the redirect
// if (isHomePage(request)) {
// return nextjsMiddlewareRedirect(request, "/app");
// }
if (isAuthPage(request) && (await convexAuth.isAuthenticated())) {
return nextjsMiddlewareRedirect(request, "/app");
}
if (isProtectedRoute(request) && !(await convexAuth.isAuthenticated())) {
return nextjsMiddlewareRedirect(request, "/sign-in");
}
if (!pathname.startsWith("/api/") && !pathname.startsWith("/trpc/")) {
const i18nResponse = intlMiddleware(request);
if (i18nResponse) {
// Return both redirects and rewrites from i18n middleware
return i18nResponse;
}
}
});The v1 template uses both, middleware here: https://github.com/get-convex/v1/blob/main/apps/app/src/middleware.ts