Microsoftログイン

1import React from 'react';
2import { OAuthProvider, signInWithPopup } from 'firebase/auth';
3import { SiMicrosoft } from 'react-icons/si';
4import { auth } from '../firebase/client';
5
6const MicrosoftLogin = () => {
7  const login = () => {
8    const provider = new OAuthProvider('microsoft.com');
9
10    signInWithPopup(auth, provider)
11      .then(() => {
12        alert('ログインしました');
13      })
14      .catch((error) => {
15        switch (error.code) {
16          case 'auth/account-exists-with-different-credential':
17            return alert('同じメールアドレスのアカウントが既に存在します');
18        }
19      });
20  };
21
22  return (
23    <div>
24      <button
25        onClick={login}
26        className="text-white bg-[#5E5E5E] px-4 py-2 rounded flex items-center space-x-2 shadow"
27      >
28        <SiMicrosoft />
29        <span>Microsoft でログイン</span>
30      </button>
31    </div>
32  );
33};
34
35export default MicrosoftLogin;