Combine next-intl with supabase middleware

[diffTed]

Is your feature request related to a problem? Please describe.

Can someone show how to combine the middlaware needed for supabase (auth-helpers-nextjs) with next-int?

Describe the solution you'd like

Supabase middleware:
`
import { createMiddlewareClient } from "@supabase/auth-helpers-nextjs";
import { NextResponse } from "next/server";

import type { NextRequest } from "next/server";

export async function middleware(req: NextRequest) {
const res = NextResponse.next();

// Create a Supabase client configured to use cookies
const supabase = createMiddlewareClient({ req, res });

// Refresh session if expired - required for Server Components
// https://supabase.com/docs/guides/auth/auth-helpers/nextjs#managing-session-with-middleware
await supabase.auth.getSession();

return res;
}
`

Describe alternatives you've considered

Next-intl middleware:

`import createMiddleware from 'next-intl/middleware';

export default createMiddleware({
// A list of all locales that are supported
locales: ['en', 'de'],

// If this locale is matched, pathnames work without a prefix (e.g. /about)
defaultLocale: 'en'
});

export const config = {
// Skip all paths that should not be internationalized. This example skips the
// folders "api", "_next" and all files with an extension (e.g. favicon.ico)
matcher: ['/((?!api|_next|.\..).*)']
};`

[amannn]

Based on their docs, I imagine that something like this could work:

import createIntlMiddleware from 'next-intl/middleware';
import {NextRequest} from 'next/server';
 
export default async function middleware(req: NextRequest) {
  const handleI18nRouting = createIntlMiddleware({
    locales: ['en', 'de'],
    defaultLocale: 'en'
  });
  const res = handleI18nRouting(request);
 
  const supabase = createMiddlewareClient({ req, res })
  await supabase.auth.getSession()
 
  return response;
}
 
export const config = {
  matcher: ['/((?!_next|.*\\..*).*)']
};

I'll convert this to a discussion since this is a usage question.

[adrena11n]

@supabase/auth-helpers-nextjs is deprecated, need examples combined with @supabase/ssr...

[bronz3beard]

I have this solution, I have only just added it to a new project and works locally.

export async function middleware(request: NextRequest) {
  const pathname = request.nextUrl.pathname;

  // // `/_next/` and `/api/` are ignored by the watcher, but we need to ignore files in `public` manually.
  // // If you have one
  // if (
  //   [
  //     '/manifest.json',
  //     '/favicon.ico',
  //     // Your other files in `public`
  //   ].includes(pathname)
  // )
  //   return

  // Check if there is any supported locale in the pathname
  const pathnameIsMissingLocale = i18n.locales.every(
    (locale) => !pathname.startsWith(`/${locale}/`) && pathname !== `/${locale}`
  );

  // Redirect if there is no locale
  if (pathnameIsMissingLocale) {
    const locale = getLocale(request);

    const { supabase, response } = createClient(request);

    // Refresh session if expired - required for Server Components
    // https://supabase.com/docs/guides/auth/auth-helpers/nextjs#managing-session-with-middleware
    await supabase.auth.getSession();
    // Create the new URL
    const newUrl = new URL(
      `/${locale}${pathname.startsWith('/') ? '' : '/'}${pathname}`,
      request.url
    );

    // Create a new NextResponse with the updated information
    const updatedResponse = new NextResponse(response.body, {
      status: 302,
      headers: {
        ...response.headers,
        Location: newUrl.toString()
      }
    });

    return updatedResponse;
  }
}

[onurusluca]

For anyone having the same problem, take a look at my code. I don't know if it is bullet proof but works fine for now.

import { createMiddlewareClient } from "@supabase/auth-helpers-nextjs";
import createIntlMiddleware from "next-intl/middleware";
import { NextRequest, NextResponse } from "next/server";
import { AppConfig } from "@/utils/AppConfig";

export default async function middleware(req: NextRequest) {
    // Create a middleware to handle i18n routing
    const handleI18nRouting = createIntlMiddleware({
        locales: AppConfig.locales,
        defaultLocale: AppConfig.defaultLocale,
        localePrefix: AppConfig.localePrefix,
    });
    const res = handleI18nRouting(req);

    // Create a middleware to handle authentication
    const supabase = createMiddlewareClient({ req, res });
    const {
        data: { session },
    } = await supabase.auth.getSession();

    // Redirect to login page if not authenticated
    const excludePaths = [
        "/auth/login",
        "/auth/signup",
        "/auth/forgot-password",
        "/auth/reset-password",
    ];

    if (
        !session &&
        !excludePaths.some((path) => req.nextUrl.pathname.includes(path))
    ) {
        const url = req.nextUrl.clone();
        url.pathname = `/${AppConfig.defaultLocale}/auth/login`;
        return NextResponse.redirect(url);
    }

    return res;
}

export const config = {
    matcher: ["/((?!_next|.*\\..*).*)"],
};

My AppConfig looks like this:

export const AppConfig = {
    locales: ["en", "ja"],
    defaultLocale: "en",
    localePrefix: "as-needed",
};

[tmountain]

This uses @supabase/auth-helpers-nextjs, which is now deprecated.

[onurusluca]

Thanks for the info and the solution below. Appreciate it!

[tmountain]

The solution for this is now documented in the next-intl documentation. Scroll down to the section titled "Example: Integrating with Supabase Authentication".

Here's the excerpted code in case the page goes away.

// middleware.ts
import {type NextRequest} from 'next/server';
import {createServerClient, type CookieOptions} from '@supabase/ssr';
import createIntlMiddleware from 'next-intl/middleware';
 
const handleI18nRouting = createIntlMiddleware({
  locales: ['en', 'de'],
  defaultLocale: 'en'
});
 
export async function middleware(request: NextRequest) {
  const response = handleI18nRouting(request);
 
  const supabase = createServerClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
    {
      cookies: {
        get(name: string) {
          return request.cookies.get(name)?.value;
        },
        set(name: string, value: string, options: CookieOptions) {
          request.cookies.set({name, value, ...options});
          response.cookies.set({name, value, ...options});
        },
        remove(name: string, options: CookieOptions) {
          request.cookies.set({name, value: '', ...options});
          response.cookies.set({name, value: '', ...options});
        }
      }
    }
  );
 
  await supabase.auth.getUser();
  return response;
}
 
export const config = {
  matcher: ['/', '/(de|en)/:path*']
};

[thereis]

Saved my day!

[davidlintin]

Thanks for the link - I was scratching my head art this

[Alban-i]

Thanks ! the code has changed since then but everything in the link