fix(docs): add auth-provider example to strapi doc (#6662)

documentation/docs/data/packages/strapi-v4/index.md

@@ -19,6 +19,7 @@ Refine supports the features that come with [Strapi-v4](https://docs.strapi.io/d
 
 A few of the Strapi-v4 API features are as follows:
 
+- Authentication
 - Fields Selection
 - Relations Population
 - Publication State
@@ -935,6 +936,146 @@ const { selectProps } = useSelect({
 });
 ```
 
+## Authentication
+
+Strapi V4 supports authentication and you can use the Refine's `authProvider` to add authentication to your application.
+
+First, we need to create own `fetch` instance to use both `authProvider` and `dataProvider`. We will use `axios` to create the `fetch` instance, however you can use any other library for this.
+
+```tsx title="src/utils/axios.ts"
+import axios from "axios";
+
+export const axiosInstance = axios.create();
+```
+
+Then, we need to give the `axiosInstance` to the `dataProvider`. Create a `dataProvider` with the `axiosInstance` and export it.
+
+```tsx title="src/dataProvider.ts"
+import { DataProvider } from "@refinedev/strapi-v4";
+import { axiosInstance } from "./utils/axios";
+import { API_URL } from "./constants";
+
+export const dataProvider = DataProvider(`${API_URL}/api`, axiosInstance);
+```
+
+Now, we are ready to create the `authProvider`.
+
+```tsx title="src/authProvider.ts"
+import { AuthHelper } from "@refinedev/strapi-v4";
+import { type AuthProvider } from "@refinedev/core";
+import { axiosInstance } from "./utils/axios";
+import { TOKEN_KEY } from "./constants";
+
+const authProvider: AuthProvider = {
+  login: async ({ email, password }) => {
+    try {
+      const { data, status } = await strapiAuthHelper.login(email, password);
+      if (status === 200) {
+        localStorage.setItem(TOKEN_KEY, data.jwt);
+
+        // set header axios instance
+        axiosInstance.defaults.headers.common[
+          "Authorization"
+        ] = `Bearer ${data.jwt}`;
+
+        return {
+          success: true,
+          redirectTo: "/",
+        };
+      }
+    } catch (error: any) {
+      const errorObj = error?.response?.data?.message?.[0]?.messages?.[0];
+      return {
+        success: false,
+        error: {
+          message: errorObj?.message || "Login failed",
+          name: errorObj?.id || "Invalid email or password",
+        },
+      };
+    }
+
+    return {
+      success: false,
+      error: {
+        message: "Login failed",
+        name: "Invalid email or password",
+      },
+    };
+  },
+  logout: async () => {
+    localStorage.removeItem(TOKEN_KEY);
+    axiosInstance.defaults.headers.common["Authorization"] = undefined;
+    return {
+      success: true,
+      redirectTo: "/login",
+    };
+  },
+  onError: async (error) => {
+    if (error.response?.status === 401) {
+      return {
+        logout: true,
+      };
+    }
+
+    return { error };
+  },
+  check: async () => {
+    const token = localStorage.getItem(TOKEN_KEY);
+    if (token) {
+      axiosInstance.defaults.headers.common[
+        "Authorization"
+      ] = `Bearer ${token}`;
+      return {
+        authenticated: true,
+      };
+    }
+
+    return {
+      authenticated: false,
+      error: {
+        message: "Authentication failed",
+        name: "Token not found",
+      },
+      logout: true,
+      redirectTo: "/login",
+    };
+  },
+  getPermissions: async () => null,
+  getIdentity: async () => {
+    const token = localStorage.getItem(TOKEN_KEY);
+    if (!token) {
+      return null;
+    }
+
+    const { data, status } = await strapiAuthHelper.me(token);
+    if (status === 200) {
+      const { id, username, email } = data;
+      return {
+        id,
+        username,
+        email,
+      };
+    }
+
+    return null;
+  },
+};
+```
+
+After creating the `authProvider`, and `dataProvider`, we need to pass it to the `Refine` component.
+
+```tsx title="src/App.tsx"
+import { Refine } from "@refinedev/core";
+import { authProvider } from "./authProvider";
+import { dataProvider } from "./dataProvider";
+
+const App = () => {
+  return <Refine authProvider={authProvider} dataProvider={dataProvider} />;
+};
+```
+
+This is the setup for authentication with Refine. Please refer to the [Authentication guide](/docs/guides-concepts/authentication/) for more information about how to use authentication with Refine.
+
 ## File Upload
 
 Strapi supports file upload. Below are examples of how to upload files to Strapi.