diff --git a/refine-nextjs/plugins/antd-example/src/app/blog-posts/show/[id]/page.tsx b/refine-nextjs/plugins/antd-example/src/app/blog-posts/show/[id]/page.tsx
index df317ba4..a26fdad8 100644
--- a/refine-nextjs/plugins/antd-example/src/app/blog-posts/show/[id]/page.tsx
+++ b/refine-nextjs/plugins/antd-example/src/app/blog-posts/show/[id]/page.tsx
@@ -59,7 +59,7 @@ export default function BlogPostShow() {
     return (
         <Show isLoading={isLoading}>
             <Title level={5}>{"ID"}</Title>
-            <NumberField value={record?.id ?? ""} />
+            <TextField value={record?.id} />
             <Title level={5}>{"Title"}</Title>
             <TextField value={record?.title} />
             <Title level={5}>{"Content"}</Title>
diff --git a/refine-nextjs/plugins/antd-example/src/app/categories/show/[id]/page.tsx b/refine-nextjs/plugins/antd-example/src/app/categories/show/[id]/page.tsx
index 85a7b4c6..538d57bc 100644
--- a/refine-nextjs/plugins/antd-example/src/app/categories/show/[id]/page.tsx
+++ b/refine-nextjs/plugins/antd-example/src/app/categories/show/[id]/page.tsx
@@ -34,7 +34,7 @@ export default function CategoryShow() {
     return (
         <Show isLoading={isLoading}>
             <Title level={5}>{"ID"}</Title>
-            <NumberField value={record?.id ?? ""} />
+            <TextField value={record?.id} />
             <Title level={5}>{"Title"}</Title>
             <TextField value={record?.title} />
         </Show>
diff --git a/refine-nextjs/plugins/data-provider-supabase/extend.js b/refine-nextjs/plugins/data-provider-supabase/extend.js
index 366f2184..e43e3c29 100644
--- a/refine-nextjs/plugins/data-provider-supabase/extend.js
+++ b/refine-nextjs/plugins/data-provider-supabase/extend.js
@@ -2,11 +2,11 @@ const base = {
     _app: {
         import: [],
         localImport: [
-            'import { authProvider } from "@providers/auth-provider";',
+            'import { authProviderClient } from "@providers/auth-provider";',
             'import { dataProvider } from "@providers/data-provider";',
         ],
         refineProps: [
-            "authProvider={authProvider}",
+            "authProvider={authProviderClient}",
             "dataProvider={dataProvider}",
         ],
         refineAntdImports: [],
diff --git a/refine-nextjs/plugins/data-provider-supabase/package.json b/refine-nextjs/plugins/data-provider-supabase/package.json
index 45fe38bb..77eaf45a 100644
--- a/refine-nextjs/plugins/data-provider-supabase/package.json
+++ b/refine-nextjs/plugins/data-provider-supabase/package.json
@@ -1,6 +1,7 @@
 {
   "dependencies": {
     "@refinedev/supabase": "^5.7.4",
+    "@supabase/ssr": "^0.3.0",
     "js-cookie": "^3.0.5"
   },
   "devDependencies": {
diff --git a/refine-nextjs/plugins/data-provider-supabase/src/middleware.ts b/refine-nextjs/plugins/data-provider-supabase/src/middleware.ts
new file mode 100644
index 00000000..376076d9
--- /dev/null
+++ b/refine-nextjs/plugins/data-provider-supabase/src/middleware.ts
@@ -0,0 +1,20 @@
+import { updateSession } from "@/utils/supabase/middleware";
+import type { NextRequest } from "next/server";
+
+export async function middleware(request: NextRequest) {
+    const result = await updateSession(request);
+    return result;
+}
+
+export const config = {
+    matcher: [
+        /*
+         * Match all request paths except for the ones starting with:
+         * - _next/static (static files)
+         * - _next/image (image optimization files)
+         * - favicon.ico (favicon file)
+         * Feel free to modify this pattern to include more paths.
+         */
+        "/((?!_next/static|_next/image|favicon.ico|.*\\.(?:svg|png|jpg|jpeg|gif|webp)$).*)",
+    ],
+};
diff --git a/refine-nextjs/plugins/data-provider-supabase/src/providers/auth-provider/auth-provider.ts b/refine-nextjs/plugins/data-provider-supabase/src/providers/auth-provider/auth-provider.client.ts
similarity index 72%
rename from refine-nextjs/plugins/data-provider-supabase/src/providers/auth-provider/auth-provider.ts
rename to refine-nextjs/plugins/data-provider-supabase/src/providers/auth-provider/auth-provider.client.ts
index 8772fb21..e53515ab 100644
--- a/refine-nextjs/plugins/data-provider-supabase/src/providers/auth-provider/auth-provider.ts
+++ b/refine-nextjs/plugins/data-provider-supabase/src/providers/auth-provider/auth-provider.client.ts
@@ -1,15 +1,15 @@
 "use client";
 
-import { AuthBindings } from "@refinedev/core";
-import { supabaseClient } from "@utility/supabase-client";
-import Cookies from "js-cookie";
+import type { AuthProvider } from "@refinedev/core";
+import { supabaseBrowserClient } from "@utils/supabase/client";
 
-export const authProvider: AuthBindings = {
+export const authProviderClient: AuthProvider = {
     login: async ({ email, password }) => {
-        const { data, error } = await supabaseClient.auth.signInWithPassword({
-            email,
-            password,
-        });
+        const { data, error } =
+            await supabaseBrowserClient.auth.signInWithPassword({
+                email,
+                password,
+            });
 
         if (error) {
             return {
@@ -19,10 +19,7 @@ export const authProvider: AuthBindings = {
         }
 
         if (data?.session) {
-            Cookies.set("token", data.session.access_token, {
-                expires: 30, // 30 days
-                path: "/",
-            });
+            await supabaseBrowserClient.auth.setSession(data.session);
 
             return {
                 success: true,
@@ -40,8 +37,7 @@ export const authProvider: AuthBindings = {
         };
     },
     logout: async () => {
-        Cookies.remove("token", { path: "/" });
-        const { error } = await supabaseClient.auth.signOut();
+        const { error } = await supabaseBrowserClient.auth.signOut();
 
         if (error) {
             return {
@@ -57,7 +53,7 @@ export const authProvider: AuthBindings = {
     },
     register: async ({ email, password }) => {
         try {
-            const { data, error } = await supabaseClient.auth.signUp({
+            const { data, error } = await supabaseBrowserClient.auth.signUp({
                 email,
                 password,
             });
@@ -91,10 +87,17 @@ export const authProvider: AuthBindings = {
         };
     },
     check: async () => {
-        const token = Cookies.get("token");
-        const { data } = await supabaseClient.auth.getUser(token);
+        const { data, error } = await supabaseBrowserClient.auth.getUser();
         const { user } = data;
 
+        if (error) {
+            return {
+                authenticated: false,
+                redirectTo: "/login",
+                logout: true,
+            };
+        }
+
         if (user) {
             return {
                 authenticated: true,
@@ -107,7 +110,7 @@ export const authProvider: AuthBindings = {
         };
     },
     getPermissions: async () => {
-        const user = await supabaseClient.auth.getUser();
+        const user = await supabaseBrowserClient.auth.getUser();
 
         if (user) {
             return user.data.user?.role;
@@ -116,7 +119,7 @@ export const authProvider: AuthBindings = {
         return null;
     },
     getIdentity: async () => {
-        const { data } = await supabaseClient.auth.getUser();
+        const { data } = await supabaseBrowserClient.auth.getUser();
 
         if (data?.user) {
             return {
diff --git a/refine-nextjs/plugins/data-provider-supabase/src/providers/auth-provider/auth-provider.server.ts b/refine-nextjs/plugins/data-provider-supabase/src/providers/auth-provider/auth-provider.server.ts
index ade4d473..612fcaac 100644
--- a/refine-nextjs/plugins/data-provider-supabase/src/providers/auth-provider/auth-provider.server.ts
+++ b/refine-nextjs/plugins/data-provider-supabase/src/providers/auth-provider/auth-provider.server.ts
@@ -1,12 +1,21 @@
-import { AuthBindings } from "@refinedev/core";
-import { cookies } from "next/headers";
+import type { AuthProvider } from "@refinedev/core";
+import { createSupabaseServerClient } from "@utils/supabase/server";
 
-export const authProviderServer: Pick<AuthBindings, "check"> = {
+export const authProviderServer: Pick<AuthProvider, "check"> = {
     check: async () => {
-        const cookieStore = cookies();
-        const auth = cookieStore.get("token");
+        const { data, error } =
+            await createSupabaseServerClient().auth.getUser();
+        const { user } = data;
 
-        if (auth) {
+        if (error) {
+            return {
+                authenticated: false,
+                logout: true,
+                redirectTo: "/login",
+            };
+        }
+
+        if (user) {
             return {
                 authenticated: true,
             };
diff --git a/refine-nextjs/plugins/data-provider-supabase/src/providers/auth-provider/index.ts b/refine-nextjs/plugins/data-provider-supabase/src/providers/auth-provider/index.ts
index b7f6d9fe..eaf5c1c6 100644
--- a/refine-nextjs/plugins/data-provider-supabase/src/providers/auth-provider/index.ts
+++ b/refine-nextjs/plugins/data-provider-supabase/src/providers/auth-provider/index.ts
@@ -1,2 +1,2 @@
-export * from './auth-provider'
-export * from './auth-provider.server'
+export * from "./auth-provider.client";
+export * from "./auth-provider.server";
diff --git a/refine-nextjs/plugins/data-provider-supabase/src/providers/data-provider/index.ts b/refine-nextjs/plugins/data-provider-supabase/src/providers/data-provider/index.ts
index afe23fac..d18fb139 100644
--- a/refine-nextjs/plugins/data-provider-supabase/src/providers/data-provider/index.ts
+++ b/refine-nextjs/plugins/data-provider-supabase/src/providers/data-provider/index.ts
@@ -1,6 +1,6 @@
 "use client";
 
 import { dataProvider as dataProviderSupabase } from "@refinedev/supabase";
-import { supabaseClient } from "@utility/supabase-client";
+import { supabaseBrowserClient } from "@utils/supabase/client";
 
-export const dataProvider = dataProviderSupabase(supabaseClient);
+export const dataProvider = dataProviderSupabase(supabaseBrowserClient);
diff --git a/refine-nextjs/plugins/data-provider-supabase/src/utility/supabase-client.ts b/refine-nextjs/plugins/data-provider-supabase/src/utility/supabase-client.ts
deleted file mode 100644
index 595273b8..00000000
--- a/refine-nextjs/plugins/data-provider-supabase/src/utility/supabase-client.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { createClient } from "@refinedev/supabase";
-
-const SUPABASE_URL = "https://iwdfzvfqbtokqetmbmbp.supabase.co";
-const SUPABASE_KEY =
-    "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJyb2xlIjoiYW5vbiIsImlhdCI6MTYzMDU2NzAxMCwiZXhwIjoxOTQ2MTQzMDEwfQ._gr6kXGkQBi9BM9dx5vKaNKYj_DJN1xlkarprGpM_fU";
-
-export const supabaseClient = createClient(SUPABASE_URL, SUPABASE_KEY, {
-    db: {
-        schema: "public",
-    },
-    auth: {
-        persistSession: true,
-    },
-});
diff --git a/refine-nextjs/plugins/data-provider-supabase/src/utils/supabase/client.ts b/refine-nextjs/plugins/data-provider-supabase/src/utils/supabase/client.ts
new file mode 100644
index 00000000..b7aa1741
--- /dev/null
+++ b/refine-nextjs/plugins/data-provider-supabase/src/utils/supabase/client.ts
@@ -0,0 +1,12 @@
+import { createBrowserClient } from "@supabase/ssr";
+import { SUPABASE_KEY, SUPABASE_URL } from "./constants";
+
+export const supabaseBrowserClient = createBrowserClient(
+    SUPABASE_URL,
+    SUPABASE_KEY,
+    {
+        db: {
+            schema: "public",
+        },
+    },
+);
diff --git a/refine-nextjs/plugins/data-provider-supabase/src/utils/supabase/constants.ts b/refine-nextjs/plugins/data-provider-supabase/src/utils/supabase/constants.ts
new file mode 100644
index 00000000..84d1dd96
--- /dev/null
+++ b/refine-nextjs/plugins/data-provider-supabase/src/utils/supabase/constants.ts
@@ -0,0 +1,3 @@
+export const SUPABASE_URL = "https://iwdfzvfqbtokqetmbmbp.supabase.co";
+export const SUPABASE_KEY =
+    "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJyb2xlIjoiYW5vbiIsImlhdCI6MTYzMDU2NzAxMCwiZXhwIjoxOTQ2MTQzMDEwfQ._gr6kXGkQBi9BM9dx5vKaNKYj_DJN1xlkarprGpM_fU";
diff --git a/refine-nextjs/plugins/data-provider-supabase/src/utils/supabase/middleware.ts b/refine-nextjs/plugins/data-provider-supabase/src/utils/supabase/middleware.ts
new file mode 100644
index 00000000..0329db12
--- /dev/null
+++ b/refine-nextjs/plugins/data-provider-supabase/src/utils/supabase/middleware.ts
@@ -0,0 +1,57 @@
+import { CookieOptions, createServerClient } from "@supabase/ssr";
+import { NextRequest, NextResponse } from "next/server";
+import { SUPABASE_KEY, SUPABASE_URL } from "./constants";
+
+export async function updateSession(request: NextRequest) {
+    let response = NextResponse.next({
+        request: {
+            headers: request.headers,
+        },
+    });
+
+    const supabase = createServerClient(SUPABASE_URL, SUPABASE_KEY, {
+        cookies: {
+            get(name: string) {
+                return request.cookies.get(name)?.value;
+            },
+            set(name: string, value: string, options: CookieOptions) {
+                request.cookies.set({
+                    name,
+                    value,
+                    ...options,
+                });
+                response = NextResponse.next({
+                    request: {
+                        headers: request.headers,
+                    },
+                });
+                response.cookies.set({
+                    name,
+                    value,
+                    ...options,
+                });
+            },
+            remove(name: string, options: CookieOptions) {
+                request.cookies.set({
+                    name,
+                    value: "",
+                    ...options,
+                });
+                response = NextResponse.next({
+                    request: {
+                        headers: request.headers,
+                    },
+                });
+                response.cookies.set({
+                    name,
+                    value: "",
+                    ...options,
+                });
+            },
+        },
+    });
+
+    await supabase.auth.getUser();
+
+    return response;
+}
diff --git a/refine-nextjs/plugins/data-provider-supabase/src/utils/supabase/server.ts b/refine-nextjs/plugins/data-provider-supabase/src/utils/supabase/server.ts
new file mode 100644
index 00000000..8d82907c
--- /dev/null
+++ b/refine-nextjs/plugins/data-provider-supabase/src/utils/supabase/server.ts
@@ -0,0 +1,33 @@
+import { CookieOptions, createServerClient } from "@supabase/ssr";
+import { cookies } from "next/headers";
+import { SUPABASE_KEY, SUPABASE_URL } from "./constants";
+
+export const createSupabaseServerClient = () => {
+    const cookieStore = cookies();
+
+    return createServerClient(SUPABASE_URL, SUPABASE_KEY, {
+        cookies: {
+            get(name: string) {
+                return cookieStore.get(name)?.value;
+            },
+            set(name: string, value: string, options: CookieOptions) {
+                try {
+                    cookieStore.set({ name, value, ...options });
+                } catch (error) {
+                    // The `set` method was called from a Server Component.
+                    // This can be ignored if you have middleware refreshing
+                    // user sessions.
+                }
+            },
+            remove(name: string, options: CookieOptions) {
+                try {
+                    cookieStore.set({ name, value: "", ...options });
+                } catch (error) {
+                    // The `delete` method was called from a Server Component.
+                    // This can be ignored if you have middleware refreshing
+                    // user sessions.
+                }
+            },
+        },
+    });
+};
diff --git a/refine-nextjs/plugins/mui-example/src/app/blog-posts/show/[id]/page.tsx b/refine-nextjs/plugins/mui-example/src/app/blog-posts/show/[id]/page.tsx
index df081ba7..f0d9c468 100644
--- a/refine-nextjs/plugins/mui-example/src/app/blog-posts/show/[id]/page.tsx
+++ b/refine-nextjs/plugins/mui-example/src/app/blog-posts/show/[id]/page.tsx
@@ -62,7 +62,7 @@ export default function BlogPostShow() {
                 <Typography variant="body1" fontWeight="bold">
                     {"ID"}
                 </Typography>
-                <NumberField value={record?.id ?? ""} />
+                <TextField value={record?.id} />
 
                 <Typography variant="body1" fontWeight="bold">
                     {"Title"}
diff --git a/refine-nextjs/plugins/mui-example/src/app/categories/show/[id]/page.tsx b/refine-nextjs/plugins/mui-example/src/app/categories/show/[id]/page.tsx
index b76278cd..472803c1 100644
--- a/refine-nextjs/plugins/mui-example/src/app/categories/show/[id]/page.tsx
+++ b/refine-nextjs/plugins/mui-example/src/app/categories/show/[id]/page.tsx
@@ -37,7 +37,7 @@ export default function CategoryShow() {
                 <Typography variant="body1" fontWeight="bold">
                     {"ID"}
                 </Typography>
-                <NumberField value={record?.id ?? ""} />
+                <TextField value={record?.id} />
                 <Typography variant="body1" fontWeight="bold">
                     {"Title"}
                 </Typography>
diff --git a/refine-remix/plugins/antd-example/app/routes/_layout.blog-posts.show.$id.tsx b/refine-remix/plugins/antd-example/app/routes/_layout.blog-posts.show.$id.tsx
index f6d5bbb5..c51020ae 100644
--- a/refine-remix/plugins/antd-example/app/routes/_layout.blog-posts.show.$id.tsx
+++ b/refine-remix/plugins/antd-example/app/routes/_layout.blog-posts.show.$id.tsx
@@ -57,7 +57,7 @@ export default function BlogPostShow() {
   return (
       <Show isLoading={isLoading}>
           <Title level={5}>{"ID"}</Title>
-          <NumberField value={record?.id ?? ""} />
+          <TextField value={record?.id} />
           <Title level={5}>{"Title"}</Title>
           <TextField value={record?.title} />
           <Title level={5}>{"Content"}</Title>
diff --git a/refine-remix/plugins/antd-example/app/routes/_layout.categories.show.$id.tsx b/refine-remix/plugins/antd-example/app/routes/_layout.categories.show.$id.tsx
index d5679cee..7abddffd 100644
--- a/refine-remix/plugins/antd-example/app/routes/_layout.categories.show.$id.tsx
+++ b/refine-remix/plugins/antd-example/app/routes/_layout.categories.show.$id.tsx
@@ -31,7 +31,7 @@ export default function CategoryShow() {
     return (
         <Show isLoading={isLoading}>
             <Title level={5}>{"ID"}</Title>
-            <NumberField value={record?.id ?? ""} />
+            <TextField value={record?.id} />
             <Title level={5}>{"Title"}</Title>
             <TextField value={record?.title} />
         </Show>
diff --git a/refine-remix/plugins/antd-example/app/routes/_layout.tsx b/refine-remix/plugins/antd-example/app/routes/_layout.tsx
index ff0daf3f..241350a9 100644
--- a/refine-remix/plugins/antd-example/app/routes/_layout.tsx
+++ b/refine-remix/plugins/antd-example/app/routes/_layout.tsx
@@ -2,13 +2,13 @@ import { ThemedLayoutV2, ThemedSiderV2 } from "@refinedev/antd";
 import { Outlet } from "@remix-run/react";
 import { Header } from "~/components/header";
 <%_ if (_app.isAuthProviderCheck) { _%>
-    import type { LoaderArgs } from "@remix-run/node";
+    import type { LoaderFunctionArgs } from "@remix-run/node";
     import { redirect } from "@remix-run/node";
     import { authProvider } from "~/authProvider";
 <%_ } _%>
 
 <%_ if (_app.isNextAuthCheck) { _%>
-    import type { LoaderArgs } from "@remix-run/node";
+    import type { LoaderFunctionArgs } from "@remix-run/node";
     import { redirect } from "@remix-run/node";
     import { authenticator } from "~/utils/auth.server";
 <%_ } _%>
@@ -31,7 +31,7 @@ export default function BaseLayout() {
      * If not, we're redirecting the user to the login page.
      * This is applied for all routes that are nested under this layout (_protected).
      */
-    export async function loader({ request }: LoaderArgs) {
+    export async function loader({ request }: LoaderFunctionArgs) {
     const { authenticated, redirectTo } = await authProvider.check(request);
     
     if (!authenticated) {
@@ -48,7 +48,7 @@ export default function BaseLayout() {
  * If not, we're redirecting the user to the login page.
  * This is applied for all routes that are nested under this layout (_protected).
  */
-export const loader = async ({ request }: LoaderArgs) => {
+export const loader = async ({ request }: LoaderFunctionArgs) => {
     const session = await authenticator.isAuthenticated(request);
     const pathname = new URL(request.url).pathname;
 
diff --git a/refine-remix/plugins/auth-provider-auth0/app/routes/_auth.tsx b/refine-remix/plugins/auth-provider-auth0/app/routes/_auth.tsx
index ed2bd56f..2002e5a0 100644
--- a/refine-remix/plugins/auth-provider-auth0/app/routes/_auth.tsx
+++ b/refine-remix/plugins/auth-provider-auth0/app/routes/_auth.tsx
@@ -1,5 +1,5 @@
 import { Outlet } from "@remix-run/react";
-import { LoaderArgs, redirect } from "@remix-run/node";
+import { LoaderFunctionArgs, redirect } from "@remix-run/node";
 import { authenticator } from "~/utils/auth.server";
 
 export default function AuthLayout() {
@@ -7,7 +7,7 @@ export default function AuthLayout() {
     return <Outlet />;
 }
 
-export const loader = async ({ request }: LoaderArgs) => {
+export const loader = async ({ request }: LoaderFunctionArgs) => {
     const session = await authenticator.isAuthenticated(request);
 
     if (session) {
diff --git a/refine-remix/plugins/auth-provider-auth0/app/routes/_layout.tsx b/refine-remix/plugins/auth-provider-auth0/app/routes/_layout.tsx
index 72303249..d5551222 100644
--- a/refine-remix/plugins/auth-provider-auth0/app/routes/_layout.tsx
+++ b/refine-remix/plugins/auth-provider-auth0/app/routes/_layout.tsx
@@ -1,5 +1,5 @@
 import { Outlet } from "@remix-run/react";
-import type { LoaderArgs } from "@remix-run/node";
+import type { LoaderFunctionArgs } from "@remix-run/node";
 import { redirect } from "@remix-run/node";
 <%_ if (answers["ui-framework"] === 'antd') { _%>
 import {
@@ -46,7 +46,7 @@ export default function BaseLayout() {
  * If not, we're redirecting the user to the login page.
  * This is applied for all routes that are nested under this layout (_protected).
  */
-export const loader = async ({ request }: LoaderArgs) => {
+export const loader = async ({ request }: LoaderFunctionArgs) => {
     const session = await authenticator.isAuthenticated(request);
     const pathname = new URL(request.url).pathname;
 
diff --git a/refine-remix/plugins/auth-provider-auth0/app/routes/auth.auth0._index.tsx b/refine-remix/plugins/auth-provider-auth0/app/routes/auth.auth0._index.tsx
index a06db405..d6b33a15 100644
--- a/refine-remix/plugins/auth-provider-auth0/app/routes/auth.auth0._index.tsx
+++ b/refine-remix/plugins/auth-provider-auth0/app/routes/auth.auth0._index.tsx
@@ -1,4 +1,4 @@
-import type { LoaderArgs, ActionArgs } from "@remix-run/node";
+import type { LoaderFunctionArgs, ActionArgs } from "@remix-run/node";
 import { authenticator } from "~/utils/auth.server";
 
 export const action = async ({ request }: ActionArgs) => {
@@ -7,7 +7,7 @@ export const action = async ({ request }: ActionArgs) => {
     });
 };
 
-export const loader = async ({ request }: LoaderArgs) => {
+export const loader = async ({ request }: LoaderFunctionArgs) => {
     await authenticator.authenticate("auth0", request, {
         failureRedirect: "/login",
     });
diff --git a/refine-remix/plugins/auth-provider-auth0/app/routes/auth.auth0.callback.tsx b/refine-remix/plugins/auth-provider-auth0/app/routes/auth.auth0.callback.tsx
index 0c915972..aefd7c0a 100644
--- a/refine-remix/plugins/auth-provider-auth0/app/routes/auth.auth0.callback.tsx
+++ b/refine-remix/plugins/auth-provider-auth0/app/routes/auth.auth0.callback.tsx
@@ -1,8 +1,8 @@
-import type { LoaderArgs } from "@remix-run/node";
+import type { LoaderFunctionArgs } from "@remix-run/node";
 
 import { authenticator } from "~/utils/auth.server";
 
-export const loader = ({ request }: LoaderArgs) => {
+export const loader = ({ request }: LoaderFunctionArgs) => {
     return authenticator.authenticate("auth0", request, {
         failureRedirect: "/login",
         successRedirect: "http://localhost:3000/",
diff --git a/refine-remix/plugins/auth-provider-auth0/app/routes/auth.logout.tsx b/refine-remix/plugins/auth-provider-auth0/app/routes/auth.logout.tsx
index ded573e8..f488a38a 100644
--- a/refine-remix/plugins/auth-provider-auth0/app/routes/auth.logout.tsx
+++ b/refine-remix/plugins/auth-provider-auth0/app/routes/auth.logout.tsx
@@ -1,10 +1,10 @@
-import type { LoaderArgs } from "@remix-run/node";
+import type { LoaderFunctionArgs } from "@remix-run/node";
 
 import { redirect } from "@remix-run/node";
 
 import { destroySession, getSession } from "~/services/session.server";
 
-export const loader = async ({ request }: LoaderArgs) => {
+export const loader = async ({ request }: LoaderFunctionArgs) => {
     const session = await getSession(request.headers.get("Cookie"));
     return redirect(`/`, {
         headers: {
diff --git a/refine-remix/plugins/auth-provider-auth0/extend.js b/refine-remix/plugins/auth-provider-auth0/extend.js
index 19e7181d..e5fd8774 100644
--- a/refine-remix/plugins/auth-provider-auth0/extend.js
+++ b/refine-remix/plugins/auth-provider-auth0/extend.js
@@ -1,7 +1,7 @@
 const base = {
     _app: {
         localImport: [
-            `import type { LoaderArgs } from "@remix-run/node";`,
+            `import type { LoaderFunctionArgs } from "@remix-run/node";`,
             `import { json } from "@remix-run/node";`,
             `import { authenticator } from "~/utils/auth.server";`,
         ],
@@ -10,7 +10,7 @@ const base = {
         refineAntdImports: [],
         refineMuiImports: [],
         loader: [
-            `export const loader = async ({ request }: LoaderArgs) => {
+            `export const loader = async ({ request }: LoaderFunctionArgs) => {
                 const profile = await authenticator.isAuthenticated(request);
                 const to = new URL(request.url).searchParams.get("to");
                 return json({ profile, to });
diff --git a/refine-remix/plugins/auth-provider-custom/app/routes/_auth.tsx b/refine-remix/plugins/auth-provider-custom/app/routes/_auth.tsx
index 20bddd50..b02d21f9 100644
--- a/refine-remix/plugins/auth-provider-custom/app/routes/_auth.tsx
+++ b/refine-remix/plugins/auth-provider-custom/app/routes/_auth.tsx
@@ -1,6 +1,6 @@
 import { Outlet } from "@remix-run/react";
 import { redirect } from "@remix-run/node";
-import type { LoaderArgs } from "@remix-run/node";
+import type { LoaderFunctionArgs } from "@remix-run/node";
 
 import { authProvider } from "~/authProvider";
 
@@ -14,7 +14,7 @@ export default function AuthLayout() {
  * Alternatively, we could also use the `Authenticated` component inside the `AuthLayout` to handle the redirect.
  * But, server-side redirects are more performant.
  */
-export async function loader({ request }: LoaderArgs) {
+export async function loader({ request }: LoaderFunctionArgs) {
     const { authenticated, redirectTo } = await authProvider.check(request);
 
     if (authenticated) {
diff --git a/refine-remix/plugins/auth-provider-custom/app/routes/_layout.tsx b/refine-remix/plugins/auth-provider-custom/app/routes/_layout.tsx
index 1db3bb1a..458c28b2 100644
--- a/refine-remix/plugins/auth-provider-custom/app/routes/_layout.tsx
+++ b/refine-remix/plugins/auth-provider-custom/app/routes/_layout.tsx
@@ -1,5 +1,5 @@
 import { Outlet } from "@remix-run/react";
-import type { LoaderArgs } from "@remix-run/node";
+import type { LoaderFunctionArgs } from "@remix-run/node";
 import { redirect } from "@remix-run/node";
 <%_ if (answers["ui-framework"] === 'antd') { _%>
 import {
@@ -45,7 +45,7 @@ export default function BaseLayout() {
  * If not, we're redirecting the user to the login page.
  * This is applied for all routes that are nested under this layout (_protected).
  */
-export async function loader({ request }: LoaderArgs) {
+export async function loader({ request }: LoaderFunctionArgs) {
     const { authenticated, redirectTo } = await authProvider.check(request);
 
     if (!authenticated) {
diff --git a/refine-remix/plugins/auth-provider-google/app/routes/_auth.tsx b/refine-remix/plugins/auth-provider-google/app/routes/_auth.tsx
index ed2bd56f..2002e5a0 100644
--- a/refine-remix/plugins/auth-provider-google/app/routes/_auth.tsx
+++ b/refine-remix/plugins/auth-provider-google/app/routes/_auth.tsx
@@ -1,5 +1,5 @@
 import { Outlet } from "@remix-run/react";
-import { LoaderArgs, redirect } from "@remix-run/node";
+import { LoaderFunctionArgs, redirect } from "@remix-run/node";
 import { authenticator } from "~/utils/auth.server";
 
 export default function AuthLayout() {
@@ -7,7 +7,7 @@ export default function AuthLayout() {
     return <Outlet />;
 }
 
-export const loader = async ({ request }: LoaderArgs) => {
+export const loader = async ({ request }: LoaderFunctionArgs) => {
     const session = await authenticator.isAuthenticated(request);
 
     if (session) {
diff --git a/refine-remix/plugins/auth-provider-google/app/routes/_layout.tsx b/refine-remix/plugins/auth-provider-google/app/routes/_layout.tsx
index 5bdeafe3..1cfda995 100644
--- a/refine-remix/plugins/auth-provider-google/app/routes/_layout.tsx
+++ b/refine-remix/plugins/auth-provider-google/app/routes/_layout.tsx
@@ -1,5 +1,5 @@
 import { Outlet } from "@remix-run/react";
-import type { LoaderArgs } from "@remix-run/node";
+import type { LoaderFunctionArgs } from "@remix-run/node";
 import { redirect } from "@remix-run/node";
 <%_ if (answers["ui-framework"] === 'antd') { _%>
 import {
@@ -45,7 +45,7 @@ export default function BaseLayout() {
  * If not, we're redirecting the user to the login page.
  * This is applied for all routes that are nested under this layout (_protected).
  */
-export const loader = async ({ request }: LoaderArgs) => {
+export const loader = async ({ request }: LoaderFunctionArgs) => {
     const session = await authenticator.isAuthenticated(request);
     const pathname = new URL(request.url).pathname;
 
diff --git a/refine-remix/plugins/auth-provider-google/app/routes/auth.google._index.tsx b/refine-remix/plugins/auth-provider-google/app/routes/auth.google._index.tsx
index 11e3682c..283f3828 100644
--- a/refine-remix/plugins/auth-provider-google/app/routes/auth.google._index.tsx
+++ b/refine-remix/plugins/auth-provider-google/app/routes/auth.google._index.tsx
@@ -1,4 +1,4 @@
-import type { LoaderArgs, ActionArgs } from "@remix-run/node";
+import type { LoaderFunctionArgs, ActionArgs } from "@remix-run/node";
 import { authenticator } from "~/utils/auth.server";
 
 export const action = async ({ request }: ActionArgs) => {
@@ -7,7 +7,7 @@ export const action = async ({ request }: ActionArgs) => {
     });
 };
 
-export const loader = async ({ request }: LoaderArgs) => {
+export const loader = async ({ request }: LoaderFunctionArgs) => {
     await authenticator.authenticate("google", request, {
         failureRedirect: "/login",
     });
diff --git a/refine-remix/plugins/auth-provider-google/app/routes/auth.google.callback.tsx b/refine-remix/plugins/auth-provider-google/app/routes/auth.google.callback.tsx
index 883884a3..29466a97 100644
--- a/refine-remix/plugins/auth-provider-google/app/routes/auth.google.callback.tsx
+++ b/refine-remix/plugins/auth-provider-google/app/routes/auth.google.callback.tsx
@@ -1,8 +1,8 @@
-import type { LoaderArgs } from "@remix-run/node";
+import type { LoaderFunctionArgs } from "@remix-run/node";
 
 import { authenticator } from "~/utils/auth.server";
 
-export const loader = ({ request }: LoaderArgs) => {
+export const loader = ({ request }: LoaderFunctionArgs) => {
     return authenticator.authenticate("google", request, {
         failureRedirect: "/login",
         successRedirect: "http://localhost:3000/",
diff --git a/refine-remix/plugins/auth-provider-google/app/routes/auth.logout.tsx b/refine-remix/plugins/auth-provider-google/app/routes/auth.logout.tsx
index ded573e8..f488a38a 100644
--- a/refine-remix/plugins/auth-provider-google/app/routes/auth.logout.tsx
+++ b/refine-remix/plugins/auth-provider-google/app/routes/auth.logout.tsx
@@ -1,10 +1,10 @@
-import type { LoaderArgs } from "@remix-run/node";
+import type { LoaderFunctionArgs } from "@remix-run/node";
 
 import { redirect } from "@remix-run/node";
 
 import { destroySession, getSession } from "~/services/session.server";
 
-export const loader = async ({ request }: LoaderArgs) => {
+export const loader = async ({ request }: LoaderFunctionArgs) => {
     const session = await getSession(request.headers.get("Cookie"));
     return redirect(`/`, {
         headers: {
diff --git a/refine-remix/plugins/auth-provider-google/extend.js b/refine-remix/plugins/auth-provider-google/extend.js
index 19e7181d..e5fd8774 100644
--- a/refine-remix/plugins/auth-provider-google/extend.js
+++ b/refine-remix/plugins/auth-provider-google/extend.js
@@ -1,7 +1,7 @@
 const base = {
     _app: {
         localImport: [
-            `import type { LoaderArgs } from "@remix-run/node";`,
+            `import type { LoaderFunctionArgs } from "@remix-run/node";`,
             `import { json } from "@remix-run/node";`,
             `import { authenticator } from "~/utils/auth.server";`,
         ],
@@ -10,7 +10,7 @@ const base = {
         refineAntdImports: [],
         refineMuiImports: [],
         loader: [
-            `export const loader = async ({ request }: LoaderArgs) => {
+            `export const loader = async ({ request }: LoaderFunctionArgs) => {
                 const profile = await authenticator.isAuthenticated(request);
                 const to = new URL(request.url).searchParams.get("to");
                 return json({ profile, to });
diff --git a/refine-remix/plugins/auth-provider-keycloak/app/routes/_auth.tsx b/refine-remix/plugins/auth-provider-keycloak/app/routes/_auth.tsx
index ed2bd56f..2002e5a0 100644
--- a/refine-remix/plugins/auth-provider-keycloak/app/routes/_auth.tsx
+++ b/refine-remix/plugins/auth-provider-keycloak/app/routes/_auth.tsx
@@ -1,5 +1,5 @@
 import { Outlet } from "@remix-run/react";
-import { LoaderArgs, redirect } from "@remix-run/node";
+import { LoaderFunctionArgs, redirect } from "@remix-run/node";
 import { authenticator } from "~/utils/auth.server";
 
 export default function AuthLayout() {
@@ -7,7 +7,7 @@ export default function AuthLayout() {
     return <Outlet />;
 }
 
-export const loader = async ({ request }: LoaderArgs) => {
+export const loader = async ({ request }: LoaderFunctionArgs) => {
     const session = await authenticator.isAuthenticated(request);
 
     if (session) {
diff --git a/refine-remix/plugins/auth-provider-keycloak/app/routes/_layout.tsx b/refine-remix/plugins/auth-provider-keycloak/app/routes/_layout.tsx
index 5bdeafe3..1cfda995 100644
--- a/refine-remix/plugins/auth-provider-keycloak/app/routes/_layout.tsx
+++ b/refine-remix/plugins/auth-provider-keycloak/app/routes/_layout.tsx
@@ -1,5 +1,5 @@
 import { Outlet } from "@remix-run/react";
-import type { LoaderArgs } from "@remix-run/node";
+import type { LoaderFunctionArgs } from "@remix-run/node";
 import { redirect } from "@remix-run/node";
 <%_ if (answers["ui-framework"] === 'antd') { _%>
 import {
@@ -45,7 +45,7 @@ export default function BaseLayout() {
  * If not, we're redirecting the user to the login page.
  * This is applied for all routes that are nested under this layout (_protected).
  */
-export const loader = async ({ request }: LoaderArgs) => {
+export const loader = async ({ request }: LoaderFunctionArgs) => {
     const session = await authenticator.isAuthenticated(request);
     const pathname = new URL(request.url).pathname;
 
diff --git a/refine-remix/plugins/auth-provider-keycloak/app/routes/auth.keycloak._index.tsx b/refine-remix/plugins/auth-provider-keycloak/app/routes/auth.keycloak._index.tsx
index a630a31e..099c1b20 100644
--- a/refine-remix/plugins/auth-provider-keycloak/app/routes/auth.keycloak._index.tsx
+++ b/refine-remix/plugins/auth-provider-keycloak/app/routes/auth.keycloak._index.tsx
@@ -1,4 +1,4 @@
-import type { LoaderArgs, ActionArgs } from "@remix-run/node";
+import type { LoaderFunctionArgs, ActionArgs } from "@remix-run/node";
 import { authenticator } from "~/utils/auth.server";
 
 export const action = async ({ request }: ActionArgs) => {
@@ -7,7 +7,7 @@ export const action = async ({ request }: ActionArgs) => {
     });
 };
 
-export const loader = async ({ request }: LoaderArgs) => {
+export const loader = async ({ request }: LoaderFunctionArgs) => {
     await authenticator.authenticate("keycloak", request, {
         failureRedirect: "/login",
     });
diff --git a/refine-remix/plugins/auth-provider-keycloak/app/routes/auth.keycloak.callback.tsx b/refine-remix/plugins/auth-provider-keycloak/app/routes/auth.keycloak.callback.tsx
index 034d3bc5..3d887210 100644
--- a/refine-remix/plugins/auth-provider-keycloak/app/routes/auth.keycloak.callback.tsx
+++ b/refine-remix/plugins/auth-provider-keycloak/app/routes/auth.keycloak.callback.tsx
@@ -1,8 +1,8 @@
-import type { LoaderArgs } from "@remix-run/node";
+import type { LoaderFunctionArgs } from "@remix-run/node";
 
 import { authenticator } from "~/utils/auth.server";
 
-export const loader = ({ request }: LoaderArgs) => {
+export const loader = ({ request }: LoaderFunctionArgs) => {
     return authenticator.authenticate("keycloak", request, {
         failureRedirect: "/login",
         successRedirect: "http://localhost:3000/",
diff --git a/refine-remix/plugins/auth-provider-keycloak/app/routes/auth.logout.tsx b/refine-remix/plugins/auth-provider-keycloak/app/routes/auth.logout.tsx
index ded573e8..f488a38a 100644
--- a/refine-remix/plugins/auth-provider-keycloak/app/routes/auth.logout.tsx
+++ b/refine-remix/plugins/auth-provider-keycloak/app/routes/auth.logout.tsx
@@ -1,10 +1,10 @@
-import type { LoaderArgs } from "@remix-run/node";
+import type { LoaderFunctionArgs } from "@remix-run/node";
 
 import { redirect } from "@remix-run/node";
 
 import { destroySession, getSession } from "~/services/session.server";
 
-export const loader = async ({ request }: LoaderArgs) => {
+export const loader = async ({ request }: LoaderFunctionArgs) => {
     const session = await getSession(request.headers.get("Cookie"));
     return redirect(`/`, {
         headers: {
diff --git a/refine-remix/plugins/auth-provider-keycloak/extend.js b/refine-remix/plugins/auth-provider-keycloak/extend.js
index 19e7181d..e5fd8774 100644
--- a/refine-remix/plugins/auth-provider-keycloak/extend.js
+++ b/refine-remix/plugins/auth-provider-keycloak/extend.js
@@ -1,7 +1,7 @@
 const base = {
     _app: {
         localImport: [
-            `import type { LoaderArgs } from "@remix-run/node";`,
+            `import type { LoaderFunctionArgs } from "@remix-run/node";`,
             `import { json } from "@remix-run/node";`,
             `import { authenticator } from "~/utils/auth.server";`,
         ],
@@ -10,7 +10,7 @@ const base = {
         refineAntdImports: [],
         refineMuiImports: [],
         loader: [
-            `export const loader = async ({ request }: LoaderArgs) => {
+            `export const loader = async ({ request }: LoaderFunctionArgs) => {
                 const profile = await authenticator.isAuthenticated(request);
                 const to = new URL(request.url).searchParams.get("to");
                 return json({ profile, to });
diff --git a/refine-remix/plugins/data-provider-appwrite/app/routes/_auth.tsx b/refine-remix/plugins/data-provider-appwrite/app/routes/_auth.tsx
index 20bddd50..b02d21f9 100644
--- a/refine-remix/plugins/data-provider-appwrite/app/routes/_auth.tsx
+++ b/refine-remix/plugins/data-provider-appwrite/app/routes/_auth.tsx
@@ -1,6 +1,6 @@
 import { Outlet } from "@remix-run/react";
 import { redirect } from "@remix-run/node";
-import type { LoaderArgs } from "@remix-run/node";
+import type { LoaderFunctionArgs } from "@remix-run/node";
 
 import { authProvider } from "~/authProvider";
 
@@ -14,7 +14,7 @@ export default function AuthLayout() {
  * Alternatively, we could also use the `Authenticated` component inside the `AuthLayout` to handle the redirect.
  * But, server-side redirects are more performant.
  */
-export async function loader({ request }: LoaderArgs) {
+export async function loader({ request }: LoaderFunctionArgs) {
     const { authenticated, redirectTo } = await authProvider.check(request);
 
     if (authenticated) {
diff --git a/refine-remix/plugins/data-provider-appwrite/app/routes/_layout.tsx b/refine-remix/plugins/data-provider-appwrite/app/routes/_layout.tsx
index 5b75e01c..a8310bfc 100644
--- a/refine-remix/plugins/data-provider-appwrite/app/routes/_layout.tsx
+++ b/refine-remix/plugins/data-provider-appwrite/app/routes/_layout.tsx
@@ -1,5 +1,5 @@
 import { Outlet } from "@remix-run/react";
-import type { LoaderArgs } from "@remix-run/node";
+import type { LoaderFunctionArgs } from "@remix-run/node";
 import { redirect } from "@remix-run/node";
 <%_ if (answers["ui-framework"] === 'antd') { _%>
 import {
@@ -45,7 +45,7 @@ export default function BaseLayout() {
  * If not, we're redirecting the user to the login page.
  * This is applied for all routes that are nested under this layout (_protected).
  */
-export async function loader({ request }: LoaderArgs) {
+export async function loader({ request }: LoaderFunctionArgs) {
     const { authenticated, redirectTo } = await authProvider.check(request);
 
     if (!authenticated) {
diff --git a/refine-remix/plugins/data-provider-strapi-v4/app/routes/_auth.tsx b/refine-remix/plugins/data-provider-strapi-v4/app/routes/_auth.tsx
index 20bddd50..b02d21f9 100644
--- a/refine-remix/plugins/data-provider-strapi-v4/app/routes/_auth.tsx
+++ b/refine-remix/plugins/data-provider-strapi-v4/app/routes/_auth.tsx
@@ -1,6 +1,6 @@
 import { Outlet } from "@remix-run/react";
 import { redirect } from "@remix-run/node";
-import type { LoaderArgs } from "@remix-run/node";
+import type { LoaderFunctionArgs } from "@remix-run/node";
 
 import { authProvider } from "~/authProvider";
 
@@ -14,7 +14,7 @@ export default function AuthLayout() {
  * Alternatively, we could also use the `Authenticated` component inside the `AuthLayout` to handle the redirect.
  * But, server-side redirects are more performant.
  */
-export async function loader({ request }: LoaderArgs) {
+export async function loader({ request }: LoaderFunctionArgs) {
     const { authenticated, redirectTo } = await authProvider.check(request);
 
     if (authenticated) {
diff --git a/refine-remix/plugins/data-provider-strapi-v4/app/routes/_layout.tsx b/refine-remix/plugins/data-provider-strapi-v4/app/routes/_layout.tsx
index 5b75e01c..a8310bfc 100644
--- a/refine-remix/plugins/data-provider-strapi-v4/app/routes/_layout.tsx
+++ b/refine-remix/plugins/data-provider-strapi-v4/app/routes/_layout.tsx
@@ -1,5 +1,5 @@
 import { Outlet } from "@remix-run/react";
-import type { LoaderArgs } from "@remix-run/node";
+import type { LoaderFunctionArgs } from "@remix-run/node";
 import { redirect } from "@remix-run/node";
 <%_ if (answers["ui-framework"] === 'antd') { _%>
 import {
@@ -45,7 +45,7 @@ export default function BaseLayout() {
  * If not, we're redirecting the user to the login page.
  * This is applied for all routes that are nested under this layout (_protected).
  */
-export async function loader({ request }: LoaderArgs) {
+export async function loader({ request }: LoaderFunctionArgs) {
     const { authenticated, redirectTo } = await authProvider.check(request);
 
     if (!authenticated) {
diff --git a/refine-remix/plugins/data-provider-supabase/app/routes/_auth.tsx b/refine-remix/plugins/data-provider-supabase/app/routes/_auth.tsx
index 20bddd50..b02d21f9 100644
--- a/refine-remix/plugins/data-provider-supabase/app/routes/_auth.tsx
+++ b/refine-remix/plugins/data-provider-supabase/app/routes/_auth.tsx
@@ -1,6 +1,6 @@
 import { Outlet } from "@remix-run/react";
 import { redirect } from "@remix-run/node";
-import type { LoaderArgs } from "@remix-run/node";
+import type { LoaderFunctionArgs } from "@remix-run/node";
 
 import { authProvider } from "~/authProvider";
 
@@ -14,7 +14,7 @@ export default function AuthLayout() {
  * Alternatively, we could also use the `Authenticated` component inside the `AuthLayout` to handle the redirect.
  * But, server-side redirects are more performant.
  */
-export async function loader({ request }: LoaderArgs) {
+export async function loader({ request }: LoaderFunctionArgs) {
     const { authenticated, redirectTo } = await authProvider.check(request);
 
     if (authenticated) {
diff --git a/refine-remix/plugins/data-provider-supabase/app/routes/_layout.tsx b/refine-remix/plugins/data-provider-supabase/app/routes/_layout.tsx
index 5b75e01c..a8310bfc 100644
--- a/refine-remix/plugins/data-provider-supabase/app/routes/_layout.tsx
+++ b/refine-remix/plugins/data-provider-supabase/app/routes/_layout.tsx
@@ -1,5 +1,5 @@
 import { Outlet } from "@remix-run/react";
-import type { LoaderArgs } from "@remix-run/node";
+import type { LoaderFunctionArgs } from "@remix-run/node";
 import { redirect } from "@remix-run/node";
 <%_ if (answers["ui-framework"] === 'antd') { _%>
 import {
@@ -45,7 +45,7 @@ export default function BaseLayout() {
  * If not, we're redirecting the user to the login page.
  * This is applied for all routes that are nested under this layout (_protected).
  */
-export async function loader({ request }: LoaderArgs) {
+export async function loader({ request }: LoaderFunctionArgs) {
     const { authenticated, redirectTo } = await authProvider.check(request);
 
     if (!authenticated) {
diff --git a/refine-remix/plugins/headless-example/app/routes/_layout.tsx b/refine-remix/plugins/headless-example/app/routes/_layout.tsx
index f6733dda..b1d78e5d 100644
--- a/refine-remix/plugins/headless-example/app/routes/_layout.tsx
+++ b/refine-remix/plugins/headless-example/app/routes/_layout.tsx
@@ -1,13 +1,13 @@
 import { Outlet } from "@remix-run/react";
 import { Layout } from "~/components/layout";
 <%_ if (_app.isAuthProviderCheck) { _%>
-    import type { LoaderArgs } from "@remix-run/node";
+    import type { LoaderFunctionArgs } from "@remix-run/node";
     import { redirect } from "@remix-run/node";
     import { authProvider } from "~/authProvider";
 <%_ } _%>
 
 <%_ if (_app.isNextAuthCheck) { _%>
-    import type { LoaderArgs } from "@remix-run/node";
+    import type { LoaderFunctionArgs } from "@remix-run/node";
     import { redirect } from "@remix-run/node";
     import { authenticator } from "~/utils/auth.server";
 <%_ } _%>
@@ -26,7 +26,7 @@ export default function BaseLayout() {
      * If not, we're redirecting the user to the login page.
      * This is applied for all routes that are nested under this layout (_protected).
      */
-    export async function loader({ request }: LoaderArgs) {
+    export async function loader({ request }: LoaderFunctionArgs) {
     const { authenticated, redirectTo } = await authProvider.check(request);
     
     if (!authenticated) {
@@ -43,7 +43,7 @@ export default function BaseLayout() {
  * If not, we're redirecting the user to the login page.
  * This is applied for all routes that are nested under this layout (_protected).
  */
-export const loader = async ({ request }: LoaderArgs) => {
+export const loader = async ({ request }: LoaderFunctionArgs) => {
     const session = await authenticator.isAuthenticated(request);
     const pathname = new URL(request.url).pathname;
 
diff --git a/refine-remix/plugins/mui-example/app/routes/_layout.blog-posts.show.$id.tsx b/refine-remix/plugins/mui-example/app/routes/_layout.blog-posts.show.$id.tsx
index 4036862c..196c6de0 100644
--- a/refine-remix/plugins/mui-example/app/routes/_layout.blog-posts.show.$id.tsx
+++ b/refine-remix/plugins/mui-example/app/routes/_layout.blog-posts.show.$id.tsx
@@ -59,7 +59,7 @@ export default function BlogPostShow() {
                 <Typography variant="body1" fontWeight="bold">
                     {"ID"}
                 </Typography>
-                <NumberField value={record?.id ?? ""} />
+                <TextField value={record?.id} />
 
                 <Typography variant="body1" fontWeight="bold">
                     {"Title"}
diff --git a/refine-remix/plugins/mui-example/app/routes/_layout.categories.show.$id.tsx b/refine-remix/plugins/mui-example/app/routes/_layout.categories.show.$id.tsx
index 0363ecda..018d87fa 100644
--- a/refine-remix/plugins/mui-example/app/routes/_layout.categories.show.$id.tsx
+++ b/refine-remix/plugins/mui-example/app/routes/_layout.categories.show.$id.tsx
@@ -35,7 +35,7 @@ export default function CategoryShow() {
                 <Typography variant="body1" fontWeight="bold">
                     {"ID"}
                 </Typography>
-                <NumberField value={record?.id ?? ""} />
+                <TextField value={record?.id} />
                 <Typography variant="body1" fontWeight="bold">
                     {"Title"}
                 </Typography>
diff --git a/refine-remix/plugins/mui-example/app/routes/_layout.tsx b/refine-remix/plugins/mui-example/app/routes/_layout.tsx
index 0b3eb8ed..963826ba 100644
--- a/refine-remix/plugins/mui-example/app/routes/_layout.tsx
+++ b/refine-remix/plugins/mui-example/app/routes/_layout.tsx
@@ -2,13 +2,13 @@ import { ThemedLayoutV2, ThemedSiderV2 } from "@refinedev/mui";
 import { Outlet } from "@remix-run/react";
 import { Header } from "~/components/header";
 <%_ if (_app.isAuthProviderCheck) { _%>
-    import type { LoaderArgs } from "@remix-run/node";
+    import type { LoaderFunctionArgs } from "@remix-run/node";
     import { redirect } from "@remix-run/node";
     import { authProvider } from "~/authProvider";
 <%_ } _%>
 
 <%_ if (_app.isNextAuthCheck) { _%>
-    import type { LoaderArgs } from "@remix-run/node";
+    import type { LoaderFunctionArgs } from "@remix-run/node";
     import { redirect } from "@remix-run/node";
     import { authenticator } from "~/utils/auth.server";
 <%_ } _%>
@@ -31,7 +31,7 @@ export default function BaseLayout() {
      * If not, we're redirecting the user to the login page.
      * This is applied for all routes that are nested under this layout (_protected).
      */
-    export async function loader({ request }: LoaderArgs) {
+    export async function loader({ request }: LoaderFunctionArgs) {
     const { authenticated, redirectTo } = await authProvider.check(request);
     
     if (!authenticated) {
@@ -48,7 +48,7 @@ export default function BaseLayout() {
  * If not, we're redirecting the user to the login page.
  * This is applied for all routes that are nested under this layout (_protected).
  */
-export const loader = async ({ request }: LoaderArgs) => {
+export const loader = async ({ request }: LoaderFunctionArgs) => {
     const session = await authenticator.isAuthenticated(request);
     const pathname = new URL(request.url).pathname;
 
diff --git a/refine-vite/plugins/antd-example/src/pages/blog-posts/show.tsx b/refine-vite/plugins/antd-example/src/pages/blog-posts/show.tsx
index ef3867fd..9b7e718e 100644
--- a/refine-vite/plugins/antd-example/src/pages/blog-posts/show.tsx
+++ b/refine-vite/plugins/antd-example/src/pages/blog-posts/show.tsx
@@ -58,7 +58,7 @@ export const BlogPostShow = () => {
     return (
         <Show isLoading={isLoading}>
             <Title level={5}>{"ID"}</Title>
-            <NumberField value={record?.id ?? ""} />
+            <TextField value={record?.id} />
             <Title level={5}>{"Title"}</Title>
             <TextField value={record?.title} />
             <Title level={5}>{"Content"}</Title>
diff --git a/refine-vite/plugins/antd-example/src/pages/categories/show.tsx b/refine-vite/plugins/antd-example/src/pages/categories/show.tsx
index c98a4e92..e6297c6f 100644
--- a/refine-vite/plugins/antd-example/src/pages/categories/show.tsx
+++ b/refine-vite/plugins/antd-example/src/pages/categories/show.tsx
@@ -31,7 +31,7 @@ export const CategoryShow = () => {
     return (
         <Show isLoading={isLoading}>
             <Title level={5}>{"ID"}</Title>
-            <NumberField value={record?.id ?? ""} />
+            <TextField value={record?.id} />
             <Title level={5}>{"Title"}</Title>
             <TextField value={record?.title} />
         </Show>
diff --git a/refine-vite/plugins/mui-example/src/pages/blog-posts/show.tsx b/refine-vite/plugins/mui-example/src/pages/blog-posts/show.tsx
index a14c7713..0df95b61 100644
--- a/refine-vite/plugins/mui-example/src/pages/blog-posts/show.tsx
+++ b/refine-vite/plugins/mui-example/src/pages/blog-posts/show.tsx
@@ -60,7 +60,7 @@ export const BlogPostShow = () => {
                 <Typography variant="body1" fontWeight="bold">
                     {"ID"}
                 </Typography>
-                <NumberField value={record?.id ?? ""} />
+                <TextField value={record?.id} />
 
                 <Typography variant="body1" fontWeight="bold">
                     {"Title"}
diff --git a/refine-vite/plugins/mui-example/src/pages/categories/show.tsx b/refine-vite/plugins/mui-example/src/pages/categories/show.tsx
index ba1a19a2..28edbb8c 100644
--- a/refine-vite/plugins/mui-example/src/pages/categories/show.tsx
+++ b/refine-vite/plugins/mui-example/src/pages/categories/show.tsx
@@ -35,7 +35,7 @@ export const CategoryShow = () => {
                 <Typography variant="body1" fontWeight="bold">
                     {"ID"}
                 </Typography>
-                <NumberField value={record?.id ?? ""} />
+                <TextField value={record?.id} />
                 <Typography variant="body1" fontWeight="bold">
                     {"Title"}
                 </Typography>