rare-sapphire•14mo ago

Supabase Cookie-based Auth and Next.js 13 App Router

There are some new videos showing how to best integrate Supabase and NextJs App Router: https://www.youtube.com/playlist?list=PL5S4mPUpp4OtMhpnp93EFSo42iQ40XjbF I'd like to implement this into refine providers. There is also a guide related to the videos. The first piece is a middleware that manage sessions with createMiddlewareClient https://supabase.com/docs/guides/auth/auth-helpers/nextjs#managing-session-with-middleware next there is a server-side auth flow Code Exchange example: https://supabase.com/docs/guides/auth/auth-helpers/nextjs#managing-sign-in-with-code-exchange It creates an auth/callback route to get a code from the url to pass to auth.exchangeCodeForSession(code) method of createRouteHandlerClient({ cookies }) which usecookies from next/headers Back to refine, there is this AuthProvider on the nextjs appdir example: https://github.com/refinedev/refine/blob/master/examples/with-nextjs-appdir/src/authProvider.ts it also uses cookies to store auth data. I implemented the createClientComponentClient method from @supabase/auth-helpers-nextjs to get the client in the methods of the Supabase AuthProvider. In the register method I'm passing to Supabase signUp() method also emailRedirectTo option that points to the auth/callback route. Is this the same as the check method on the refine AuthProvider of the appdir example? How can I integrate the two? How should I handle the cookies calls in the refine AuthProvider methods? Can I just remove the cookie parts? This is the Client Component, is this the one to provide as dataProvider to refine?

const supabase = createClientComponentClient()

const supabase = createClientComponentClient()

To handle mutations there are also createServerComponentClient createServerActionClient that uses cookies from next/headers. What do you think? Can I just remove the cookie part of the AuthProvider and feed the createClientComponentClient as dataProvider?

YouTube

Cookie-based Auth and the Next.js 13 App Router

The Next.js 13 App Router makes it really easy to write client code - for things like realtime subscriptions - and server code - for things like data fetchin...

GitHub

refine/authProvider.ts at master · refinedev/refine

Build your React-based CRUD applications, without constraints. 🌟 Star to support our work! - refine/authProvider.ts at master · refinedev/refine

Supabase Auth with the Next.js App Router | Supabase Docs

Authentication and Authorization helpers for creating an authenticated Supabase client with the Next.js 13 App Router.

7 Replies

kapa.ai•14mo ago

Hi @adamquadmon. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

kapa.ai•14mo ago

---------------------- Hmm, I don't know enough to give you a confident answer yet. The information extracts provided do not cover the specific integration of Supabase and Next.js App Router with refine providers. However, you can refer to the refine documentation and examples for more information on how to work with data providers and auth providers in refine: - Refine Documentation (https://refine.dev/docs) - Refine Examples (https://refine.dev/docs/examples) For more details on working with Supabase in refine, you can check out these resources: - Supabase Data Provider (https://refine.dev/docs/examples/data-provider/supabase) - Supabase Auth Provider (https://refine.dev/blog/supabase-twilio-otp-authentication-in-react) These resources might help you better understand how to integrate Supabase with refine, but they may not directly address your specific question about integrating Supabase and Next.js App Router. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

Overview | refine

What is refine?

Examples | refine

Supabase | refine

Connect your Supabase database with refine Supabase Data Provider and easily manage all the features that the database offers in your interface. This example will show you how Supabase Data Provider works and is used.

OTP Authentication with Supabase and Twilio in React | refine

We'll implement OTP(SMS) authorization using Twilio and Supabase in React app.

kapa.ai•14mo ago

<@461260744936259584> kapa.ai is still learning and improving, please let us how it did by reacting below

flat-fuchsia•14mo ago

Hi, sorry for the late response. I need more time to research for this feature after that i will able to clarify this questions. By the way, After finishing this implementation, If you open PR for examples. we will be really happy 🚀

rare-sapphire•14mo ago

I will be happy to contribute, I already implemented i18next, but I'm new to both refine and NextJs so I'd like to have more info on the underling refine magic related to authProvider, dataProvider and i18nProvider in order to check the implementation

flat-fuchsia•14mo ago

actually authProvider is a pretty straight forward. you are providing logics for check, login etc. refine core is using them in internal. for example in auth page we are using login and register. <Authenticated> component using check function. refine core using this functions with auth hooks. like useLogin, useIsAuthenticated etc. https://refine.dev/docs/api-reference/core/providers/auth-provider/#hooks-and-components

rare-sapphire•14mo ago

I'm having lot's of issues, now I'm getting Unhandled Runtime Error Error: No QueryClient set, use QueryClientProvider to set one The above error occurred in the <RedirectErrorBoundary> component: I can't get where the error come from, any clue?