50 lines
1.5 KiB
TypeScript
50 lines
1.5 KiB
TypeScript
import { useEffect } from "react"
|
|
import { useRouter } from "next/router"
|
|
|
|
import { api } from "../../tools/api"
|
|
import { Authentication, isTokens } from "../../tools/authentication"
|
|
import type { SocialMedia } from "../design/SocialMediaButton"
|
|
import { SocialMediaButton } from "../design/SocialMediaButton"
|
|
import { providers } from "../../models/OAuth"
|
|
|
|
export const AuthenticationSocialMedia: React.FC = () => {
|
|
const router = useRouter()
|
|
|
|
const handleAuthentication = (
|
|
socialMedia: SocialMedia,
|
|
): (() => Promise<void>) => {
|
|
return async () => {
|
|
const redirect = window.location.href.replace(location.search, "")
|
|
const { data: url } = await api.get(
|
|
`/users/oauth2/${socialMedia.toLowerCase()}/signin?redirectURI=${redirect}`,
|
|
)
|
|
window.location.href = url
|
|
}
|
|
}
|
|
|
|
useEffect(() => {
|
|
const data = router.query
|
|
if (isTokens(data)) {
|
|
const authentication = new Authentication(data, true)
|
|
authentication.signin()
|
|
router.push("/application").catch(() => {})
|
|
}
|
|
}, [router])
|
|
|
|
return (
|
|
<div className="flex flex-col sm:w-full sm:items-center">
|
|
<div className="flex flex-col items-center justify-center space-y-6 sm:w-4/6 sm:flex-row sm:space-x-6 sm:space-y-0">
|
|
{providers.map((provider, index) => {
|
|
return (
|
|
<SocialMediaButton
|
|
key={index}
|
|
socialMedia={provider}
|
|
onClick={handleAuthentication(provider)}
|
|
/>
|
|
)
|
|
})}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|