@refinedev/core 4.1.4 → 4.1.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@refinedev/core",
-  "version": "4.1.4",
+  "version": "4.1.6",
   "description": "refine is a React-based framework for building internal tools, rapidly. It ships with Ant Design System, an enterprise-level UI toolkit.",
   "private": false,
   "main": "dist/index.js",

package/src/components/authenticated/index.tsx

@@ -98,105 +98,147 @@ export function Authenticated({
     loading: loadingContent,
 }: AuthenticatedProps | LegacyAuthenticatedProps): JSX.Element | null {
     const activeAuthProvider = useActiveAuthProvider();
+    const routerType = useRouterType();
 
-    const isLegacy = Boolean(activeAuthProvider?.isLegacy);
-
-    const isAuthenticatedProps = useIsAuthenticated({
-        v3LegacyAuthProviderCompatible: Boolean(activeAuthProvider?.isLegacy),
-    });
+    const hasAuthProvider = Boolean(activeAuthProvider?.isProvided);
+    const isLegacyAuth = Boolean(activeAuthProvider?.isLegacy);
+    const isLegacyRouter = routerType === "legacy";
 
-    const routerType = useRouterType();
     const parsed = useParsed();
     const go = useGo();
     const deferredGo = useDeferredGo();
     const { replace } = useNavigation();
     const { useLocation } = useRouterContext();
-    const { pathname, search } = useLocation();
-
-    const loading = isAuthenticatedProps.isLoading;
-
-    const isAuthenticated = activeAuthProvider?.isProvided
-        ? isLegacy
-            ? isAuthenticatedProps.isSuccess
-            : isAuthenticatedProps.data?.authenticated
-        : true;
+    const legacyLocation = useLocation();
+
+    const {
+        isLoading,
+        isFetching,
+        // isRefetching,
+        isSuccess,
+        data: {
+            authenticated: isAuthenticatedStatus,
+            redirectTo: authenticatedRedirect,
+        } = {},
+        refetch,
+    } = useIsAuthenticated({
+        v3LegacyAuthProviderCompatible: isLegacyAuth,
+    });
 
-    const appliedRedirect = isLegacy
-        ? typeof redirectOnFail === "string"
-            ? redirectOnFail
-            : "/login"
-        : typeof redirectOnFail === "string"
-        ? redirectOnFail
-        : (isAuthenticatedProps.data?.redirectTo as string | undefined);
+    React.useEffect(() => {
+        /**
+         * Refetch the authentication status if the content is changed (e.g. redirected or updated)
+         *
+         * This is done to avoid re-rendering the wrappers with the same content.
+         */
+
+        refetch();
+    }, [children, fallbackContent]);
+
+    const state = React.useRef<{
+        status: "initial" | "pending" | "settled";
+        content: React.ReactNode;
+    }>({
+        status: isLoading ? "initial" : "pending",
+        content: loadingContent ?? null,
+    });
 
-    if (loading) {
-        return loadingContent ? <>{loadingContent}</> : null;
+    /**
+     * Update state when fetching the authentication response.
+     */
+    if (isFetching) {
+        state.current.status = "pending";
+    } else if (!isFetching) {
+        state.current.status = "settled";
     }
 
-    if (isAuthenticated) {
-        return <>{children ?? null}</>;
-    } else {
-        if (typeof fallbackContent === "undefined") {
-            if (routerType === "legacy") {
-                const suffix = appendCurrentPathToQuery
-                    ? pathname
-                        ? `?to=${encodeURIComponent(
-                              `${pathname}${search ?? ""}`,
-                          )}`
-                        : ""
-                    : "";
-
-                /**
-                 * Legacy provider handles `/login` path rendering.
-                 * So, we need to check if pathname is `/login` or not.
-                 * To avoid infinite loop.
-                 */
-                const cleanPathname = pathname?.split(/[?#]/)[0];
-                if (
-                    !cleanPathname?.includes("/login") &&
-                    cleanPathname !== redirectOnFail
-                ) {
-                    replace(
-                        `/${(appliedRedirect ?? "/login").replace(
-                            /^\//,
-                            "",
-                        )}${suffix}`,
-                    );
-                }
-            } else {
-                const cleanPathname = parsed.pathname?.split(/[?#]/)[0];
-
-                /** If the route is same, do not redirect */
-                if (cleanPathname === appliedRedirect) return null;
-
-                /** If `to` is already present, do not append the new one. */
-                const suffix = parsed.params?.to
-                    ? parsed.params?.to
-                    : go({
-                          to: parsed.pathname || "/",
-                          options: { keepQuery: true },
-                          type: "path",
-                      });
-
-                if (appliedRedirect) {
+    /**
+     * Authentication status
+     */
+    const isAuthenticated = hasAuthProvider
+        ? isLegacyAuth
+            ? isSuccess
+            : isAuthenticatedStatus
+        : true;
+
+    if (state.current.status === "settled") {
+        /**
+         * If the state is settled, and query is resolved.
+         */
+        if (isAuthenticated) {
+            /**
+             * If user is authenticated, show the children.
+             */
+            state.current.content = <>{children ?? null}</>;
+        } else if (typeof fallbackContent !== "undefined") {
+            /**
+             * If user is not authenticated, and `fallback` is present, show the fallback content.
+             */
+            state.current.content = <>{fallbackContent}</>;
+        } else {
+            /**
+             * If there's no `fallback` content, redirect will be applied.
+             */
+
+            /**
+             * Current pathname to append to the redirect url.
+             */
+            const pathname = `${
+                isLegacyRouter ? legacyLocation?.pathname : parsed.pathname
+            }`.replace(/(\?.*|#.*)$/, "");
+
+            /**
+             * Redirect url to use, if `redirectOnFail` is set to a string,
+             * it will be used instead of `redirectTo` property of the `check` function's response.
+             */
+            const appliedRedirect = isLegacyAuth
+                ? typeof redirectOnFail === "string"
+                    ? redirectOnFail
+                    : "/login"
+                : typeof redirectOnFail === "string"
+                ? redirectOnFail
+                : (authenticatedRedirect as string | undefined);
+
+            /**
+             * Redirect if `appliedRedirect` is set.
+             */
+            if (appliedRedirect) {
+                if (isLegacyRouter) {
+                    const toQuery = appendCurrentPathToQuery
+                        ? `?to=${encodeURIComponent(pathname)}`
+                        : "";
+                    replace(`${appliedRedirect}${toQuery}`);
+                } else {
                     deferredGo({
-                        // needs to be adjusted by the return value of `checkAuth`
-                        to: `/${appliedRedirect.replace(/^\//, "")}`,
-                        query:
-                            suffix &&
-                            typeof suffix === "string" &&
-                            suffix.length > 1
-                                ? {
-                                      to: suffix,
-                                  }
-                                : {},
+                        to: appliedRedirect,
+                        query: appendCurrentPathToQuery
+                            ? {
+                                  to: parsed.params?.to
+                                      ? parsed.params.to
+                                      : go({
+                                            to: pathname,
+                                            options: { keepQuery: true },
+                                            type: "path",
+                                        }),
+                              }
+                            : undefined,
+                        type: "replace",
                     });
                 }
             }
-
-            return null;
         }
+    }
+
 
-        return <>{fallbackContent}</>;
+    /**
+     * If there's no `authProvider` set, we don't need to check whether user is logged in or not.
+     */
+    if (!hasAuthProvider) {
+        return <>{children ?? null}</>;
     }
+
+    /**
+     * Returning the content based on the state, `fallback` or `children`.
+     */
+    return <>{state.current.content}</>;
 }

package/src/hooks/auth/useInvalidateAuthStore/index.ts

@@ -0,0 +1,15 @@
+import { useQueryClient } from "@tanstack/react-query";
+
+export const useInvalidateAuthStore = () => {
+    const queryClient = useQueryClient();
+
+    const invalidate = async () => {
+        await Promise.all([
+            queryClient.invalidateQueries(["useAuthenticated"]),
+            queryClient.invalidateQueries(["getUserIdentity"]),
+            queryClient.invalidateQueries(["usePermissions"]),
+        ]);
+    };
+
+    return invalidate;
+};

package/src/hooks/auth/useIsAuthenticated/index.ts

@@ -63,7 +63,7 @@ export function useIsAuthenticated({
     );
 
     const legacyQueryResponse = useQuery(
-        ["useAuthenticated", "v3LegacyAuthProviderCompatible", params],
+        ["useAuthenticated", params, "v3LegacyAuthProviderCompatible"],
         async () => (await checkAuth?.(params)) ?? {},
         {
             retry: false,

package/src/hooks/auth/useLogin/index.ts

@@ -18,7 +18,7 @@ import { useAuthBindingsContext, useLegacyAuthContext } from "@contexts/auth";
 import { OpenNotificationParams, TLoginData } from "../../../interfaces";
 import { AuthActionResponse } from "src/interfaces/bindings/auth";
 import React from "react";
-import { useInvalidateAuthStore } from "../useInvaliteAuthStore";
+import { useInvalidateAuthStore } from "../useInvalidateAuthStore";
 
 export type UseLoginLegacyProps<TVariables> = {
     v3LegacyAuthProviderCompatible: true;
@@ -129,7 +129,7 @@ export function useLogin<TVariables = {}>({
         TVariables,
         unknown
     >(["useLogin"], loginFromContext, {
-        onSuccess: ({ success, redirectTo, error }) => {
+        onSuccess: async ({ success, redirectTo, error }) => {
             if (success) {
                 close?.("login-error");
             }
@@ -138,6 +138,8 @@ export function useLogin<TVariables = {}>({
                 open?.(buildNotification(error));
             }
 
+            await invalidateAuthStore();
+
             if (to && success) {
                 if (routerType === "legacy") {
                     replace(to as string);
@@ -155,10 +157,6 @@ export function useLogin<TVariables = {}>({
                     replace("/");
                 }
             }
-
-            setTimeout(() => {
-                invalidateAuthStore();
-            });
         },
         onError: (error: any) => {
             open?.(buildNotification(error));
@@ -172,7 +170,9 @@ export function useLogin<TVariables = {}>({
         TVariables,
         unknown
     >(["useLogin", "v3LegacyAuthProviderCompatible"], legacyLoginFromContext, {
-        onSuccess: (redirectPathFromAuth) => {
+        onSuccess: async (redirectPathFromAuth) => {
+            await invalidateAuthStore();
+
             if (to) {
                 replace(to as string);
             }
@@ -194,10 +194,6 @@ export function useLogin<TVariables = {}>({
             }
 
             close?.("login-error");
-
-            setTimeout(() => {
-                invalidateAuthStore();
-            });
         },
         onError: (error: any) => {
             open?.(buildNotification(error));

package/src/hooks/auth/useLogout/index.ts

@@ -8,7 +8,7 @@ import { useGo, useNavigation, useNotification, useRouterType } from "@hooks";
 import { useAuthBindingsContext, useLegacyAuthContext } from "@contexts/auth";
 import { OpenNotificationParams, TLogoutData } from "../../../interfaces";
 import { AuthActionResponse } from "src/interfaces/bindings/auth";
-import { useInvalidateAuthStore } from "../useInvaliteAuthStore";
+import { useInvalidateAuthStore } from "../useInvalidateAuthStore";
 
 type Variables = {
     redirectPath?: string | false;
@@ -112,7 +112,7 @@ export function useLogout<TVariables = {}>({
         (TVariables & Variables) | void,
         unknown
     >(["useLogout"], logoutFromContext, {
-        onSuccess: (data, variables) => {
+        onSuccess: async (data, variables) => {
             const { success, error, redirectTo } = data;
             const { redirectPath } = variables ?? {};
 
@@ -126,6 +126,8 @@ export function useLogout<TVariables = {}>({
                 open?.(buildNotification(error));
             }
 
+            await invalidateAuthStore();
+
             if (redirect !== false) {
                 if (routerType === "legacy") {
                     push(redirect ?? "/login");
@@ -135,8 +137,6 @@ export function useLogout<TVariables = {}>({
                     }
                 }
             }
-
-            invalidateAuthStore();
         },
         onError: (error: any) => {
             open?.(buildNotification(error));
@@ -153,9 +153,11 @@ export function useLogout<TVariables = {}>({
         ["useLogout", "v3LegacyAuthProviderCompatible"],
         legacyLogoutFromContext,
         {
-            onSuccess: (data, variables) => {
+            onSuccess: async (data, variables) => {
                 const redirectPath = variables?.redirectPath ?? data;
 
+                await invalidateAuthStore();
+
                 if (redirectPath === false) {
                     return;
                 }
@@ -174,8 +176,6 @@ export function useLogout<TVariables = {}>({
                 } else {
                     go({ to: "/login" });
                 }
-
-                invalidateAuthStore();
             },
             onError: (error: any) => {
                 open?.(buildNotification(error));

package/src/hooks/auth/useRegister/index.ts

@@ -13,7 +13,7 @@ import {
     TLoginData,
     TRegisterData,
 } from "../../../interfaces";
-import { useInvalidateAuthStore } from "../useInvaliteAuthStore";
+import { useInvalidateAuthStore } from "../useInvalidateAuthStore";
 
 export type UseRegisterLegacyProps<TVariables> = {
     v3LegacyAuthProviderCompatible: true;
@@ -106,7 +106,7 @@ export function useRegister<TVariables = {}>({
         TVariables,
         unknown
     >(["useRegister"], registerFromContext, {
-        onSuccess: ({ success, redirectTo, error }) => {
+        onSuccess: async ({ success, redirectTo, error }) => {
             if (success) {
                 close?.("register-error");
             }
@@ -115,6 +115,8 @@ export function useRegister<TVariables = {}>({
                 open?.(buildNotification(error));
             }
 
+            await invalidateAuthStore();
+
             if (redirectTo) {
                 if (routerType === "legacy") {
                     replace(redirectTo);
@@ -126,8 +128,6 @@ export function useRegister<TVariables = {}>({
                     replace("/");
                 }
             }
-
-            invalidateAuthStore();
         },
         onError: (error: any) => {
             open?.(buildNotification(error));
@@ -144,7 +144,9 @@ export function useRegister<TVariables = {}>({
         ["useRegister", "v3LegacyAuthProviderCompatible"],
         legacyRegisterFromContext,
         {
-            onSuccess: (redirectPathFromAuth) => {
+            onSuccess: async (redirectPathFromAuth) => {
+                await invalidateAuthStore();
+
                 if (redirectPathFromAuth !== false) {
                     if (redirectPathFromAuth) {
                         if (routerType === "legacy") {
@@ -161,8 +163,6 @@ export function useRegister<TVariables = {}>({
                     }
                     close?.("register-error");
                 }
-
-                invalidateAuthStore();
             },
             onError: (error: any) => {
                 open?.(buildNotification(error));

package/dist/hooks/auth/useInvaliteAuthStore/index.d.ts

@@ -1,2 +0,0 @@
-export declare const useInvalidateAuthStore: () => () => void;
-//# sourceMappingURL=index.d.ts.map

package/dist/hooks/auth/useInvaliteAuthStore/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/hooks/auth/useInvaliteAuthStore/index.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,sBAAsB,kBAUlC,CAAC"}

package/src/hooks/auth/useInvaliteAuthStore/index.ts

@@ -1,13 +0,0 @@
-import { useQueryClient } from "@tanstack/react-query";
-
-export const useInvalidateAuthStore = () => {
-    const queryClient = useQueryClient();
-
-    const invalidate = () => {
-        queryClient.invalidateQueries(["useAuthenticated"]);
-        queryClient.invalidateQueries(["getUserIdentity"]);
-        queryClient.invalidateQueries(["usePermissions"]);
-    };
-
-    return invalidate;
-};