Getting session from server side in NextJS 13 with multitenancy and app/

[zzev]

Hi there,
I’m trying to set up Supabase authentication in a multi-tenant NextJS 13 app with experimental appDir enabled, based on this example and this one, but I can't figure out how to do it.

In the guides it is expected a res to be returned, which is, basically, a modified NextResponse.next, but at the same time I'm making use of some NextResponse.rewrite to point to the right directories, and I don't know how to combine it with the res mentioned above. Could you please guide me in the right direction? It will be appreciated!

My current code looks like this:

import { NextRequest, NextResponse } from "next/server";
import { createMiddlewareSupabaseClient } from "@supabase/auth-helpers-nextjs";

export const config = {
  matcher: [
    /*
     * Match all paths except for:
     * 1. /api routes
     * 2. /_next (Next.js internals)
     * 3. /examples (inside /public)
     * 4. all root files inside /public (e.g. /favicon.ico)
     */
    "/((?!api/|_next/|_static/|examples/|[\\w-]+\\.\\w+).*)",
  ],
};

export default async function middleware(req: NextRequest) {
  const urlHostname = process.env.URL_HOSTNAME || "example.test";

  const url = req.nextUrl;

  // Get hostname of request (e.g. demo.vercel.pub, demo.localhost:3000)
  const hostname = req.headers.get("host") || urlHostname;

  // Get the pathname of the request (e.g. /, /about, /blog/first-post)
  const path = url.pathname;

  /*  You have to replace ".vercel.pub" with your own domain if you deploy this example under your domain.
      You can also use wildcard subdomains on .vercel.app links that are associated with your Vercel team slug
      in this case, our team slug is "platformize", thus *.platformize.vercel.app works. Do note that you'll
      still need to add "*.platformize.vercel.app" as a wildcard domain on your Vercel dashboard. */
  const currentHost = hostname.replace(`.${urlHostname}`, "");

  // Supabase session
  const res = NextResponse.next();
  const supabase = createMiddlewareSupabaseClient({ req, res });
  const {
    data: { session },
  } = await supabase.auth.getSession();

  // rewrites for app pages
  if (currentHost == "app") {
    if (!session) {
      return NextResponse.rewrite(new URL(`/app/login`, req.url));
    }

    if (url.pathname === "/login") {
      url.pathname = `/`;
      return NextResponse.redirect(url);
    }

    url.pathname = `/app${url.pathname}`;
    return NextResponse.rewrite(url);
    // MEOW, need to return the res here :(
  }

  // rewrite root application to `/home` folder
  if (hostname === process.env.URL_HOSTNAME) {
    return NextResponse.rewrite(new URL(`/home${path}`, req.url));
  }

  // rewrite everything else to `/_sites/[site] dynamic route
  // renamed _sites to sites until it works
  return NextResponse.rewrite(new URL(`/sites/${currentHost}${path}`, req.url));
}

[zzev]

Finally managed to return res by adding the following configuration to next.config.js:

next.config.js

const nextConfig = {
  reactStrictMode: true,
  experimental: {
    appDir: true
  },
  async headers() {
    ...
  },
  async rewrites() {
    return [{
       has: [{
          type: 'host',
          value: 'app.example.test',
        }],
       source: '/:path*',
       destination: '/app/:path*'
    }]
  }
}

and changing the following code inside the currentHost === "app" conditional in middleware.ts:

middleware.ts

if (currentHost == "app") {
  if (!session && url.pathname === "/") {
    url.pathname = `/login`;
    return NextResponse.redirect(url);
  }

  if (session && url.pathname === "/login") {
    url.pathname = `/`;
    return NextResponse.redirect(url);
  }

  // url.pathname = `/app${url.pathname}`;
  // return NextResponse.rewrite(url);
  return res;
}

Error fetching data from a NextJS 13 Server Component

However, when trying to fetch data from the server, it fails. This is the code I'm executing:

import { createServerComponentSupabaseClient } from "@supabase/auth-helpers-nextjs";
import { headers, cookies } from "next/headers";

export const revalidate = 0;

const Page = async () => {
  const supabase = createServerComponentSupabaseClient({
    headers,
    cookies,
  });

  const teams = await supabase.from("teams").select("*");
  console.log(teams);

  return <div>App page</div>;
};

export default Page;

and the error:

{
  error: {
    message: 'TypeError: fetch failed',
    details: 'TypeError: fetch failed\n' +
      '    at Object.fetch (node:internal/deps/undici/undici:11457:11)\n' +
      '    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)',
    hint: '',
    code: ''
  },
  data: null,
  count: null,
  status: 0,
  statusText: ''
}

Needless to say, the NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_ANON_KEY are correctly set and the teams are returned correctly from a Client Component.

What am I doing wrong?

[MisaelMa]

for NextResponse.rewrite is necesary remove "underscore" from folder and de code => "_sites" ===> "sites" , for me to solve my multiplication tenan problems and rewrite route folder

[youssefKadaouiAbbassi]

You're a life saver !!!

[zzev]

This doesn't solve the problem of not getting the session from the server side. The rewrite from _sites to site was already done, as you can see in the code I posted.

  // rewrite everything else to `/_sites/[site] dynamic route
  // renamed _sites to sites until it works
  return NextResponse.rewrite(new URL(`/sites/${currentHost}${path}`, req.url));

[zzev]

Fixed in this issue.