fix: authProvider and i18n errors on Next.js examples (#6571)

cypress/e2e/i18n-nextjs/all.cy.ts

@@ -6,6 +6,16 @@ Cypress.on("uncaught:exception", () => {
 });
 
 describe("i18n-nextjs", () => {
+  const login = () => {
+    cy.fixture("demo-auth-credentials").then((auth) => {
+      cy.get("#email").clear();
+      cy.get("#email").type(auth.email);
+      cy.get("#password").clear();
+      cy.get("#password").type(auth.password);
+    });
+    return cy.get("button[type=submit]").click();
+  };
+
   beforeEach(() => {
     cy.clearAllCookies();
     cy.clearAllLocalStorage();
@@ -16,6 +26,9 @@ describe("i18n-nextjs", () => {
   });
 
   it("should change", () => {
+    login();
+    cy.location("pathname").should("eq", "/blog-posts");
+
     cy.wait("@getBlogPosts");
 
     // check the elements are in English which is the default language
@@ -74,6 +87,9 @@ describe("i18n-nextjs", () => {
   });
 
   it("should translate notifications", () => {
+    login();
+    cy.location("pathname").should("eq", "/blog-posts");
+
     cy.visit("/blog-posts/edit/123");
 
     cy.interceptGETBlogPost();

examples/i18n-nextjs/package.json

@@ -20,6 +20,7 @@
     "@refinedev/simple-rest": "^5.0.8",
     "antd": "^5.17.0",
     "cross-env": "^7.0.3",
+    "js-cookie": "^3.0.1",
     "next": "^14.1.0",
     "next-compose-plugins": "^2.2.1",
     "next-intl": "^3.25.3",

examples/i18n-nextjs/public/locales/de/common.json

@@ -5,35 +5,43 @@
       "title": "Melden Sie sich bei Ihrem Konto an",
       "signin": "Einloggen",
       "signup": "Anmelden",
+      "register": "Registrieren",
       "divider": "oder",
       "fields": {
         "email": "Email",
         "password": "Passwort"
       },
       "errors": {
+        "requiredEmail": "Email ist erforderlich",
+        "requiredPassword": "Passwort ist erforderlich",
         "validEmail": "Ungültige E-Mail-Adresse"
       },
       "buttons": {
         "submit": "Anmeldung",
         "forgotPassword": "Passwort vergessen?",
         "noAccount": "Sie haben kein Konto?",
+        "haveAccount": "Haben Sie ein Konto?",
         "rememberMe": "Erinnere dich an mich"
       }
     },
     "forgotPassword": {
       "title": "Haben Sie Ihr Passwort vergessen?",
+      "signin": "Einloggen",
       "fields": {
         "email": "Email"
       },
       "errors": {
+        "requiredEmail": "Email ist erforderlich",
         "validEmail": "Ungültige E-Mail-Adresse"
       },
       "buttons": {
+        "haveAccount": "Haben Sie ein Konto?",
         "submit": "Anweisungen zum Zurücksetzen senden"
       }
     },
     "register": {
       "title": "Registrieren Sie sich für Ihr Konto",
+      "signin": "Einloggen",
       "fields": {
         "email": "Email",
         "password": "Passwort"
@@ -70,7 +78,10 @@
     "list": "Aufführen",
     "create": "Erstellen",
     "edit": "Bearbeiten",
-    "show": "Zeigen"
+    "show": "Zeigen",
+    "delete": "Löschen",
+    "save": "Speichern",
+    "cancel": "Abbrechen"
   },
   "buttons": {
     "create": "Erstellen",
@@ -111,28 +122,13 @@
   },
   "blog_posts": {
     "blog_posts": "Einträge",
-    "fields": {
-      "id": "Id",
-      "title": "Titel",
-      "category": "Kategorie",
-      "status": {
-        "title": "Status",
-        "published": "Veröffentlicht",
-        "draft": "Draft",
-        "rejected": "Abgelehnt"
-      },
-      "content": "Inhalh",
-      "createdAt": "Erstellt am"
+    "form": {
+      "select": {
+        "category": {
+          "placeholder": "Bitte wählen Sie eine Kategorie"
+        }
+      }
     },
-    "titles": {
-      "create": "Erstellen",
-      "edit": "Bearbeiten",
-      "list": "Einträge",
-      "show": "Eintrag zeigen"
-    }
-  },
-  "posts": {
-    "posts": "Einträge",
     "fields": {
       "id": "Id",
       "title": "Titel",

examples/i18n-nextjs/public/locales/en/common.json

@@ -5,35 +5,43 @@
       "title": "Sign in to your account",
       "signin": "Sign in",
       "signup": "Sign up",
+      "register": "Register",
       "divider": "or",
       "fields": {
         "email": "Email",
         "password": "Password"
       },
       "errors": {
+        "requiredEmail": "Email is required",
+        "requiredPassword": "Password is required",
         "validEmail": "Invalid email address"
       },
       "buttons": {
         "submit": "Login",
         "forgotPassword": "Forgot password?",
         "noAccount": "Don’t have an account?",
+        "haveAccount": "Have an account?",
         "rememberMe": "Remember me"
       }
     },
     "forgotPassword": {
       "title": "Forgot your password?",
+      "signin": "Sign in",
       "fields": {
         "email": "Email"
       },
       "errors": {
+        "requiredEmail": "Email is required",
         "validEmail": "Invalid email address"
       },
       "buttons": {
+        "haveAccount": "Have an account?",
         "submit": "Send reset instructions"
       }
     },
     "register": {
       "title": "Sign up for your account",
+      "signin": "Sign in",
       "fields": {
         "email": "Email",
         "password": "Password"
@@ -70,7 +78,10 @@
     "list": "List",
     "create": "Create",
     "edit": "Edit",
-    "show": "Show"
+    "show": "Show",
+    "delete": "Delete",
+    "save": "Save",
+    "cancel": "Cancel"
   },
   "buttons": {
     "create": "Create",
@@ -111,28 +122,13 @@
   },
   "blog_posts": {
     "blog_posts": "Blog Posts",
-    "fields": {
-      "id": "Id",
-      "title": "Title",
-      "category": "Category",
-      "status": {
-        "title": "Status",
-        "published": "Published",
-        "draft": "Draft",
-        "rejected": "Rejected"
-      },
-      "content": "Content",
-      "createdAt": "Created At"
+    "form": {
+      "select": {
+        "category": {
+          "placeholder": "Please select category"
+        }
+      }
     },
-    "titles": {
-      "create": "Create Post",
-      "edit": "Edit Post",
-      "list": "Posts",
-      "show": "Show Post"
-    }
-  },
-  "posts": {
-    "posts": "Blog Posts",
     "fields": {
       "id": "Id",
       "title": "Title",

examples/i18n-nextjs/src/app/_refine_context.tsx

@@ -8,6 +8,7 @@ import routerProvider from "@refinedev/nextjs-router";
 import React, { Suspense, type PropsWithChildren } from "react";
 import { ColorModeContextProvider } from "@contexts/color-mode";
 import { dataProvider } from "@providers/data-provider";
+import { authProviderClient } from "@providers/auth-provider/auth-provider.client";
 import { useLocale, useTranslations } from "next-intl";
 import { setUserLocale } from "@i18n";
 
@@ -20,11 +21,10 @@ export const RefineContext = ({
   children,
 }: PropsWithChildren<Props>) => {
   const t = useTranslations();
-  const locale = useLocale();
 
   const i18nProvider: I18nProvider = {
     translate: (key: string, options: any) => t(key, options),
-    getLocale: () => locale,
+    getLocale: useLocale,
     changeLocale: setUserLocale,
   };
 
@@ -38,6 +38,7 @@ export const RefineContext = ({
               routerProvider={routerProvider}
               dataProvider={dataProvider}
               notificationProvider={useNotificationProvider}
+              authProvider={authProviderClient}
               i18nProvider={i18nProvider}
               resources={[
                 {

examples/i18n-nextjs/src/app/blog-posts/create/page.tsx

@@ -1,10 +1,13 @@
 "use client";
 
 import { Create, useForm, useSelect } from "@refinedev/antd";
+import { useTranslation } from "@refinedev/core";
 import { Form, Input, Select } from "antd";
 
 export default function BlogPostCreate() {
-  const { formProps, saveButtonProps } = useForm({});
+  const { translate: t } = useTranslation();
+
+  const { formProps, saveButtonProps } = useForm();
 
   const { selectProps: categorySelectProps } = useSelect({
     resource: "categories",
@@ -14,7 +17,7 @@ export default function BlogPostCreate() {
     <Create saveButtonProps={saveButtonProps}>
       <Form {...formProps} layout="vertical">
         <Form.Item
-          label={"Title"}
+          label={t("blog_posts.fields.title")}
           name={["title"]}
           rules={[
             {
@@ -25,7 +28,7 @@ export default function BlogPostCreate() {
           <Input />
         </Form.Item>
         <Form.Item
-          label={"Content"}
+          label={t("blog_posts.fields.content")}
           name="content"
           rules={[
             {
@@ -36,18 +39,21 @@ export default function BlogPostCreate() {
           <Input.TextArea rows={5} />
         </Form.Item>
         <Form.Item
-          label={"Category"}
+          label={t("blog_posts.fields.category")}
           name={["category", "id"]}
           rules={[
             {
               required: true,
             },
           ]}
         >
-          <Select {...categorySelectProps} />
+          <Select
+            {...categorySelectProps}
+            placeholder={t("blog_posts.form.select.category.placeholder")}
+          />
         </Form.Item>
         <Form.Item
-          label={"Status"}
+          label={t("blog_posts.fields.status.title")}
           name={["status"]}
           initialValue={"draft"}
           rules={[
@@ -59,9 +65,15 @@ export default function BlogPostCreate() {
           <Select
             defaultValue={"draft"}
             options={[
-              { value: "draft", label: "Draft" },
-              { value: "published", label: "Published" },
-              { value: "rejected", label: "Rejected" },
+              { value: "draft", label: t("blog_posts.fields.status.draft") },
+              {
+                value: "published",
+                label: t("blog_posts.fields.status.published"),
+              },
+              {
+                value: "rejected",
+                label: t("blog_posts.fields.status.rejected"),
+              },
             ]}
             style={{ width: 120 }}
           />

examples/i18n-nextjs/src/app/blog-posts/edit/[id]/page.tsx

@@ -6,7 +6,7 @@ import { Form, Input, Select } from "antd";
 
 export default function BlogPostEdit() {
   const { translate: t } = useTranslation();
-  const { formProps, saveButtonProps, query: queryResult } = useForm({});
+  const { formProps, saveButtonProps, query: queryResult } = useForm();
 
   const blogPostsData = queryResult?.data?.data;
 
@@ -65,9 +65,15 @@ export default function BlogPostEdit() {
           <Select
             defaultValue={"draft"}
             options={[
-              { value: "draft", label: "Draft" },
-              { value: "published", label: "Published" },
-              { value: "rejected", label: "Rejected" },
+              { value: "draft", label: t("blog_posts.fields.status.draft") },
+              {
+                value: "published",
+                label: t("blog_posts.fields.status.published"),
+              },
+              {
+                value: "rejected",
+                label: t("blog_posts.fields.status.rejected"),
+              },
             ]}
             style={{ width: 120 }}
           />

examples/i18n-nextjs/src/app/blog-posts/layout.tsx

@@ -1,6 +1,24 @@
-import { ThemedLayout } from "@components/themed-layout";
+import { authProviderServer } from "@providers/auth-provider/auth-provider.server";
+import { ThemedLayoutV2 } from "@refinedev/antd";
+import { Header } from "@components/header";
+import { redirect } from "next/navigation";
 import React from "react";
 
 export default async function Layout({ children }: React.PropsWithChildren) {
-  return <ThemedLayout>{children}</ThemedLayout>;
+  const data = await getData();
+
+  if (!data.authenticated) {
+    return redirect(data?.redirectTo || "/login");
+  }
+
+  return <ThemedLayoutV2 Header={Header}>{children}</ThemedLayoutV2>;
+}
+
+async function getData() {
+  const { authenticated, redirectTo } = await authProviderServer.check();
+
+  return {
+    authenticated,
+    redirectTo,
+  };
 }

examples/i18n-nextjs/src/app/blog-posts/page.tsx

@@ -59,7 +59,7 @@ export default function BlogPostList() {
           render={(value: string) => {
             return (
               <Typography.Text>
-                {t(`posts.fields.status.${value}`)}
+                {t(`blog_posts.fields.status.${value}`)}
               </Typography.Text>
             );
           }}