diff --git a/app/(auth)/auth/callback/[...provider]/page.tsx b/app/(auth)/auth/callback/[...provider]/page.tsx
new file mode 100644
index 0000000..d80709a
--- /dev/null
+++ b/app/(auth)/auth/callback/[...provider]/page.tsx
@@ -0,0 +1,17 @@
+import React from "react";
+
+interface PageProps {
+  params: { provider: string[] };
+  searchParams: { [key: string]: string | string[] | undefined };
+}
+
+const page = ({ params, searchParams }: PageProps) => {
+  return (
+    <>
+      <h1>Nama provider: {params.provider}</h1>
+      <h1>Data provider: {JSON.stringify(searchParams)}</h1>
+    </>
+  );
+};
+
+export default page;
diff --git a/features/auth/lib/requestOauthUrl.ts b/features/auth/lib/requestOauthUrl.ts
index f1b9d21..68947c2 100644
--- a/features/auth/lib/requestOauthUrl.ts
+++ b/features/auth/lib/requestOauthUrl.ts
@@ -4,16 +4,26 @@ import { api } from "@/shared/api/connector";
 import { redirect } from "next/navigation";
 import { ResponseRequestOauthUrl } from "../types/responseRequestOauthUrl";
 
-const requestOauthUrl = async (requestEndpoint: string) => {
+const requestOauthUrl = async (providerData: {
+  name: string;
+  endpoint: string;
+}) => {
   // Check if requestEndpoint is provided, if not throw an error
-  if (!requestEndpoint) throw new Error("oAuth endpoint request not found");
+  if (!providerData.endpoint)
+    throw new Error("oAuth endpoint request not found");
 
   // Define a variable to hold the OAuth data
   let oauthData: Promise<ResponseRequestOauthUrl>;
 
   // Fetch OAuth data from the API
   try {
-    const response = await api.get(requestEndpoint);
+    const response = await api.get(providerData.endpoint, {
+      searchParams: {
+        callback: `${
+          process.env.APP_DOMAIN
+        }/auth/callback/${providerData.name.toLocaleLowerCase()}`,
+      },
+    });
     oauthData = response.json<ResponseRequestOauthUrl>();
   } catch (error) {
     throw new Error(JSON.stringify(error));
diff --git a/features/auth/ui/OAuthProviders.tsx b/features/auth/ui/OAuthProviders.tsx
index 92d0dee..d427c0a 100644
--- a/features/auth/ui/OAuthProviders.tsx
+++ b/features/auth/ui/OAuthProviders.tsx
@@ -37,13 +37,14 @@ const OAuthProviders = () => {
    *
    * @param providerRequestEndpoint The request endpoint for the OAuth provider
    */
-  const startOauthProcess = async (providerRequestEndpoint: string) => {
+  const startOauthProcess = async (providerData: {
+    name: string;
+    endpoint: string;
+  }) => {
     try {
       setLoadingButton(true);
 
-      (await requestOauthUrl(
-        providerRequestEndpoint
-      )) as ResponseRequestOauthUrl;
+      (await requestOauthUrl(providerData)) as ResponseRequestOauthUrl;
     } catch (err) {
       setLoadingButton(false);
       console.error(err);
@@ -61,7 +62,12 @@ const OAuthProviders = () => {
               className="w-full hover:bg-neutral-800"
               variant="bordered"
               startContent={<Icon className="w-4 h-4" icon={provider.icon} />}
-              onPress={() => startOauthProcess(provider.req_endpoint)}
+              onPress={() =>
+                startOauthProcess({
+                  name: provider.name,
+                  endpoint: provider.req_endpoint,
+                })
+              }
               isLoading={loadingButton}
             >
               Continue with {provider.name}