[FEAT] Adding an optional params properties to the Authenticated component so that the useIsAuthenticated and AuthProvider.Check can use the custom params

[reedwane]

Is your feature request related to a problem? Please describe.

I am working on a multitenancy app, and my authentication logic requires calling the Auth.check function with some custom properties like the dynamic domain name, so that I can do some required validation

Describe alternatives you've considered

The work around I have for now is to create a local clone of the Authenticated component and made it accept an optional param in its properties, then passed that to the useIsAuthenticated hook in the component.

I think it's simple enough to consider allowing an optional param object be passed, since the Authprovider.check itself readily allows for it

Additional context

Sample usage of my workaround:

 <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",
      }}
    />
  );
};

Describe the thing to improve

Allow an optional param property on the Authenticated component