diff --git a/features/auth/lib/requestOauthUrl.ts b/features/auth/lib/requestOauthUrl.ts
new file mode 100644
index 0000000..f1b9d21
--- /dev/null
+++ b/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;
diff --git a/features/auth/types/oauthProvidersList.ts b/features/auth/types/oauthProvidersList.ts
index 224e0c7..1704e03 100644
--- a/features/auth/types/oauthProvidersList.ts
+++ b/features/auth/types/oauthProvidersList.ts
@@ -1,4 +1,4 @@
-interface oauthProviders {
+export interface OauthProviders {
   name: string;
   icon: string;
   req_endpoint: string;
diff --git a/features/auth/types/responseRequestOauthUrl.ts b/features/auth/types/responseRequestOauthUrl.ts
new file mode 100644
index 0000000..af7d111
--- /dev/null
+++ b/features/auth/types/responseRequestOauthUrl.ts
@@ -0,0 +1,5 @@
+export interface ResponseRequestOauthUrl {
+  data: string;
+  message: string;
+  status: string;
+}
diff --git a/features/auth/ui/OAuthProviders.tsx b/features/auth/ui/OAuthProviders.tsx
index 5349084..02ce4f8 100644
--- a/features/auth/ui/OAuthProviders.tsx
+++ b/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>