AuthRouteGuard

AuthRouteGuard.tsx

import React from 'react';
import { useSelector } from 'react-redux';
import { Route, RouteProps, Redirect, useLocation } from 'react-router-dom';

import { useSearchParams } from 'hooks';
import { StatusEnum } from 'reducers/models';
import { Loader } from 'components/elements';

export function AppRoute({ component, secured, ...props }: (RouteProps & { secured?: boolean }))
{
    function render(childProps: any)
    {
        return <Render
            {...childProps}
            secured={secured}
            component={component} />;
    }

    return <Route
        {...props}
        render={render} />;
}

function Render({ component, secured, ...childProps }: any)
{
    const { user, status } = useSelector(store => store.auth);

    const { pathname } = useLocation();
    const { redirect } = useSearchParams();

    if (status === StatusEnum.Loading)
    {
        return <Loader />;
    }

    if (secured)
    {
        if (!user)
        {
            if (pathname === '/')
            {
                return <Redirect to="/login" />;
            }

            return <Redirect to={`/login?redirect=${pathname}`} />;
        }

        if (pathname === '/')
        {
            return <Redirect to="/home" />;
        }

        if (user.onBoarded && pathname === '/onboard')
        {
            return <Redirect to="/home" />;
        }

        if (!user.onBoarded && pathname !== '/onboard')
        {
            return <Redirect to="/onboard" />;
        }
    }

    if (!secured)
    {
        if (user)
        {
            if (redirect)
            {
                return <Redirect to={redirect} />;
            }

            return <Redirect to="/home" />;
        }

        if (pathname === '/')
        {
            return <Redirect to="/login" />;
        }
    }

    const AppComponent = component;
    return <AppComponent {...childProps} />;
}