Google OAuth (Android and iOS)

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._some_id_here_"
+        }
+      ]
+    ],
     "owner": "audacitymusic"
   }
 }

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")}