feat: firebase cloud funtions + 카카오 커스텀 로그인

.firebaserc

@@ -0,0 +1,5 @@
+{
+  "projects": {
+    "default": "react-native-firebase-17dc3"
+  }
+}

App.tsx

@@ -1,122 +1,57 @@
-import { Pressable, ScrollView, StyleSheet, Text, View } from "react-native";
-import React, { useState } from "react";
+import { Button, View } from "react-native";
+import React, { useEffect, useState } from "react";
 import {
   login,
-  logout,
   getProfile as getKakaoProfile,
-  shippingAddresses as getKakaoShippingAddresses,
-  unlink,
 } from "@react-native-seoul/kakao-login";
+import { firebase } from "@react-native-firebase/functions";
+import { authService, fireStore } from "./firebase";
 
 const App = () => {
-  const [result, setResult] = useState<string>("");
-
-  const signInWithKakao = async (): Promise<void> => {
-    try {
-      const token = await login();
-      setResult(JSON.stringify(token));
-    } catch (err) {
-      console.error("login err", err);
-    }
-  };
-
-  const signOutWithKakao = async (): Promise<void> => {
-    try {
-      const message = await logout();
-
-      setResult(message);
-    } catch (err) {
-      console.error("signOut error", err);
-    }
+  const setStoreUserInfo = async (email: string, uid: string) => {
+    const userData = {
+      displayName: email.split("@")[0],
+      email,
+      uid,
+    };
+
+    // db에 유저 정보 저장
+    await fireStore.collection("users").doc(`${uid}`).set(userData);
   };
-
-  const getProfile = async (): Promise<void> => {
+  // 카카오 로그인
+  const onKakaoButtonPress = async (): Promise<void> => {
     try {
+      const token = await login();
       const profile = await getKakaoProfile();
-
-      setResult(JSON.stringify(profile));
-    } catch (err) {
-      console.error("signOut error", err);
-    }
-  };
-
-  const getShippingAddresses = async (): Promise<void> => {
-    try {
-      const shippingAddresses = await getKakaoShippingAddresses();
-
-      setResult(JSON.stringify(shippingAddresses));
-    } catch (err) {
-      console.error("signOut error", err);
-    }
-  };
-
-  const unlinkKakao = async (): Promise<void> => {
-    try {
-      const message = await unlink();
-
-      setResult(message);
-    } catch (err) {
-      console.error("signOut error", err);
+      const userInfoData = JSON.parse(JSON.stringify(profile));
+      const { email, id } = userInfoData;
+      // 작성한 cloud 함수 호출
+      const { data } = await firebase
+        .functions()
+        .httpsCallable("customTokenLogin")({
+        email: "psb4644@gmail.com",
+        id,
+      });
+      const { firebaseToken, newUser } = data;
+      // 발급받은 커스텀 토큰으로 파이어베이스 로그인 시키기
+      const signInWithCustomTokenResult =
+        await authService.signInWithCustomToken(firebaseToken);
+      if (newUser) {
+        const kakaoEmail = `${"psb4644@gmail.com".split("@")[0]}@kakao.com`;
+        setStoreUserInfo(kakaoEmail, signInWithCustomTokenResult.user.uid); // fireStore에 신규 유저 데이터 저장하는 함수
+      }
+    } catch (error) {
+      console.log(error);
     }
   };
 
   return (
-    <View style={styles.container}>
-      <View style={styles.resultContainer}>
-        <ScrollView>
-          <Text>{result}</Text>
-          <View style={{ height: 100 }} />
-        </ScrollView>
-      </View>
-      <Pressable
-        style={styles.button}
-        onPress={() => {
-          signInWithKakao();
-        }}
-      >
-        <Text style={styles.text}>카카오 로그인</Text>
-      </Pressable>
-      <Pressable style={styles.button} onPress={() => getProfile()}>
-        <Text style={styles.text}>프로필 조회</Text>
-      </Pressable>
-      <Pressable style={styles.button} onPress={() => getShippingAddresses()}>
-        <Text style={styles.text}>배송주소록 조회</Text>
-      </Pressable>
-      <Pressable style={styles.button} onPress={() => unlinkKakao()}>
-        <Text style={styles.text}>링크 해제</Text>
-      </Pressable>
-      <Pressable style={styles.button} onPress={() => signOutWithKakao()}>
-        <Text style={styles.text}>카카오 로그아웃</Text>
-      </Pressable>
+    <View
+      style={{ height: "100%", justifyContent: "center", alignItems: "center" }}
+    >
+      <Button title="카카오 로그인" onPress={() => onKakaoButtonPress()} />
     </View>
   );
 };
 
 export default App;
-
-const styles = StyleSheet.create({
-  container: {
-    height: "100%",
-    justifyContent: "flex-end",
-    alignItems: "center",
-    paddingBottom: 100,
-  },
-  resultContainer: {
-    flexDirection: "column",
-    width: "100%",
-    padding: 24,
-  },
-  button: {
-    backgroundColor: "#FEE500",
-    borderRadius: 40,
-    borderWidth: 1,
-    width: 250,
-    height: 40,
-    paddingHorizontal: 20,
-    paddingVertical: 10,
-    marginTop: 10,
-  },
-  text: {
-    textAlign: "center",
-  },
-});

firebase.json

@@ -0,0 +1,20 @@
+{
+  "functions": [
+    {
+      "source": "functions",
+      "codebase": "default",
+      "ignore": [
+        "node_modules",
+        ".git",
+        "firebase-debug.log",
+        "firebase-debug.*.log"
+      ],
+      "rewrites": [
+        {
+          "function": "customLoginAPI"
+        }
+      ],
+      "predeploy": ["npm --prefix \"$RESOURCE_DIR\" run build"]
+    }
+  ]
+}

firebase.ts

@@ -0,0 +1,7 @@
+import { firebase } from "@react-native-firebase/auth";
+import firestore from "@react-native-firebase/firestore";
+
+// Initialize Firebase
+const authService = firebase.auth();
+const fireStore = firestore();
+export { authService, fireStore };

functions/.env

@@ -0,0 +1 @@
+SERVICE_ACCOUNT_KEY='{"type":"service_account","project_id":"react-native-firebase-17dc3","private_key_id":"eb8a4d4be5652b93af2e116d8874ff876045ad10","private_key":"-----BEGIN PRIVATE KEY-----\nMIIEuwIBADANBgkqhkiG9w0BAQEFAASCBKUwggShAgEAAoIBAQCe0zEEPV7l4N6h\nOCyxoTT2juGMyZU6RQA/tgWs5IBC4nDJrGwzlcgGUNU4rSis6FGMhoeCc2M3VYks\nyQOWIeY8lxSjRPECt+mIJT3vijzVr+qg/0JnzD095f/3+CVoBjOAT0EIZG+EbJi1\nCzRrkmt854gySVuXqa/+meTgpUL+6nSURnvXPv2yWdQDRIZqRaCX3fTJmcWLkg7S\nv5viv/Ef6BV2kvJ1lX+HE7yQpG779ZXHoiPuFtfAUW9letwPvdLDHms+0gfDylhH\nlnIzjaeGd9/hsIgQrOwdbE96kQ+8aLDH2Or+a4V4uwwdb92XKEQPTBJBHMnNT8r5\nRxg9vg79AgMBAAECggEADXUVlSdiEBZSptRsrQxcwXtvzw8RjuNj1wIkTvb5izFG\nnz/11xUc4rQcrPW3GZeBuWd4uevu/zRHMD1ECYeLy5x9iiwAQ9uzdO665b4P04dZ\nWRTn2oWqtsDzRF6JRNwppviQKRbhgBX3hneRlH/OjcHMf35JvXsKR4dgpkw6dgDj\nfhRfQaO9pzdj3/Q0Z4Bj7b6Lk5tOWSJDITeQMN9dY3NpJIyYx1AEKhiy1d0NY32+\n9EqvWSaXvtozEMfF5mm6Zgcx+DL7i6whu2zbiP6H/a/sN9sORqjYR6Dx2AEKZIH3\n2WWiKrEMcFFK9BP7NEnwFUqZi2AmJSQCJ/KqoME2/QKBgQDKNN2Z0acAjwgcbXcQ\nmaog/8/Bknz28kbbMmPfdRrbcunbCIdUOqaFiwUj06mlKCw371l8xQcinnflS8CU\n435Hh/rHMb1IgKtBthzoW4YA+qiuYxGtIdNNtIQRwtKc5A6WgveGCEN24YXDtM4K\nhZCR0jKSGwdHxJVmLIFSemuuTwKBgQDJE9sm/Rx4XlOmMGwfwekc7mGVFMXFILYB\nidQ5zbG0UYmcZZMj+VdIEyj4O+bE0sQi+M1Bsv+3GBQvGP9aND2pk6wZurNNChAh\n+cZMfXAd2JJj5LjZp8GmIgoOvjQUopTRsF2/2684P9AIN/+U0dP6vswDE8vEoxFf\ngBF9gMJG8wKBgC5EsoBD7Ma/88ctdRUjVD6AynUso9ON1JDLkvbKwP596Ozpoq2v\nTfM4wFBWWnckHhoedoeKPfu57w1UrBhlhbuwbb2ur/UrHATJOwwgBSWsNXTRznWj\nS8p4B9BYmAC2XnAqP6E3utg0+nqxoIPf1BjJ1DCCZsQRQ25BuMW6pXEZAn8DJExI\nT6wiNVcZQahu1pjN2uuraKeubNRrMbwfKxebuapsxymFZl/2wFXjiwwQBzsJUNnk\nLOfR9I5cLgfPYQGVpLkLrd8fVQjrfvuaNluKG9gtt2UsAXMFJYMCt/YYXHH21Mqi\nNMyIFHcrqbRUnvKw+Eo3whds+x9KXrXnQBvJAoGBAIk5dfsE+BAjQjGCOj+iXOwy\nHfk3xYt0AdTvBAVxu0pFwI8B/lrMFp8yYyJ7XOWQ6Mv8Lz0Kkc3jEGVRdXO3dzm/\n3X6na41xl1cm682+r29CeW2iEnBkmbuJjZlPmjDhABPIvVLcm8Wn1+ksgm0LWp8l\nUZt0nQ0b53rtaOKwSxyM\n-----END PRIVATE KEY-----\n","client_email":"firebase-adminsdk-2b752@react-native-firebase-17dc3.iam.gserviceaccount.com","client_id":"113543780596621930963","auth_uri":"https://accounts.google.com/o/oauth2/auth","token_uri":"https://oauth2.googleapis.com/token","auth_provider_x509_cert_url":"https://www.googleapis.com/oauth2/v1/certs","client_x509_cert_url":"https://www.googleapis.com/robot/v1/metadata/x509/firebase-adminsdk-2b752%40react-native-firebase-17dc3.iam.gserviceaccount.com","universe_domain":"googleapis.com"}'

functions/.gitignore

@@ -0,0 +1,9 @@
+# Compiled JavaScript files
+lib/**/*.js
+lib/**/*.js.map
+
+# TypeScript v1 declaration files
+typings/
+
+# Node.js dependency directory
+node_modules/