Google OAuth (Android and iOS) (#31)

* Add react-native-google-signin

* prebuild & run with android

* Google OAuth Completed for Android (Not Sure about iOS)

* formatting

* Add iOS Url Scheme

* Run prebuild

---------

Co-authored-by: TenType <55125103+TenType@users.noreply.github.com>

android/app/build.gradle

@@ -142,7 +142,8 @@ android {
 dependencies {
     // The version of react-native is set by the React Native Gradle Plugin
     implementation("com.facebook.react:react-android")
-
+    implementation 'com.google.android.gms:play-services-auth:21.0.0'
+
     def isGifEnabled = (findProperty('expo.gif.enabled') ?: "") == "true";
     def isWebpEnabled = (findProperty('expo.webp.enabled') ?: "") == "true";
     def isWebpAnimatedEnabled = (findProperty('expo.webp.animated') ?: "") == "true";

android/app/src/main/res/values/strings.xml

@@ -1,5 +1,6 @@
 <resources>
-  <string name="app_name">signup</string>
+  <string name="app_name">Audacity Music Club</string>
   <string name="expo_splash_screen_resize_mode" translatable="false">contain</string>
   <string name="expo_splash_screen_status_bar_translucent" translatable="false">false</string>
-</resources>
+  <string name="server_client_id">761199370622-jil48n0qf2v7k01td350tponk1f8digo.apps.googleusercontent.com</string>
+</resources>

android/app/src/main/res/values/styles.xml

@@ -4,7 +4,7 @@
     <item name="android:editTextStyle">@style/ResetEditText</item>
     <item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
     <item name="colorPrimary">@color/colorPrimary</item>
-    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
+    <item name="android:statusBarColor">#ffffff</item>
   </style>
   <style name="ResetEditText" parent="@android:style/Widget.EditText">
     <item name="android:padding">0dp</item>
@@ -14,4 +14,4 @@
   <style name="Theme.App.SplashScreen" parent="AppTheme">
     <item name="android:windowBackground">@drawable/splashscreen</item>
   </style>
-</resources>
+</resources>

android/settings.gradle

@@ -1,4 +1,4 @@
-rootProject.name = 'signup'
+rootProject.name = 'Audacity Music Club'
 
 dependencyResolutionManagement {
   versionCatalogs {

app.json

@@ -30,6 +30,14 @@
         "projectId": "56bb99cb-9cbe-423d-9a88-3f82a0cf3aa0"
       }
     },
+    "plugins": [
+      [
+        "@react-native-google-signin/google-signin",
+        {
+          "iosUrlScheme": "com.googleusercontent.apps.761199370622-qdq0afvq19r47p34rgjsso84leub5dlj"
+        }
+      ]
+    ],
     "owner": "audacitymusic"
   }
 }

ios/AudacityMusicClub.xcodeproj/project.pbxproj

@@ -357,7 +357,7 @@
 				);
 				OTHER_SWIFT_FLAGS = "$(inherited) -D EXPO_CONFIGURATION_DEBUG";
 				PRODUCT_BUNDLE_IDENTIFIER = org.eternityband.signup;
-				PRODUCT_NAME = AudacityMusicClub;
+				PRODUCT_NAME = "AudacityMusicClub";
 				SWIFT_OBJC_BRIDGING_HEADER = "AudacityMusicClub/AudacityMusicClub-Bridging-Header.h";
 				SWIFT_OPTIMIZATION_LEVEL = "-Onone";
 				SWIFT_VERSION = 5.0;
@@ -385,7 +385,7 @@
 				);
 				OTHER_SWIFT_FLAGS = "$(inherited) -D EXPO_CONFIGURATION_RELEASE";
 				PRODUCT_BUNDLE_IDENTIFIER = org.eternityband.signup;
-				PRODUCT_NAME = AudacityMusicClub;
+				PRODUCT_NAME = "AudacityMusicClub";
 				SWIFT_OBJC_BRIDGING_HEADER = "AudacityMusicClub/AudacityMusicClub-Bridging-Header.h";
 				SWIFT_VERSION = 5.0;
 				TARGETED_DEVICE_FAMILY = "1,2";

ios/AudacityMusicClub/Info.plist

@@ -30,6 +30,12 @@
           <string>org.eternityband.signup</string>
         </array>
       </dict>
+      <dict>
+        <key>CFBundleURLSchemes</key>
+        <array>
+          <string>com.googleusercontent.apps.761199370622-qdq0afvq19r47p34rgjsso84leub5dlj</string>
+        </array>
+      </dict>
     </array>
     <key>CFBundleVersion</key>
     <string>1</string>

ios/Podfile.lock

@@ -1221,6 +1221,9 @@ PODS:
     - React-logger (= 0.74.2)
     - React-perflogger (= 0.74.2)
     - React-utils (= 0.74.2)
