Pakiety

Supabase

Odświeżanie sesji Supabase wewnątrz łańcucha NEMO: ciasteczka trafiają do odpowiedzi, a kolejne funkcje widzą już zalogowanego użytkownika.

Instalacja

Supabase podłącz do projektu według oficjalnych przewodników:

Supabase Quickstart albo Supabase Next.js App

Pod NEMO trzeba w nich zmienić dosłownie jedno miejsce.

Wpięcie w łańcuch NEMO

Utwórz _middleware.ts

Załóż plik _middleware.ts w katalogu lib albo supabase i wklej do niego kod middleware skopiowany z dokumentacji Supabase.

Powinien wyglądać mniej więcej tak:

@/lib/supabase/middleware.ts
import { createServerClient } from '@supabase/ssr';
import { type NextRequest, NextResponse } from 'next/server';

export async function updateSession(request: NextRequest) {
  let supabaseResponse = NextResponse.next({
    request,
  })

  const supabase = createServerClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY,
    {
      cookies: {
        getAll() {
          return request.cookies.getAll()
        },
        setAll(cookiesToSet) {
          cookiesToSet.forEach(({ name, value, options }) => request.cookies.set(name, value))
            supabaseResponse = NextResponse.next({
            request,
          })
          cookiesToSet.forEach(({ name, value, options }) =>
            supabaseResponse.cookies.set(name, value, options)
          )
        },
      },
    }
  );

  // refreshing the auth token
  await supabase.auth.getUser();

  return supabaseResponse;
}

Podepnij updateSession pod before

W głównym pliku middleware albo proxy updateSession trafia do łańcucha before - dzięki temu token odświeży się, zanim ruszy cokolwiek innego.

@/proxy.ts
import { type MiddlewareConfig, type GlobalMiddlewareConfig, createNEMO } from '@zanreal/nemo';
import { updateSession } from '@/lib/supabase/middleware';

const globalMiddlewares: GlobalMiddlewareConfig = {
  before: updateSession, // REMEMBER TO IMPORT updateSession
}

const middlewares: MiddlewareConfig = {
  '/': [
    async (request) => {
      console.log('There is NEMO', request.nextUrl.pathname);
    },
  ],
};

export const proxy = createNEMO(middlewares, globalMiddlewares);

export const config = {
  matcher: ['/((?!_next/|_static|_vercel|[\\w-]+\\.\\w+).*)'],
};
@/middleware.ts
import { type MiddlewareConfig, type GlobalMiddlewareConfig, createNEMO } from '@zanreal/nemo';
import { updateSession } from '@/lib/supabase/middleware';

const globalMiddlewares: GlobalMiddlewareConfig = {
  before: updateSession, // REMEMBER TO IMPORT updateSession
}

const middlewares: MiddlewareConfig = {
  '/': [
    async (request) => {
      console.log('There is NEMO', request.nextUrl.pathname);
    },
  ],
};

export const middleware = createNEMO(middlewares, globalMiddlewares);

export const config = {
  matcher: ['/((?!_next/|_static|_vercel|[\\w-]+\\.\\w+).*)'],
};

(Opcjonalnie) Odłóż użytkownika do storage

updateSession i tak pyta Supabase o zalogowanego użytkownika, więc warto od razu zapisać wynik dla pozostałych funkcji w łańcuchu:

@/lib/supabase/middleware.ts
// imports

export async function updateSession(request, { storage }) {  

  // prev code

  // refreshing the auth token
  await supabase.auth.getUser(); 
  const { user } = await supabase.auth.getUser(); 

  // add user to storage
  storage.set('user', user ?? undefined); 

  return supabaseResponse;
}

Czy ta strona była pomocna?

M↓obsługiwane.

Spis treści

InstalacjaWpięcie w łańcuch NEMOUtwórz _middleware.tsPodepnij updateSession pod before(Opcjonalnie) Odłóż użytkownika do storage