SNSログイン

1import React from 'react';
2import { SiFacebook, SiGithub, SiGoogle, SiTwitter } from 'react-icons/si';
3import Button from '../components/button';
4import {
5  FacebookAuthProvider,
6  GithubAuthProvider,
7  GoogleAuthProvider,
8  signInWithPopup,
9  TwitterAuthProvider,
10} from 'firebase/auth';
11import { auth } from '../firebase/client';
12
13const Login = () => {
14  const loginWithProvider = (
15    providerName: 'google' | 'twitter' | 'github' | 'facebook'
16  ) => {
17    const provider = {
18      google: new GoogleAuthProvider(),
19      twitter: new TwitterAuthProvider(),
20      github: new GithubAuthProvider(),
21      facebook: new FacebookAuthProvider(),
22    };
23
24    return signInWithPopup(auth, provider[providerName]);
25  };
26
27  return (
28    <div className="flex gap-4 flex-wrap">
29      <Button Icon={SiGoogle} onClick={() => loginWithProvider('google')}>
30        Google でログイン
31      </Button>
32      <Button Icon={SiTwitter} onClick={() => loginWithProvider('twitter')}>
33        Twitter でログイン
34      </Button>
35      <Button Icon={SiGithub} onClick={() => loginWithProvider('github')}>
36        GitHub でログイン
37      </Button>
38      <Button Icon={SiFacebook} onClick={() => loginWithProvider('facebook')}>
39        Facebook でログイン
40      </Button>
41    </div>
42  );
43};
44
45export default Login;