google sign in

src/screens/Login.js

@@ -3,7 +3,15 @@ import * as AuthSession from "expo-auth-session";
 import * as GoogleAuth from "expo-auth-session/providers/google";
 import * as WebBrowser from "expo-web-browser";
 import React, { useEffect, useState } from "react";
-import { Pressable, Text, View } from "react-native";
+import Constants from "expo-constants";
+import {
+  ActivityIndicator,
+  Platform,
+  Pressable,
+  StyleSheet,
+  Text,
+  View,
+} from "react-native";
 import { useGlobal } from "reactn";
 import { background } from "../assets";
 import GradientButton from "../components/GradientButton.js";
@@ -21,6 +29,8 @@ import { Routes } from "../navigation";
 import { navigate } from "../navigation/NavigationService.js";
 import { FONT_FAMILY } from "../styles/Fonts.js";
 import Palette from "../styles/Palette.js";
+import { GoogleSigninButton } from "@react-native-google-signin/google-signin";
+import Svg, { Path } from "react-native-svg";
 
 export default ({ navigation }) => {
   WebBrowser.maybeCompleteAuthSession();
@@ -31,11 +41,18 @@ export default ({ navigation }) => {
   // Let the provider compute a compliant redirect URI for native (com.googleusercontent.apps.<client-id>:/oauth2redirect)
   // Avoid forcing a custom scheme like musicland:// which Google can reject for native apps.
 
+  const isExpoGo = Constants?.appOwnership === "expo";
+  const expoRedirectUri = AuthSession.makeRedirectUri({ useProxy: true });
+  const nativeRedirectUri = getNativeGoogleRedirectUri();
+  const redirectUri =
+    isWeb || isExpoGo ? expoRedirectUri : nativeRedirectUri || expoRedirectUri;
+
   const [request, response, promptAsync] = GoogleAuth.useAuthRequest({
     iosClientId: GOOGLE_IOS_CLIENT_ID,
     androidClientId: GOOGLE_ANDROID_CLIENT_ID,
     webClientId: GOOGLE_WEB_CLIENT_ID,
     expoClientId: GOOGLE_WEB_CLIENT_ID,
+    redirectUri,
     // Use Authorization Code + PKCE to comply with Google OAuth for native apps
     responseType: AuthSession.ResponseType.Code,
     usePKCE: true,
@@ -79,7 +96,7 @@ export default ({ navigation }) => {
         setLoading(false);
       } else {
         // Use defaults from the request; don't override with proxy here
-        const result = await promptAsync();
+        const result = await promptAsync({ useProxy: isExpoGo });
         if (result?.type !== "success") {
           // Cancelled or errored during the browser flow
           setLoading(false);
@@ -133,7 +150,7 @@ export default ({ navigation }) => {
                 redirectUri: request?.redirectUri,
                 extraParams: { code_verifier: request?.codeVerifier },
               },
-              discovery
+              discovery,
             );
             idToken = tokenResponse?.id_token;
           }
@@ -241,21 +258,11 @@ export default ({ navigation }) => {
               onPress={onLogin}
               disabled={loading || !email || !password}
             />
-            {/* <GradientButton
+            <GoogleAuthButton
-              title="Se connecter avec Google"
-              containerStyle={{
-                width: "80%",
-                alignSelf: "center",
-              }}
               onPress={onLoginWithGoogle}
               disabled={loading}
-            /> */}
+              loading={loading}
-            {/*<GoogleSigninButton*/}
+            />
-            {/*  style={{ width: "80%", height: 50, alignSelf: "center" }}*/}
-            {/*  color={GoogleSigninButton.Color.Dark}*/}
-            {/*  onPress={onLoginWithGoogle}*/}
-            {/*  disabled={loading}*/}
-            {/*/>*/}
 
             <View
               style={{
@@ -288,3 +295,146 @@ export default ({ navigation }) => {
     </Page>
   );
 };
+
+const GoogleAuthButton = ({ onPress, disabled, loading }) => {
+  if (isWeb) {
+    return (
+      <Pressable
+        accessibilityRole="button"
+        onPress={onPress}
+        disabled={disabled}
+        style={({ pressed }) => [
+          styles.webButton,
+          pressed && !disabled ? styles.webButtonPressed : null,
+          disabled ? styles.webButtonDisabled : null,
+        ]}
+      >
+        <View style={styles.webContent}>
+          <View style={styles.webIconContainer}>
+            <GoogleLogo />
+          </View>
+          <Text style={styles.webText}>Continuer avec Google</Text>
+          {loading ? (
+            <ActivityIndicator size="small" color="#4285F4" />
+          ) : (
+            <View style={styles.webRightSpacer} />
+          )}
+        </View>
+      </Pressable>
+    );
+  }
+
+  return (
+    <View style={styles.nativeButtonWrapper}>
+      <GoogleSigninButton
+        style={styles.nativeButton}
+        size={GoogleSigninButton.Size.Wide}
+        color={GoogleSigninButton.Color.Dark}
+        onPress={onPress}
+        disabled={disabled}
+      />
+      {loading ? (
+        <View style={styles.nativeLoadingOverlay}>
+          <ActivityIndicator size="small" color={Palette.white} />
+        </View>
+      ) : null}
+    </View>
+  );
+};
+
+const getNativeGoogleRedirectUri = () => {
+  const clientId = Platform.select({
+    ios: GOOGLE_IOS_CLIENT_ID,
+    android: GOOGLE_ANDROID_CLIENT_ID,
+    default: null,
+  });
+
+  if (!clientId || !clientId.includes(".apps.googleusercontent.com")) {
+    return undefined;
+  }
+
+  const clientPrefix = clientId.replace(".apps.googleusercontent.com", "");
+  return `com.googleusercontent.apps.${clientPrefix}:/oauth2redirect`;
+};
+
+const styles = StyleSheet.create({
+  webButton: {
+    alignSelf: "center",
+    width: "80%",
+    height: 48,
+    borderRadius: 4,
+    backgroundColor: Palette.white,
+    borderWidth: 1,
+    borderColor: "#DADCE0",
+    justifyContent: "center",
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.12,
+    shadowRadius: 2,
+    elevation: 1,
+  },
+  webButtonPressed: {
+    backgroundColor: "#F6F9FE",
+  },
+  webButtonDisabled: {
+    opacity: 0.7,
+  },
+  webContent: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    paddingHorizontal: 12,
+  },
+  webIconContainer: {
+    justifyContent: "center",
+    alignItems: "center",
+    marginRight: 12,
+  },
+  webText: {
+    flex: 1,
+    textAlign: "center",
+    fontSize: 14,
+    color: "#3C4043",
+    fontFamily: FONT_FAMILY.InterSemiBold,
+  },
+  webRightSpacer: {
+    width: 18,
+    height: 18,
+  },
+  nativeButtonWrapper: {
+    alignSelf: "center",
+    width: "80%",
+    height: 50,
+    justifyContent: "center",
+  },
+  nativeButton: {
+    width: "100%",
+    height: 50,
+  },
+  nativeLoadingOverlay: {
+    ...StyleSheet.absoluteFillObject,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+});
+
+const GoogleLogo = () => (
+  <Svg width={18} height={18} viewBox="0 0 18 18">
+    <Path
+      fill="#4285F4"
+      d="M17.64 9.2c0-.64-.06-1.25-.16-1.84H9v3.48h4.84a4.14 4.14 0 0 1-1.8 2.71v2.26h2.9c1.68-1.55 2.7-3.83 2.7-6.61Z"
+    />
+    <Path
+      fill="#34A853"
+      d="M9 18c2.43 0 4.47-.8 5.96-2.18l-2.9-2.26c-.8.54-1.83.86-3.06.86a5.31 5.31 0 0 1-5.02-3.69H.96v2.32A9 9 0 0 0 9 18Z"
+    />
+    <Path
+      fill="#FBBC05"
+      d="M3.98 10.73c-.18-.54-.28-1.12-.28-1.73s.1-1.19.28-1.73V4.95H.96A9 9 0 0 0 0 9c0 1.45.35 2.82.96 4.05l3.02-2.32Z"
+    />
+    <Path
+      fill="#EA4335"
+      d="M9 3.54c1.32 0 2.5.45 3.43 1.33l2.57-2.57C13.47.9 11.43 0 9 0A9 9 0 0 0 .96 4.95l3.02 2.32A5.31 5.31 0 0 1 9 3.54Z"
+    />
+  </Svg>
+);