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
https://supabase.com/docs/guides/auth/auth-helpers/nextjs#managing-session-with-middleware
next there is a server-side auth flow
https://supabase.com/docs/guides/auth/auth-helpers/nextjs#managing-sign-in-with-code-exchange
It creates an
method of
Back to refine, there is this
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
In the
Is this the same as the
How should I handle the cookies calls in the refine
This is the Client Component, is this the one to provide as dataProvider to refine?
To handle mutations there are also
What do you think? Can I just remove the cookie part of the AuthProvider and feed the createClientComponentClient as dataProvider?
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
createMiddlewareClienthttps://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/headersBack 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?
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
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
Build your React-based CRUD applications, without constraints. 
Star to support our work! - refine/authProvider.ts at master · refinedev/refine
Star to support our work! - refine/authProvider.ts at master · refinedev/refineAuthentication and Authorization helpers for creating an authenticated Supabase client with the Next.js 13 App Router.
