Comments (3)
There might be a better way to do this, so I wanted to hold off on an MR. But fundamentally, this is what is needed to get realtime + RLS working.
from supa-fly-stack.
Hello, yes you are right.
Support for realtime in this repo has been removed (it is on a branch, outdated: https://github.com/rphlmr/supa-fly-stack/blob/feat/add-supabase-client-provider/app/integrations/supabase/provider.tsx).
I have plans to make improvements but time is missing to work on it right now 🫣
On production, I use an other strategy with a Context provider giving access to accessToken:
//provider
const AuthContext = createContext<{
accessToken: string | undefined;
}>({ accessToken: undefined });
// in root.tsx, wrap <Outlet /> with <AuthProvider authSession={authSession}> to use access token in supabase'browser client
export const AuthProvider = ({
children,
authSession,
}: {
children: ReactElement;
authSession: Partial<AuthSession>;
}) => {
// what root loader data returns
const { accessToken, expiresIn } = authSession;
const refresh = useFetcher();
// trigger a refresh session at expire time. We'll send a post request to our resource route /refresh-session
useInterval(() => {
// ask to refresh only if expiresIn is defined
// prevents trying to refresh when user is not logged in
if (expiresIn)
refresh.submit(null, {
method: "post",
action: "/refresh-session",
encType: "application/x-www-form-urlencoded",
});
}, expiresIn);
const value = useMemo(() => ({ accessToken }), [accessToken]);
return (
<AuthContext.Provider value={value}>{children}</AuthContext.Provider>
);
};
export const useAuth = () => {
const context = useContext(AuthContext);
if (isBrowser && context === undefined) {
throw new Error(`useAuth must be used within a AuthProvider.`);
}
return context;
};
//route: refresh-session
export async function action({ request }: ActionArgs) {
const authSession = await refreshAuthSession(request);
return response.ok(
{ success: true },
{
authSession,
}
);
}
// in root.tsx
// authSession comes from root loader function
<AuthProvider authSession={authSession}>
<Outlet />
</AuthProvider>
//usage
function useWatchLiveEvents() {
const { accessToken } = useAuth();
const revalidate = useRevalidator().revalidate;
useEffect(() => {
if (!accessToken) return;
supabaseClient.realtime.setAuth(accessToken);
const channel = supabaseClient
.channel(`db-changes`)
.on(
"postgres_changes",
{
event: "DELETE",
schema: "public",
table: "transaction",
},
() => {
revalidate();
}
)
.subscribe();
return () => {
supabaseClient.removeChannel(channel);
};
}, [accessToken, revalidate]);
}
from supa-fly-stack.
Ahh that's nice! Thanks for the tip. Closing this.
from supa-fly-stack.
Related Issues (20)
- No two times . For the 10 time already. HOT 3
- Which keys should be used for github actions? HOT 1
- Can we define Supabase RLS with Prisma? or somehow with this stack? HOT 6
- Possible issues with Cypress mocking? HOT 7
- Debugging / Sourcemaps? HOT 5
- Question - JWT Token Expiring Error When Querying Supabase Directly HOT 11
- Auth Oddities / Vulnerabilities HOT 3
- Add i18n translation
- Support supabase-js v2 & future of this stack HOT 7
- LICENSE file HOT 3
- Feature : replace hand-crafted auth things with Supabase Remix's package ? HOT 3
- Access token refresh not working HOT 5
- Error: db error: ERROR: canceling statement due to statement timeout
- Handle password recovery for email/password HOT 4
- Error when running npm run setup (setup:seed) HOT 9
- Question: Magic link is not working as expected HOT 7
- V3 is coming HOT 7
- Prisma 3.12.0 breaks seed.ts HOT 3
- Be sure it works with Remix v2 HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from supa-fly-stack.