How do I get language of request in a convex querry
#How do I get language of request in a convex querry
static stirrup
royal flumeBOT
Hi @static stirrup. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
To get the language of the request in a Convex query, you can access the language property from the user identity object, if it is available. This property is populated from the JWT claim locale and can be accessed as follows:
const identity = await ctx.auth.getUserIdentity();
const language = identity?.language;
This will give you the language (locale) associated with the authenticated user, if present. Note that this depends on your authentication setup and whether the language information is included in the user's identity token. If the user is not authenticated or the language is not set, this value may be undefined.
Reference: UserIdentity.language property
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
static stirrup
@royal flume How to get it from request (if it has the language headers) and should I do it, rather than saving language as a field
royal flumeBOT
Let me check the knowledge base for you again. One moment! :books:
Currently, Convex does not expose HTTP headers (such as Accept-Language) directly to queries, mutations, or actions. The only way to access the language in a Convex query is through the user identity object (if your authentication provider includes the language/locale in the JWT), as shown previously. There is no built-in way to read arbitrary request headers like Accept-Language in Convex server functions at this time.
If you need to use the language from the request headers, you would have to pass it explicitly from the client as an argument to your query or mutation. Some community members have discussed this limitation and suggested passing such metadata from the client if needed, especially for things like timezone or language preferences. This is currently the recommended approach until Convex provides direct access to request headers in server functions Discord support thread: Accessing client IP address in a query/mutation.
As for whether you should save the language as a field: if you want to persist the user's language preference (for example, to remember it across sessions or devices), storing it in your database is a good idea. If you only need it for a single request, passing it as an argument is sufficient.
In summary:
- You cannot access request headers like Accept-Language directly in Convex queries/mutations/actions.
- Pass the language from the client as an argument if you need it.
- Store the language in your database if you want to persist the user's preference.
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
static stirrup
@royal flume can I utilize next-intl and how to integrate it with convex?
royal flumeBOT
Let me check the knowledge base for you again. One moment! :books:
Yes, you can utilize next-intl with Convex in your Next.js application. While Convex does not have built-in internationalization (i18n) features, you can integrate next-intl for client-side and routing-based localization, and combine it with Convex for backend data and authentication.
Integration Approach:
- Use next-intl for handling locale detection, routing, and translation on the frontend.
- Use Convex for your backend logic, queries, and authentication.
- If you need to restrict access or redirect users based on authentication and locale, you can combine next-intl middleware with Convex Auth middleware.
Example Middleware Integration:
Community examples show how to combine next-intl and Convex Auth middleware in Next.js. Here’s a simplified version based on community discussions:
import createMiddleware from "next-intl/middleware";
import { routing } from "./i18n/routing";
import {
convexAuthNextjsMiddleware,
createRouteMatcher,
nextjsMiddlewareRedirect,
} from "@convex-dev/auth/nextjs/server";
const intlMiddleware = createMiddleware(routing);
const isAuthPage = createRouteMatcher(
routing.locales.map((locale) => `/${locale}/sign-in`),
);
const isProtectedRoute = createRouteMatcher(
routing.locales.map((locale) => `/${locale}/app(.*)`),
);
export default convexAuthNextjsMiddleware(async (request, { convexAuth }) => {
const pathname = request.nextUrl.pathname;
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 i18nResponse;
}
}
});
This pattern allows you to:
- Handle locale-based routing and translations with next-intl.
- Protect routes and manage authentication with Convex Auth.
- Ensure both middlewares work together for a seamless user experience.
References:
If you need to pass the user's language to Convex queries or mutations, you should extract the locale from next-intl on the client and send it as an argument to your Convex functions, since Convex does not have direct access to request headers or Next.js context.