[Bug]: Authorization redirects fail using createBrowserRouter loaders

[Ces-D]

What version of React Router are you using?

6.4.1

Steps to Reproduce

"typescript": "^4.5.5",
"vite": "^3.1.0",
"react-router-dom": "^6.4.1",

/** A loader function that runs before the route transition begins. Handles redirecting 
 * if authorization conditions are not met.
 * 
 * Only provide `to` if you want to redirect the user
 */
export const browserRouterAuthLoader = ({ to, authRequired }: { to?: string, authRequired: boolean }) => {
  if (authRequired) {
    if (!!to && authorizationTokenExpired()) {
      return new Response(null, {
        status: 302,
        headers: {
          Location: to,
        },
      });
    }
  } else {
    if (!!to) {
      return new Response(null, {
        status: 302,
        headers: {
          Location: to,
        },
      });
    }
  }
}

/** This is the function for checking authorization status */
export const authorizationTokenExpired = (): boolean => {
  const expirationStorage = window.localStorage.getItem(AUTH_TOKEN_EXPIRATION_NAME)
  if (!!expirationStorage) {
    const expirationDate = new Date(expirationStorage)
    return expirationDate <= new Date()
  }
  return true
}

const router = createBrowserRouter([...authorizationBrowserRouterObjects, ...miscellaneousBrowserRouterObjects]

export const miscellaneousBrowserRouterObjects: RouteObject[] = [
  {
    path: MiscRoutes.HOME, element: <HomeView />,
    loader: () => browserRouterAuthLoader({ authRequired: true, to: AuthRoutes.LOGIN })
  }
]

The authorizationBrowserRouterObjects copy the same format.

Expected Behavior

I expected the loader to redirect the user when this loader is triggered. In test cases the authorization does not exist. So pinging the home route should send me to a login page.

Actual Behavior

Application stalls and fails to build. If the Response is not returned then everything returns correctly, with the exception of the redirect. The same occurs when redirect is used instead of creating a Response object.

[Ces-D]

I figured it out. The issue was with circular loaders redirecting to each other. There is no error here.

export const authorizationBrowserRouterObjects: RouteObject[] = [
  {
    path: AuthRoutes.LOGIN, element: <LoginView />,
    loader: () => browserRouterAuthLoader({ authRequired: false, to: MiscRoutes.HOME })
  }
]

export const miscellaneousBrowserRouterObjects: RouteObject[] = [
  {
    path: MiscRoutes.HOME, element: <HomeView />,
    loader: () => browserRouterAuthLoader({ authRequired: true, to: AuthRoutes.LOGIN })
  }
]

/** A loader function that runs before the route transition begins. Handles redirecting 
 * if authorization conditions are not met.
 * 
 * Only provide `to` if you want to redirect the user. Redirect only if the user is authorized otherwise 
 * will ignore `to`
 */
export const browserRouterAuthLoader = ({ to, authRequired, }: { to?: string, authRequired: boolean }) => {
  const userAuthorized = Boolean(getAuthorizationToken())
  if (authRequired) {
    if (!!to && !userAuthorized) { // auth is required and the user is not authorized
      return redirect(to)
    }
  } else {
    if (!!to && userAuthorized) { // auth is not required, but the user is authorized
      return redirect(to)
    }
  }
}

the browserRouterAuthLoader was written poorly. Meant for redirect from login only if user is authorized

[AMoktar]

I'm looking for answer about auth required routes as well.
I'm wondering about your approach
Is it the ok to set loader as a redirect function?
Isn't should be a type of data ?