The OAuth flow is asynchronous. This means we get redirected to the landing page before GitHub and Supabase have decided that you can be trusted! 👍
Since our Loader functions get called when we first load the page they make a request to Supabase before receiving a valid access token. This causes RLS to deny the request to select data.
Once our session has been correctly set, Supabase is happy but we aren't telling Remix to fetch this data again. In this lesson, we look at using the onAuthStateChange hook from Supabase to submit a post request to an empty action. Anytime an Action function completes, Remix recalls any active loaders to keep data in sync with mutations.
Therefore, any time the user's session is updated - the auth flow has completed for either signing in or out - Remix will automatically call all loader functions that are active on the current route (this could be many with nested routing), fetching fresh data from Supabase with a valid access token.
onAuthStateChange listener
useEffect(() => {
const {
data: { subscription },
} = supabase.auth.onAuthStateChange((event, session) => {
if (session?.access_token !== serverAccessToken) {
fetcher.submit(null, {
method: "post",
action: "/handle-supabase-session",
});
}
});
return () => {
subscription.unsubscribe();
};
}, [serverAccessToken, supabase, fetcher]);Empty action
export const action = () => {
return null;
};Enjoying the course? Follow Jon Meyers on Twitter and subscribe to the YouTube channel.