+  - RNGoogleSignin (12.2.1):
+    - GoogleSignIn (~> 7.1)
+    - React-Core
   - RNScreens (3.32.0):
     - DoubleConversion
     - glog
@@ -1312,6 +1315,7 @@ DEPENDENCIES:
   - React-runtimescheduler (from `../node_modules/react-native/ReactCommon/react/renderer/runtimescheduler`)
   - React-utils (from `../node_modules/react-native/ReactCommon/react/utils`)
   - ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`)
+  - "RNGoogleSignin (from `../node_modules/@react-native-google-signin/google-signin`)"
   - RNScreens (from `../node_modules/react-native-screens`)
   - Yoga (from `../node_modules/react-native/ReactCommon/yoga`)
 
@@ -1451,6 +1455,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon/react/utils"
   ReactCommon:
     :path: "../node_modules/react-native/ReactCommon"
+  RNGoogleSignin:
+    :path: "../node_modules/@react-native-google-signin/google-signin"
   RNScreens:
     :path: "../node_modules/react-native-screens"
   Yoga:
@@ -1524,6 +1530,7 @@ SPEC CHECKSUMS:
   React-runtimescheduler: 56b642bf605ba5afa500d35790928fc1d51565ad
   React-utils: 4476b7fcbbd95cfd002f3e778616155241d86e31
   ReactCommon: ecad995f26e0d1e24061f60f4e5d74782f003f12
+  RNGoogleSignin: 08dc4ba7eac2096c7fecfe109f0950fa4683c803
   RNScreens: 5aeecbb09aa7285379b6e9f3c8a3c859bb16401c
   SocketRocket: abac6f5de4d4d62d24e11868d7a2f427e0ef940d
   Yoga: ae3c32c514802d30f687a04a6a35b348506d411f

package.json

@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "@expo/metro-runtime": "^3.2.1",
+    "@react-native-google-signin/google-signin": "^12.2.1",
     "@react-navigation/native": "^6.1.17",
     "@react-navigation/native-stack": "^6.10.0",
     "expo": "~51.0.17",

src/screens/SignInScreen.js

@@ -7,8 +7,22 @@ import {
   Image,
 } from "react-native";
 
+import {
+  GoogleSignin,
+  statusCodes,
+  isErrorWithCode,
+} from "@react-native-google-signin/google-signin";
+
 import BackButton from "../components/BackButton";
 
+GoogleSignin.configure({
+  webClientId:
+    "761199370622-3r5phtt6a1s6lm6554htodbk8u4k9p8f.apps.googleusercontent.com", // client ID of type WEB for your server. Required to get the `idToken` on the user object, and for offline access.
+  scopes: ["https://www.googleapis.com/auth/drive.readonly"], // what API you want to access on behalf of the user, default is email and profile
+  iosClientId:
+    "761199370622-qdq0afvq19r47p34rgjsso84leub5dlj.apps.googleusercontent.com", // [iOS] if you want to specify the client ID of type iOS (otherwise, it is taken from GoogleService-Info.plist)
+});
+
 export default function SignInScreen() {
   return (
     <SafeAreaView style={styles.container}>
@@ -25,7 +39,44 @@ export default function SignInScreen() {
           {"in using your Google account.\n"}
         </Text>
 
-        <Pressable style={[styles.OAuth, styles.GoogleOAuth]}>
+        <Pressable
+          style={[styles.OAuth, styles.GoogleOAuth]}
+          onPress={async () => {
+            try {
+              await GoogleSignin.hasPlayServices();
+              const userInfo = await GoogleSignin.signIn();
+              console.log("success");
+              console.log(JSON.stringify(userInfo, null, 2));
+            } catch (error) {
+              if (isErrorWithCode(error)) {
+                switch (error.code) {
+                  case statusCodes.SIGN_IN_CANCELLED:
+                    // user cancelled the login flow
+                    console.log("Cancelled");
+                    break;
+                  case statusCodes.IN_PROGRESS:
+                    // operation (eg. sign in) already in progress
+                    console.log("In progress");
+                    break;
+                  case statusCodes.PLAY_SERVICES_NOT_AVAILABLE:
+                    // play services not available or outdated
+                    console.log("Play services not available or outdated");
+                    break;
+                  case statusCodes.SIGN_IN_REQUIRED:
+                    console.log("Sign in required");
+                    break;
+                  default:
+                    console.log(error);
+                    break;
+                  // some other error happened
+                }
+              } else {
+                console.log("WOAH This is outta my control");
+                // an error that's not related to google sign in occurred
+              }
+            }
+          }}
+        >
           <Image
             style={styles.OAuthLogo}
             source={require("../assets/google.png")}