Initiate authentication before route loaders are called

[atifc]

I'm using createBrowserRouter with loaders on several routes.

Here is my current setup:

app.tsx:

index.tsx:

The keycloakservice handles initial authentication, token update etc.
The httpservice checks if the token is present and configures axios interceptor to attach the token to the authorization header and refreshes the token afterwards.

This all works fine and well, except for the very first API call which originates from the "loadFrontpage" loader, since react-router executes all loaders in parallel, so that first call fails since the token will not be set in time.

Does anyone have a suggestion on a way to make sure that the authentication has finished initializing before the loaders are allowed to execute?

[chinanderm]

@atifc Did you figure out a good solution for this? The beforeLoader functionality ideally is what's needed here but that's been stuck in proposal status for 8 months, unfortunately.

[atifc]

I'm afraid not. The beforeLoader looks ideal though.

[varad11]

@atifc I was able to implement a temporary workable fix for this same issue that I too faced.
In my Route.tsx where I define router I use useState() to update the state once I receive an auth/access token before loaders load.

function Router() {
    const [token, setToken]: Array<any> = useState(null); //set initial token value to null

    if (!token) {
        // Before everything first fetch token.
        myTokenService.get().then(res => setToken(res)); // Once token received, update the state.

        // I use react-bootstrap to display a spinner until token is fetched.   
        return (<Spinner animation="border" role="status">
            <span className="visually-hidden">Loading...</span>
        </Spinner>);
    } else {
        //Define router
        const router = createBrowserRouter([
            {
                path: "/",
                element: (<Parent />),
                loader: async () => {
                    const parentData = await fetch.getParentData(token);
                    return defer({ parentData });
                },
                errorElement: <ErrorPage />,
                children: [
                    {
                        path: "child1",
                        element: <ChildOne />,
                        loader: async () => {
                            const childData = await fetch.getChildData(token);
                            return defer({ childData });
                        },
                    },
                    {
                        path: "child2",
                        element: <ChildTwo />,
                        loader: async ({ params }) => {
                            const childData = await fetch.getChildData(token);
                            return defer({ childData });
                        }
                    }
                ]
            }
        ]);
        return (<RouterProvider router={router} />)
    }
}

Now one issue I face is during the page load or refresh the request to fetch the token is made twice. I have not investigated the cause of this yet, so I don't know if it is mistake of my application or react-router specific.

I hope there is 'beforeLoader' kind of functionality that enables such scenarios where we can switch to sequential instead of parallel for particular situations.