<DomainAuthenticated
      params={params}
      key={"client-onboaring-layout"}
      loading={<LoadingPage />}
    >
      <>{children}</>
    </DomainAuthenticated>


const DomainAuthenticated = ({
  params,
  children,
  loading,
  redirectOnFail,
  fallback,
  appendCurrentPathToQuery,
}: {
  children: ReactNode;
  fallback?: ReactNode;
  loading?: ReactNode;
  redirectOnFail?: string;
  appendCurrentPathToQuery?: boolean;
  params: { domain?: string };
}) => {
  const parsed = useParsed();
  const go = useGo();
  const {
    isFetching,
    data: {
      authenticated: isAuthenticatedStatus,
      redirectTo: authenticatedRedirect,
    } = {},
  } = useIsAuthenticated({ params });

  // Authentication status
  const isAuthenticated = isAuthenticatedStatus;

  const appliedRedirect =
    redirectOnFail || (authenticatedRedirect as string | undefined);

  // when checking authentication status
  if (isFetching) {
    return <>{loading ?? null}</>;
  }

  // when user is authenticated return children
  if (isAuthenticated) {
    return <>{children ?? null}</>;
  }

  // render fallback if it is exist
  if (typeof fallback !== "undefined") {
    return <>{fallback ?? null}</>;
  }

  // Current pathname to append to the redirect url.
  // User will be redirected to this url after successful mutation. (like login)
  const pathname = `${parsed.pathname}`.replace(/(\?.*|#.*)$/, "");

  return (
    <Redirect
      config={{
        to: appliedRedirect,
        query: appendCurrentPathToQuery
          ? {
              to: parsed.params?.to
                ? parsed.params.to
                : go({
                    to: pathname,
                    options: { keepQuery: true },
                    type: "path",
                  }),
            }
          : undefined,
        type: "replace",
      }}
    />
  );
};