Route Middleware

How to use route middleware

Route Middleware provide a convenient mechanism for inspecting and filtering route requests before rendering the component attached with requested route.

Route middleware is a powerful tool and can be used to either redirect a user to somewhere else or render a fallback UI.

Routes with auth middleware applied

Auth middleware is one of the built middleware Jumbo offers. It parses the route request and restricts anonymous users to access the component attached with route.

Here is how Auth Middleware could be applied while setting up your routes:

const sampleRoutes = [
    {
        path: "/signup",
        element: <PrivacyPolicy/>
    },
    {
        path: "/login",
        element: <Login/>
    },
    {
        middleware: [
            {
                element: Auth,
                fallbackPath: "/login"
            }
        ],
        routes: [
            {
                path: "/account-setting",
                element: <AccountSetting/>
            },
            {
                path: "/profile",
                element: <Profile/>
            },                    
        ]
    }
];

In the above example:

• First two routes "/signup" and "/login" are public routes and are open to all the users.

• But rest of two routes "/account-setting" and "/profile" only renders attached components if middleware Auth allows.

Auth middleware definition

Here is the definition of Auth middleware and it can be found inside /app/routes/middleware/Auth:

import React from 'react';
import {Navigate, Outlet} from "react-router-dom";
import Backdrop from "@mui/material/Backdrop";
import CircularProgress from "@mui/material/CircularProgress";
import {useAuth} from "@jumbo/providers/AuthProvider";

const Auth = ({fallbackPath}) => {
    const {authUser} = useAuth();
    if (authUser?.isLoading) {
        return (
            <Backdrop
                sx={{color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1}}
                open={authUser.isLoading}
            >
                <CircularProgress color="inherit"/>
            </Backdrop>
        );
    }

    if (authUser?.data) {
        return <Outlet/>;
    }

    return <Navigate to={fallbackPath}/>;
};

export default Auth;

As per the above definition, the Auth middleware component receives the fallbackPath passed as a prop and does the following checks:

• if authUser has isLoading state true then it will show a full page Backdrop with a circular spinner.

• if authUser object's data state has non nullish value then it means user is authenticated and it renders the component associated with the requested route.

• If none of the above two conditions are satisfied then Auth middleware consider this as an access limit and instead of rendering of the requested route component it navigates the the route with the fallbackPath which is "/login" as per declared in routes.

Hopefully the above example was helpful to you to understand how route middleware works in Jumbo.