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?
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
Hi @adamquadmon. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
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?
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.
<@461260744936259584> kapa.ai is still learning and improving, please let us how it did by reacting below
fascinating-indigo•16mo 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 🚀
sunny-green•16mo 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
fascinating-indigo•16mo 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-componentssunny-green•16mo 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?