47 lines
1.2 KiB
TypeScript
47 lines
1.2 KiB
TypeScript
|
import { FacebookLogo, GithubLogo, GoogleLogo } from 'assets/logos'
|
||
|
|
import { Stack, Button } from '@chakra-ui/react'
|
||
|
|
import { signIn, useSession } from 'next-auth/react'
|
||
|
|
import React from 'react'
|
||
|
|
|
||
|
|
export const SocialLoginButtons = () => {
|
||
|
|
const { status } = useSession()
|
||
|
|
|
||
|
|
const handleGitHubClick = async () => signIn('github')
|
||
|
|
|
||
|
|
const handleGoogleClick = async () => signIn('google')
|
||
|
|
|
||
|
|
const handleFacebookClick = async () => signIn('facebook')
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Stack>
|
||
|
|
<Button
|
||
|
|
leftIcon={<GithubLogo />}
|
||
|
|
colorScheme="gray"
|
||
|
|
onClick={handleGitHubClick}
|
||
|
|
data-testid="github"
|
||
|
|
isLoading={['loading', 'authenticated'].includes(status)}
|
||
|
|
>
|
||
|
|
Continue with GitHub
|
||
|
|
</Button>
|
||
|
|
<Button
|
||
|
|
leftIcon={<GoogleLogo />}
|
||
|
|
colorScheme="gray"
|
||
|
|
onClick={handleGoogleClick}
|
||
|
|
data-testid="google"
|
||
|
|
isLoading={['loading', 'authenticated'].includes(status)}
|
||
|
|
>
|
||
|
|
Continue with Google
|
||
|
|
</Button>
|
||
|
|
<Button
|
||
|
|
leftIcon={<FacebookLogo />}
|
||
|
|
colorScheme="gray"
|
||
|
|
onClick={handleFacebookClick}
|
||
|
|
data-testid="facebook"
|
||
|
|
isLoading={['loading', 'authenticated'].includes(status)}
|
||
|
|
>
|
||
|
|
Continue with Facebook
|
||
|
|
</Button>
|
||
|
|
</Stack>
|
||
|
|
)
|
||
|
|
}
|