Rafi Arrafif
07f86c005e
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.
75 lines
2.1 KiB
TypeScript
75 lines
2.1 KiB
TypeScript
"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 getOauthProviderList from "../lib/getOauthProviderList";
|
|
import requestOauthUrl from "../lib/requestOauthUrl";
|
|
|
|
const OAuthProviders = () => {
|
|
// Set initial state for OAuth providers list
|
|
const [oauthProvidersList, setOauthProvidersList] = useState<
|
|
OauthProviders[]
|
|
>([]);
|
|
|
|
/**
|
|
* Fetch the list of OAuth providers from backend API
|
|
* and update the state if OAuth providers list is available
|
|
*/
|
|
useEffect(() => {
|
|
(async () => {
|
|
try {
|
|
const res = (await getOauthProviderList()) as OauthProviders[];
|
|
setOauthProvidersList(res);
|
|
} catch (err) {
|
|
console.error(err);
|
|
}
|
|
})();
|
|
}, []);
|
|
|
|
/**
|
|
* 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 */}
|
|
{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} />}
|
|
onPress={() => startOauthProcess(provider.req_endpoint)}
|
|
>
|
|
Continue with {provider.name}
|
|
</Button>
|
|
);
|
|
})
|
|
) : (
|
|
<Button className="w-full" variant="ghost" isDisabled>
|
|
No login options available via third-party providers
|
|
</Button>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default OAuthProviders;
|