How to setup Next-Intl with WorkOS Authkit

[abedshaaban]

I have tried multiple ways that all work great locally, but when I push the deploy on Netlify I get a 500 error code with the message of You are calling 'withAuth' on a route that isn’t covered by the AuthKit middleware. Make sure it is running on all paths you are calling 'withAuth' from by updating your middleware config in 'middleware.(js|ts)'.

Here is my middleware:

import { NextRequest, NextResponse } from 'next/server'
import { defaultLocale, locales } from '@repo/constants/internationalization'
import { authkit } from '@workos-inc/authkit-nextjs'
import createNextIntlMiddleware from 'next-intl/middleware'

const i18nMiddleware = createNextIntlMiddleware({
  locales,
  defaultLocale
})

export async function middleware(request: NextRequest) {
  // Apply i18n middleware first. It may return a redirect (e.g., / -> /en).
  const intlResponse = i18nMiddleware(request)

  // Auth object contains the session, response headers and an authorization
  // URL in the case that the session isn't valid. This method will automatically
  // handle setting the cookie and refreshing the session
  const { headers: authkitHeaders } = await authkit(request)

  // If the i18n middleware issued a redirect (e.g., / -> /en), use it as-is.
  // Otherwise continue the request chain while preserving incoming headers.
  const isIntlRedirect = intlResponse.headers.has('location')
  const response = isIntlRedirect
    ? intlResponse
    : NextResponse.next({ request: { headers: new Headers(request.headers) } })

  // add i18n headers to the response when we didn't already return its redirect
  if (!isIntlRedirect) {
    for (const [key, value] of intlResponse.headers) {
      if (key.toLowerCase() === 'set-cookie') response.headers.append(key, value)
      else response.headers.set(key, value)
    }
  }

  // add authkit headers to the response
  for (const [key, value] of authkitHeaders) {
    if (key.toLowerCase() === 'set-cookie') response.headers.append(key, value)
    else response.headers.set(key, value)
  }

  return response
}

export const config = {
  matcher: [
    // Match all paths except for static files, API routes, and internal Next.js assets.
    '/((?!api|_next/static|_next/image|favicon.ico|.*\\..*|robots.txt|sitemap.xml).*)'
  ]
}

How can I make it work in production?

[amannn]

Can you share a bit more about your use case? My experience is that many apps that need an auth layer don't use locale-based routing (which requires the next-intl middleware).

Merging the headers generally looks good to me, are you able to isolate what is missing for withAuth to work correctly?

[amannn]

A reproduction is available here: https://github.com/abedshaaban/nextjs-workos-x-next-intl

[amannn]

Another question: Since this works for you locally, have you found if this is an issue with other hosting providers as well or could it be a bug with the Netlify setup? They currently have to use some patching until Next.js adapters stabilize.