How to protect routes using @supabase/ssr? (NextJS)

[OrhanTozan]

I think I need to put something into middleware.ts. But the starter template already has code in middleware.ts. Im afraid that my code will hurt the existing code.

[ryanhalliday]

Put this in the route I suppose

  const {
    data: { user },
  } = await supabase.auth.getUser();

  if (!user) {
    return redirect("/login");
  }

You can see the full example here: https://github.com/vercel/next.js/blob/canary/examples/with-supabase/app/protected/page.tsx#L11-L17

---

If you want to do it for certain routes from in the middleware you can put that after await updateSession(request) from the Supabase example. Next.js example here: https://nextjs.org/docs/app/building-your-application/routing/middleware#conditional-statements

[OrhanTozan]

I am using getSession() inside the middleware now. The reason for this, assuming your data is secured by RLS, you dont need extra security, and getUser() just slows things down.

Yes, protecting Page A with a supabase session would allow users that spoof their cookies to access that page, but if that page makes calls to tables with RLS turned on, the user would see no data. So there is nothing to worry about.

[mashwishi]

didnt work for me sad.

[e-afzal]

Hey @OrhanTozan I did this and its working just fine, hope this helps:

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

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

    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 = NextResponse.next({
                        request: {
                            headers: request.headers,
                        },
                    })
                    response.cookies.set({
                        name,
                        value,
                        ...options,
                    })
                },
                remove(name: string, options: CookieOptions) {
                    request.cookies.set({
                        name,
                        value: '',
                        ...options,
                    })
                    response = NextResponse.next({
                        request: {
                            headers: request.headers,
                        },
                    })
                    response.cookies.set({
                        name,
                        value: '',
                        ...options,
                    })
                },
            },
        }
    )

    const user = await supabase.auth.getUser()

    if (request.nextUrl.pathname.startsWith('/dashboard') && user.error) {
        return NextResponse.redirect(new URL('/auth/login', request.url))
    }


    return response
}

and my middleware:

// middleware.ts
import { type NextRequest } from 'next/server'
import { updateSession } from '@/lib/supabase/middleware'

export async function middleware(request: NextRequest) {
    return await updateSession(request)
}

export const config = {
    matcher: [
        /*
         * Match all request paths except for the ones starting with:
         * - _next/static (static files)
         * - _next/image (image optimization files)
         * - favicon.ico (favicon file)
         * Feel free to modify this pattern to include more paths.
         */
        '/((?!_next/static|_next/image|favicon.ico|.*\\.(?:svg|png|jpg|jpeg|gif|webp)$).*)',
    ],
}

The dashboard page its only for authenticated users and this works great for me

Worked for me! Thanks a lot for this! 😆

[NicoFerni]

Hi! I have tried this and its not working, I think that my middleware is not setup properly:

here is my middleware in my root file

import { updateSession } from './utils/supabase/middleware'

export async function middleware(request: NextRequest) {
  return await updateSession(request)

}

export const config = {
    matcher: [
        /*
         * Match all request paths except for the ones starting with:
         * - _next/static (static files)
         * - _next/image (image optimization files)
         * - favicon.ico (favicon file)
         * Feel free to modify this pattern to include more paths.
         */
        '/((?!_next/static|_next/image|favicon.ico|.*\\.(?:svg|png|jpg|jpeg|gif|webp)$).*)',
    ],
}

and my supabase middleware:

import { createServerClient, type CookieOptions } from '@supabase/ssr'
import { NextResponse, type NextRequest } from 'next/server'

export async function updateSession(request: NextRequest) {
    let response = NextResponse.next({
        request: {
            headers: request.headers,
        },
    })
    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 = NextResponse.next({
                        request: {
                            headers: request.headers,
                        },
                    })
                    response.cookies.set({
                        name,
                        value,
                        ...options,
                    })
                },
                remove(name: string, options: CookieOptions) {
                    request.cookies.set({
                        name,
                        value: '',
                        ...options,
                    })
                    response = NextResponse.next({
                        request: {
                            headers: request.headers,
                        },
                    })
                    response.cookies.set({
                        name,
                        value: '',
                        ...options,
                    })
                },
            },
        }
    )

    const user = await supabase.auth.getUser()
    if (request.nextUrl.pathname.startsWith('/script') && user.error) {
        return NextResponse.redirect(new URL('/auth/login', request.url))
    }


    return response
}

Also I have here my createClient Function

import { createServerClient, type CookieOptions } from '@supabase/ssr'
import { cookies } from 'next/headers'


export async function createClient() {
  'use server'
  const cookieStore = await cookies()

  return createServerClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
    {
      cookies: {
        get(name: string) {
          return cookieStore.get(name)?.value
        },
        set(name: string, value: string, options: CookieOptions) {
          try {
            cookieStore.set({ name, value, ...options })
          } catch (error) {

          }
        },
        remove(name: string, options: CookieOptions) {
          try {
            cookieStore.set({ name, value: '', ...options })
          } catch (error) {

          }
        },

      },
    }
  )
}

I have put some console logs and are not appearing so I think is never running but in my console appear that the middleware compiles

[alessiotortora]

are you using src directory in next 14 or higher ? if yes, middleware needs to be in the src where the app directory lives.