S
Supabase•2y ago
OPTIMIZFX

Having a bad time with Auth and NextJS - new SSR

Hello friends, I’ve been working on a sass project for 6 months now and I’ve been having heaps of trouble with Auth. My app consists of a landing page and dashboard so there are 2 layouts. I’ve recently updated to the new SSR version. I’m using the Auth ui react package for the Auth form. The issue is there is a lot of conflicting documentation, I’m unsure what is the correct way to implement auth and how to pass a user or session around the app. So upon logging in, the session or user is null when it shouldn’t be I’ve tried looking for examples but they are all done differently or have the old methods. There is a repo called create next app with supabase which seems to be up to date, should it need 2 different files for middleware? I’ll try to share some screenshots soon! Stack- Next 14.2 Supabase Auth and db ShadCN + Tailwind Stripe RLS enabled for the accounts page
5 Replies
Pain Scofield
Pain Scofield•2y ago
Use clerk auth
PascalEugster
PascalEugster•2y ago
So i've had the same problem as youre facing. I was able to fix the issue with removing every auth-helpers... from my project. And then i've worked with this part of the docs: https://supabase.com/docs/guides/auth/server-side/creating-a-client Here is a lot you can make use of. Just read it carefully and you'll understand. My middleware looks like this: Im not sure if its completly correct but it could be 😄 
import { NextResponse, type NextRequest } from 'next/server';
import { CookieOptions, createServerClient } from '@supabase/ssr';

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

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

    await supabase.auth.getSession();
    let user = await supabase.auth.getUser();

    if (user && user.data.user != null && request.nextUrl.pathname == '/') {
      return NextResponse.redirect(new URL('/dashboard', request.url));
    }

    return response;
  } catch (e) {
    return response;
  }
}
import { NextResponse, type NextRequest } from 'next/server';
import { CookieOptions, createServerClient } from '@supabase/ssr';

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

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

    await supabase.auth.getSession();
    let user = await supabase.auth.getUser();

    if (user && user.data.user != null && request.nextUrl.pathname == '/') {
      return NextResponse.redirect(new URL('/dashboard', request.url));
    }

    return response;
  } catch (e) {
    return response;
  }
}
Creating a Supabase client for SSR | Supabase Docs
Configure Supabase client to use Cookies
No description
OPTIMIZFX
OPTIMIZFXOP•2y ago
Haha yeah I used that in another project but it's max users at the time was 1000 but since then it's now 10k so maybe I'll swap!
Pain Scofield
Pain Scofield•2y ago
Can I help with something? I am not sure what you're asking for.
OPTIMIZFX
OPTIMIZFXOP•2y ago
Yes... I think this is what I'm after, so I had 2x middleware files, 1 in utils/middleware with the client and server files (createClient & createServer) and another middleware file at the root with the old auth method as below 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, }, }); }, remove(name: string, options: CookieOptions) { request.cookies.set({ name, value: "", ...options, }); response = NextResponse.next({ request: { headers: request.headers, }, }); }, }, } ); Help with Supabase and Nextjs, you recommended Clerk, which is not what I'm using. but thanks 🙂 Looks like issue resolved, now onto RLS and crud operations! Thanks so much everyone!

Did you find this page helpful?