T
TanStack•10mo ago
fair-rose

What's the proper way to integrate with react-oidc-context?

I am using react-oidc-context for auth, I want to integrate the router with it, but I do not want to go into the app without auth being loaded 
const auth = useAuth()
auth.isLoading // This is a boolean
const auth = useAuth()
auth.isLoading // This is a boolean
Is there any way through which I can go to the router pending component and wait there for isLoading to become false?
2 Replies
fair-rose
fair-rose•10mo ago
you could create a layout, say _authenticatedLayout, and in there do your authentication in beforeLoad. Before load is cool because you can just throw a redirect from there, and if you want to have some auth things globally accesible for all parents, use RouteContext, and then you just return it from beforeLoad and it is available in all child routes So in your case it may look like this: 
export const Route = createFileRoute('/_authenticated')({
    component: AuthenticatedLayout,
    beforeLoad: async () => {
        const auth = await getAuth()
        if(auth.authenticated == false){
            throw redirect({to: "/login"});
        }
        return { auth }
    },
})
export const Route = createFileRoute('/_authenticated')({
    component: AuthenticatedLayout,
    beforeLoad: async () => {
        const auth = await getAuth()
        if(auth.authenticated == false){
            throw redirect({to: "/login"});
        }
        return { auth }
    },
})
and then wherever you are creating your root route, it should look something like: 
export const Route = createRootRouteWithContext<AuthContext>()({
// the rest of the stuff
export const Route = createRootRouteWithContext<AuthContext>()({
// the rest of the stuff
fair-rose
fair-roseOP•10mo ago
This does not fix my issue, I want to wait for the auth to be ready, not authenticated, I am already doing the above. I just want to wait for auth.isLoading to become false before going forward, as auth.isAuthenticated is false while auth is loading even if the credentials are available (in localStorage) and i'd love for it to be managed by the router pending component, cause I know I could just return a loading component in <App /> where I use useAuth to pass the auth to the router context

Did you find this page helpful?