Redirect all authenticated routes until user completes profile

[markpatx]

I want to restrict access to all the authenticated pages of an app until the user complete and submit their profile. I started with the data-provider-supabase example, I added a /profile route with a dummy edit profile page. (I do have a working form in my local test that works fine, it stores data like first and last name into auth.users raw_user_meta_data, and I later retrieve it on the authProvider getIdentity. I didn't include it for simplicity).

Then I created a component that returns <NavigateToResource resource="profile" /> if the profile is empty or <Outlet /> otherwise, and used it on the Authenticated route instead of just <Outlet />.

This is the demo: https://codesandbox.io/s/misty-fast-xxrlpt

It kind of works, but you have to reload the page after setting the profile data to make getIdentity fetch the new data. Is there a way to make it work without having to reload the page?

Or is there a better approach to achieve this? I guess <CanAccess /> could be used, with the logic inside the control access provider can method, and fallback="/profile", but what if I want to add roles later, the fallback would already point to /profile and I wouldn't be able to show something like an unauthorized error.

[BatuhanW]

Hey @markpatx sorry for the late response, it seems your question is overlooked among others.

I think you can utilize check method of AuthProvider, for example, if there is no user at all, you can redirect to login page but if there is a user but didn't complete profile, you can redirect to profile page conditionally.

https://refine.dev/docs/api-reference/core/providers/auth-provider/#check