🚩 complete oauth process

Complete the OAuth process by adding a redirect when pressing the login button with the provider. When the button is
pressed, the system will request the authentication URL from the backend, then the user will be redirected.

features/auth/lib/requestOauthUrl.ts

@@ -0,0 +1,26 @@
+"use server";
+
+import { api } from "@/shared/api/connector";
+import { redirect } from "next/navigation";
+import { ResponseRequestOauthUrl } from "../types/responseRequestOauthUrl";
+
+const requestOauthUrl = async (requestEndpoint: string) => {
+  // Check if requestEndpoint is provided, if not throw an error
+  if (!requestEndpoint) 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);
+    oauthData = response.json<ResponseRequestOauthUrl>();
+  } catch (error) {
+    throw new Error(JSON.stringify(error));
+  }
+
+  // Redirect to the OAuth provider's authorization page
+  redirect((await oauthData).data);
+};
+
+export default requestOauthUrl;

features/auth/types/oauthProvidersList.ts

@@ -1,4 +1,4 @@
-interface oauthProviders {
+export interface OauthProviders {
   name: string;
   icon: string;
   req_endpoint: string;

features/auth/types/responseRequestOauthUrl.ts

@@ -0,0 +1,5 @@
+export interface ResponseRequestOauthUrl {
+  data: string;
+  message: string;
+  status: string;
+}

features/auth/ui/OAuthProviders.tsx

@@ -1,14 +1,18 @@
 "use client";
 
+import { OauthProviders } from "../types/oauthProvidersList";
+import { ResponseRequestOauthUrl } from "../types/responseRequestOauthUrl";
+
+import React, { useEffect, useState } from "react";
 import { Button } from "@heroui/react";
 import { Icon } from "@iconify/react";
-import React, { useEffect, useState } from "react";
 import getOauthProviderList from "../lib/getOauthProviderList";
+import requestOauthUrl from "../lib/requestOauthUrl";
 
 const OAuthProviders = () => {
   // Set initial state for OAuth providers list
   const [oauthProvidersList, setOauthProvidersList] = useState<
-    oauthProviders[]
+    OauthProviders[]
   >([]);
 
   /**
@@ -18,7 +22,7 @@ const OAuthProviders = () => {
   useEffect(() => {
     (async () => {
       try {
-        const res = (await getOauthProviderList()) as oauthProviders[];
+        const res = (await getOauthProviderList()) as OauthProviders[];
         setOauthProvidersList(res);
       } catch (err) {
         console.error(err);
@@ -26,6 +30,21 @@ const OAuthProviders = () => {
     })();
   }, []);
 
+  /**
+   * Start the authentication process using oAuth by sending the endpoint URL to the backend for processing.
+   *
+   * @param providerRequestEndpoint The request endpoint for the OAuth provider
+   */
+  const startOauthProcess = async (providerRequestEndpoint: string) => {
+    try {
+      (await requestOauthUrl(
+        providerRequestEndpoint
+      )) as ResponseRequestOauthUrl;
+    } catch (err) {
+      console.error(err);
+    }
+  };
+
   return (
     <div className="w-full flex flex-col gap-2 mt-4">
       {/* Render OAuth provider buttons */}
@@ -37,6 +56,7 @@ const OAuthProviders = () => {
               className="w-full hover:bg-neutral-800"
               variant="bordered"
               startContent={<Icon icon={provider.icon} />}
+              onPress={() => startOauthProcess(provider.req_endpoint)}
             >
               Continue with {provider.name}
             </Button>