4. 구글 로그인

.env.sample

@@ -1,3 +1,7 @@
 DATABASE_URL=
 supabaseUrl=
 supabaseAnonKey=
+googleClientIdAndroid=
+googleClientIdIOS=
+googleClientIdWeb=
+expoProjectId=

.gitignore

@@ -83,4 +83,7 @@ ios
 # The following patterns were generated by expo-cli
 
 expo-env.d.ts
-# @end expo-cli
+# @end expo-cli
+
+google-services.json
+GoogleService-Info.plist

app.config.ts

@@ -29,13 +29,14 @@ export default ({config}: ConfigContext): ExpoConfig => ({
   ...config,
   name: 'Supabase Tutorial',
   scheme: 'supabase_tutorial',
-  slug: 'supabase_tutorial_slug',
+  slug: 'supabase-tutorial',
   privacy: 'public',
   platforms: ['ios', 'android', 'web'],
   version,
   orientation: 'default',
   icon: './assets/icon.png',
   plugins: [
+    '@react-native-google-signin/google-signin',
     [
       'expo-build-properties',
       {
@@ -71,7 +72,10 @@ export default ({config}: ConfigContext): ExpoConfig => ({
   extra: {
     supabaseUrl: process.env.supabaseUrl,
     supabaseAnonKey: process.env.supabaseAnonKey,
-    // eas: {projectId: ''},
+    googleClientIdAndroid: process.env.googleClientIdAndroid,
+    googleClientIdIOS: process.env.googleClientIdIOS,
+    googleClientIdWeb: process.env.googleClientIdWeb,
+    eas: {projectId: '1f68ead4-c229-48b4-9193-f4a4b2cd8c2f'},
   },
   updates: {
     fallbackToCacheTimeout: 0,
@@ -80,10 +84,8 @@ export default ({config}: ConfigContext): ExpoConfig => ({
   },
   assetBundlePatterns: ['**/*'],
   userInterfaceStyle: 'automatic',
-  locales: {
-    ko: './assets/langs/ios/ko.json',
-  },
   ios: {
+    googleServicesFile: './GoogleService-Info.plist',
     buildNumber: buildNumber.toString(),
     bundleIdentifier: 'io.supabasetutorial',
     associatedDomains: [`applinks:${DEEP_LINK_URL}`],
@@ -93,6 +95,13 @@ export default ({config}: ConfigContext): ExpoConfig => ({
     },
     infoPlist: {
       CFBundleAllowMixedLocalizations: true,
+      CFBundleURLTypes: [
+        {
+          CFBundleURLSchemes: [
+            'com.googleusercontent.apps.3787908749-2qdl7esl5h52d0uhhaul8fsbso5o4sp8',
+          ],
+        },
+      ],
     },
   },
   android: {
@@ -110,6 +119,7 @@ export default ({config}: ConfigContext): ExpoConfig => ({
       foregroundImage: './assets/adaptive_icon.png',
       backgroundColor: '#2F2F2F',
     },
+    googleServicesFile: './google-services.json',
     package: 'io.supabasetutorial',
     intentFilters: [
       {

app/index.tsx

@@ -1,10 +1,17 @@
 import styled, {css} from '@emotion/native';
 import AsyncStorage from '@react-native-async-storage/async-storage';
+import {
+  GoogleSignin,
+  GoogleSigninButton,
+  statusCodes,
+} from '@react-native-google-signin/google-signin';
 import {Button, SwitchToggle, useDooboo} from 'dooboo-ui';
 import {Stack, useRouter} from 'expo-router';
 
+import {googleClientIdIOS, googleClientIdWeb} from '../config';
 import {t} from '../src/STRINGS';
 import {AsyncStorageKey} from '../src/utils/constants';
+import {supabase} from '../supabase';
 
 const Container = styled.View`
   background-color: ${({theme}) => theme.bg.basic};
@@ -26,6 +33,12 @@ export default function Index(): JSX.Element {
   const {themeType, changeThemeType} = useDooboo();
   const {push} = useRouter();
 
+  GoogleSignin.configure({
+    scopes: ['https://www.googleapis.com/auth/drive.readonly'],
+    webClientId: googleClientIdWeb,
+    iosClientId: googleClientIdIOS,
+  });
+
   return (
     <Container>
       <Stack.Screen
@@ -45,6 +58,38 @@ export default function Index(): JSX.Element {
             changeThemeType(nextTheme);
           }}
         />
+        <GoogleSigninButton
+          color={GoogleSigninButton.Color.Dark}
+          onPress={async () => {
+            try {
+              await GoogleSignin.hasPlayServices();
+
+              const userInfo = await GoogleSignin.signIn();
+              if (userInfo.idToken) {
+                const {data, error} = await supabase.auth.signInWithIdToken({
+                  provider: 'google',
+                  token: userInfo.idToken,
+                });
+                console.log(error, data);
+              } else {
+                throw new Error('no ID token present!');
+              }
+            } catch (error: any) {
+              if (error.code === statusCodes.SIGN_IN_CANCELLED) {
+                // user cancelled the login flow
+              } else if (error.code === statusCodes.IN_PROGRESS) {
+                // operation (e.g. sign in) is in progress already
+              } else if (
+                error.code === statusCodes.PLAY_SERVICES_NOT_AVAILABLE
+              ) {
+                // play services not available or outdated
+              } else {
+                // some other error happened
+              }
+            }
+          }}
+          size={GoogleSigninButton.Size.Wide}
+        />
         <Button
           onPress={() => push('/details')}
           style={css`

config.ts

@@ -4,3 +4,6 @@ const extra = Constants?.expoConfig?.extra;
 
 export const supabaseUrl = extra?.supabaseUrl;
 export const supabaseAnonKey = extra?.supabaseAnonKey;
+export const googleClientIdAndroid = extra?.googleClientIdAndroid;
+export const googleClientIdIOS = extra?.googleClientIdIOS;
+export const googleClientIdWeb = extra?.googleClientIdWeb;

eas.json

@@ -0,0 +1,20 @@
+{
+  "build": {
+    "development": {
+      "channel": "development",
+      "developmentClient": true,
+      "android": {
+        "distribution": "internal",
+        "withoutCredentials": true
+      },
+      "ios": {
+        "simulator": true
+      }
+    },
+    "production": {
+      "env": {
+        "ENVIRONMENT": "production"
+      }
+    }
+  }
+}

package.json

@@ -14,6 +14,8 @@
     "lint:all": "bun lint && bun lint:i18n",
     "build:web": "expo export --platform web",
     "test": "jest --runInBand",
+    "eas:dev:ios": "dotenv -e .env -- eas build --profile development --platform ios",
+    "eas:dev:android": "dotenv -e .env -- eas build --profile development --platform android",
     "generate:supabase": "supabase gen types typescript --project-id \"whtonfqidbwxlsdsamba\" --schema public > src/types/supabase.ts",
     "migrate:dev": "dotenv -e .env -- prisma migrate dev",
     "migrate:local": "dotenv -e .env -- prisma migrate local",
@@ -27,28 +29,30 @@
     "@prisma/client": "5.14.0",
     "@react-native-async-storage/async-storage": "1.23.1",
     "@react-native-community/datetimepicker": "8.0.1",
+    "@react-native-google-signin/google-signin": "^11.0.1",
     "@shopify/flash-list": "1.6.4",
     "@supabase/supabase-js": "^2.43.2",
     "date-fns": "^3.6.0",
     "dooboo-ui": "^0.2.31",
-    "expo": "~51.0.7",
+    "expo": "~51.0.8",
     "expo-constants": "~16.0.1",
+    "expo-dev-client": "~4.0.14",
     "expo-device": "~6.0.2",
     "expo-font": "~12.0.5",
     "expo-image": "~1.12.9",
     "expo-image-picker": "~15.0.5",
     "expo-linear-gradient": "~13.0.2",
     "expo-linking": "~6.3.1",
     "expo-localization": "~15.0.3",
-    "expo-notifications": "~0.28.2",
+    "expo-notifications": "~0.28.3",
     "expo-router": "~3.5.14",
     "expo-screen-orientation": "~7.0.5",
     "expo-sharing": "~12.0.1",
     "expo-splash-screen": "~0.27.4",
     "expo-status-bar": "~1.12.1",
     "expo-system-ui": "~3.0.4",
     "expo-tracking-transparency": "~4.0.2",
-    "expo-updates": "~0.25.13",
+    "expo-updates": "~0.25.14",
     "expo-web-browser": "~13.0.3",
     "i18n-js": "4.4.3",
     "lottie-react-native": "6.7.0",
@@ -97,7 +101,7 @@
     "eslint-plugin-prettier": "^5.1.3",
     "expo-build-properties": "^0.12.1",
     "jest": "^29.7.0",
-    "jest-expo": "~51.0.1",
+    "jest-expo": "~51.0.2",
     "jest-fetch-mock": "^3.0.3",
     "prettier": "^3.2.5",
     "prisma": "^5.14.0",