Merge pull request #127 from FltSv/21-social-login

#21 Googleログインの実装
FltSv · Aug 20, 2024 · 88944e5 · 88944e5
2 parents a17ac0a + a2a93fd
commit 88944e5
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 6 deletions.
diff --git a/Hosting/src/Auth.ts b/Hosting/src/Auth.ts
@@ -1,10 +1,15 @@
 import {
   createUserWithEmailAndPassword,
+  FacebookAuthProvider,
   getAuth,
+  GoogleAuthProvider,
   sendEmailVerification,
   signInWithEmailAndPassword,
+  signInWithPopup,
 } from 'firebase/auth';
 
+type providerTypes = 'google' | 'facebook' | 'email';
+
 /**
  * メール・パスワードによるログイン処理
  * @param email メールアドレス
@@ -32,6 +37,28 @@ export async function signupWithEmail(email: string, pass: string) {
   return userCredential;
 }
 
+/** Googleログイン・新規登録 */
+export async function loginWith(providerType: providerTypes) {
+  let provider;
+  switch (providerType) {
+    case 'google':
+      provider = new GoogleAuthProvider();
+      break;
+
+    case 'facebook':
+      provider = new FacebookAuthProvider();
+      break;
+
+    default:
+      throw new Error('Invalid provider type');
+  }
+
+  // ポップアップでログイン
+  return await signInWithPopup(getAuth(), provider).catch((error: unknown) => {
+    console.error(error);
+  });
+}
+
 /**
  * ログアウト
  */

diff --git a/Hosting/src/components/pages/Login.tsx b/Hosting/src/components/pages/Login.tsx
@@ -6,7 +6,7 @@ import { FcGoogle } from 'react-icons/fc';
 import { FaFacebook } from 'react-icons/fa';
 import { FirebaseError } from 'firebase/app';
 import { Button, SubmitButton, Textbox } from '../ui/Input';
-import { loginWithEmail, signupWithEmail } from '../../Auth';
+import { loginWithEmail, loginWith, signupWithEmail } from '../../Auth';
 import { useAuthContext } from '../AuthContext';
 
 interface Inputs {
@@ -147,18 +147,18 @@ export const Login = () => {
 
       {/* ソーシャルログイン */}
       <Divider className="text-base">or</Divider>
-      {/* 実装まで無効化 */}
       <div className="flex gap-4">
         <Button
-          disabled
           startDecorator={<FcGoogle />}
-          className="w-fit bg-white text-black">
+          className="w-fit bg-white text-black"
+          onClick={() => void loginWith('google')}>
           Continue with Google
         </Button>
+        {/* 法人化が必要そうなので非表示 */}
         <Button
-          disabled
           startDecorator={<FaFacebook color="#1877F2" />}
-          className="w-fit bg-white text-black">
+          className="hidden w-fit bg-white text-black"
+          onClick={() => void loginWith('facebook')}>
           Continue with Facebook
         </Button>
       </div>