diff --git a/features/auth/lib/getGoogleAuthUrl.ts b/features/auth/lib/getGoogleAuthUrl.ts
deleted file mode 100644
index aa93eca..0000000
--- a/features/auth/lib/getGoogleAuthUrl.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-"use server";
-import { api } from "@/shared/api/connector";
-
-const getGoogleAuthUrl = async () => {
-  const res = await api.get(`debug`);
-  return res.json();
-};
-
-export default getGoogleAuthUrl;
diff --git a/features/auth/lib/getOauthProviderList.ts b/features/auth/lib/getOauthProviderList.ts
new file mode 100644
index 0000000..6c154bd
--- /dev/null
+++ b/features/auth/lib/getOauthProviderList.ts
@@ -0,0 +1,9 @@
+"use server";
+import { api } from "@/shared/api/connector";
+
+const getOauthProviderList = async () => {
+  const res = await api.get(`auth/providers`);
+  return res.json();
+};
+
+export default getOauthProviderList;
diff --git a/features/auth/types/oauthProvidersList.ts b/features/auth/types/oauthProvidersList.ts
new file mode 100644
index 0000000..224e0c7
--- /dev/null
+++ b/features/auth/types/oauthProvidersList.ts
@@ -0,0 +1,8 @@
+interface oauthProviders {
+  name: string;
+  icon: string;
+  req_endpoint: string;
+  client_id: string | undefined;
+  client_secret: string | undefined;
+  client_callback: string;
+}
diff --git a/features/auth/ui/OAuthProviders.tsx b/features/auth/ui/OAuthProviders.tsx
index 7f1af46..217d262 100644
--- a/features/auth/ui/OAuthProviders.tsx
+++ b/features/auth/ui/OAuthProviders.tsx
@@ -3,57 +3,42 @@
 import { Button } from "@heroui/react";
 import { Icon } from "@iconify/react";
 import React, { useEffect, useState } from "react";
-import getGoogleAuthUrl from "../lib/getGoogleAuthUrl";
+import getOauthProviderList from "../lib/getOauthProviderList";
 
 const OAuthProviders = () => {
-  const [UrlOauth, setUrlOauth] = useState("please wait...");
+  const [oauthProvidersList, setOauthProvidersList] = useState<
+    oauthProviders[]
+  >([]);
 
   useEffect(() => {
     (async () => {
       try {
-        const res = await getGoogleAuthUrl(); // panggil server function
-        setUrlOauth(JSON.stringify(res));
+        const res = (await getOauthProviderList()) as oauthProviders[];
+        setOauthProvidersList(res);
       } catch (err) {
         console.error(err);
       }
     })();
   }, []);
 
-  // set to true if there are other providers coming soon
-  const comingSoonProviders: boolean = true;
-
-  // Provider for third-party auth
-  const oAuthProviders = [
-    {
-      name: "Google",
-      icon: "logos:google-icon",
-    },
-    {
-      name: "Discord",
-      icon: "logos:discord-icon",
-    },
-  ];
-
   return (
     <div className="w-full flex flex-col gap-2 mt-4">
-      {oAuthProviders.map((provider, index) => {
-        return (
-          <Button
-            key={index}
-            className="w-full hover:bg-neutral-800"
-            variant="bordered"
-            startContent={<Icon icon={provider.icon} />}
-          >
-            Continue with {provider.name}
-          </Button>
-        );
-      })}
-
-      <h1>{UrlOauth}</h1>
-
-      {comingSoonProviders && (
+      {oauthProvidersList.length > 0 ? (
+        oauthProvidersList.map((provider, index) => {
+          return (
+            <Button
+              key={index}
+              className="w-full hover:bg-neutral-800"
+              variant="bordered"
+              startContent={<Icon icon={provider.icon} />}
+            >
+              Continue with {provider.name}
+            </Button>
+          );
+        })
+      ) : (
         <Button className="w-full" variant="ghost" isDisabled>
-          Other login options will come soon
+          No login options available via third-party providers
         </Button>
       )}
     </div>