🎨 format oauth provider list

fixing the list format on oauth login.

features/auth/lib/getGoogleAuthUrl.ts

@@ -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;

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;

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;
+}

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
+        const res = (await getOauthProviderList()) as oauthProviders[];
-        setUrlOauth(JSON.stringify(res));
+        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) => {
+      {oauthProvidersList.length > 0 ? (
-        return (
+        oauthProvidersList.map((provider, index) => {
-          <Button
+          return (
-            key={index}
+            <Button
-            className="w-full hover:bg-neutral-800"
+              key={index}
-            variant="bordered"
+              className="w-full hover:bg-neutral-800"
-            startContent={<Icon icon={provider.icon} />}
+              variant="bordered"
-          >
+              startContent={<Icon icon={provider.icon} />}
-            Continue with {provider.name}
+            >
-          </Button>
+              Continue with {provider.name}
-        );
+            </Button>
-      })}
+          );
-
+        })
-      <h1>{UrlOauth}</h1>
+      ) : (
-
-      {comingSoonProviders && (
         <Button className="w-full" variant="ghost" isDisabled>
-          Other login options will come soon
+          No login options available via third-party providers
         </Button>
       )}
     </div>