Page flashing before redirecting and getting the token to use with requests

[Nikola-Milovic]

Hello everyone, got two questions about this library. Already integrated it into my project and it works great.

1. I was wondering how to prevent flashing of a page before it gets redirected to login? Eg, with current behaviour, you can briefly see the page before getting redirected to the /auth. Guessing that server side rendering would have to be added

const Home = () => {
    return (
        <Layout>
        </Layout>
    );
};

export default withAuthUser({
    whenUnauthedAfterInit: AuthAction.REDIRECT_TO_LOGIN,
    authPageURL: "/auth/",
    LoaderComponent: Loader,
})(Home);

But I don't use server side rendering anywhere, so can I just add it in?

2. I want to add Bearer token to all of my requests, should I call const token = await AuthUser.getIdToken() every time I want to make a request or can I store it somewhere (using state or context)? As I dont know if async is available for pages

As I'd need the token in this kind of request

const sendMessage = async (data: IMessage) => {
    const { data: response } = await axios.post(
        `${process.env.SERVER_URL}/message`,
        data,
        // Here I'd add the bearer token
    );
    return response.data;
};

// Dashboard page 
const Dashboard = () => {
    const { mutate, isLoading } = useMutation(sendMessage);
    
    ...
    
export default withAuthUser({
    whenUnauthedAfterInit: AuthAction.REDIRECT_TO_LOGIN,
    authPageURL: "/auth/",
})(Dashboard);

[kmjennison]

1. You have a few options. One is to SSR, as you mentioned. Another is to set whenUnauthedBeforeInit to AuthAction.SHOW_LOADER, which will always show the loader component prior to Firebase initializing on the client. A third option is to let the page render but include conditional render logic in your page based on the AuthUser (e.g., show a blank page until the AuthUser is set).
2. Yes, you should get the ID token every time so that it will refresh as needed. If you store the token value, you run the risk of it expiring.