Next.js 13 `app` directory support

With version v0.5.2 we’ve added a createServerComponentSupabaseClient which can be used server components to get an authenticated Supabase client. This is the PR which includes an example. Note that this needs to be used in combination with middleware as Next.js does not yet allow setting headers in server components.

Docs to follow soon.

[thorwebdev]

With version v0.5.2 we’ve added a createServerComponentSupabaseClient which can be used server components to get an authenticated Supabase client. This is the PR which includes an example. Note that this needs to be used in combination with middleware as Next.js does not yet allow setting headers in server components.

Docs to follow soon.

[jensen]

I spent some time yesterday and a bit today. Was able to use the existing withMiddlewareAuth function directly.

import { withMiddlewareAuth } from "@supabase/auth-helpers-nextjs";

export const middleware = withMiddlewareAuth({
  redirectTo: "/login",
});

export const config = {
  matcher: "/dashboard/:path*",
};

In order to get access to a supabase client that is authenticated on the server, I am doing something like this:

import { cookies } from "next/headers";
import { createClient } from "@supabase/supabase-js";

export const createSupabaseClient = () => {
  if (!process.env.NEXT_PUBLIC_SUPABASE_URL) {
    throw new Error(`Must define process.env.NEXT_PUBLIC_SUPABASE_URL`);
  }

  if (!process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY) {
    throw new Error(`Must define process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY`);
  }

  const cookie = JSON.parse(cookies().get("supabase-auth-token") || "{}");

  const authorization = cookie?.access_token
    ? {
        global: {
          headers: {
            Authorization: `Bearer ${cookie.access_token}`,
          },
        },
      }
    : {};

  return createClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY,
    {
      auth: {
        persistSession: false,
      },
      ...authorization,
    }
  );
};

Which I’m calling in my server component.

import { createSupabaseClient } from "services/supabase";

const getCustomers = async () => {
  const supabase = createSupabaseClient();

  return (await supabase.from("customers").select()).data;
};

const Customers = async () => {
  const customers = await getCustomers();

  return <pre>{JSON.stringify(customers, null, 2)}</pre>;
};

export default Customers;

I don’t expect this to be a long term solution, and it doesn’t have the ability to set the cookies yet, but for authenticated requests I don’t need to at this point. Just wanted to give a quick progress update.

The Next 12 repo I’m working on is here: https://github.com/jensen/supabase-nextjs. I will push the Next 13 upgrade when I do some more testing.