login with google

.gitignore

@@ -52,6 +52,7 @@ local.properties
 *.hprof
 .cxx/
 
+
 # node.js
 #
 node_modules/

android/app/src/main/AndroidManifest.xml

@@ -29,7 +29,7 @@
         <action android:name="android.intent.action.VIEW"/>
         <category android:name="android.intent.category.DEFAULT"/>
         <category android:name="android.intent.category.BROWSABLE"/>
-        <data android:scheme="minuit"/>
+        <data android:scheme="musicland"/>
         <data android:scheme="com.omedis.musicland"/>
         <data android:scheme="exp+musicland"/>
       </intent-filter>

app.json

@@ -3,8 +3,8 @@
     "owner": "minuitagency",
     "slug": "musicland",
     "name": "MusicLand",
+    "scheme": "musicland",
     "version": "0.0.1",
-    "scheme": "minuit",
     "orientation": "portrait",
     "icon": "./assets/icon.png",
     "backgroundColor": "#0F0C14",
@@ -16,14 +16,7 @@
       "fallbackToCacheTimeout": 0
     },
     "packagerOpts": {
-      "sourceExts": [
+      "sourceExts": ["js", "json", "ts", "tsx", "jsx", "vue"]
-        "js",
-        "json",
-        "ts",
-        "tsx",
-        "jsx",
-        "vue"
-      ]
     },
     "splash": {
       "image": "./assets/splash.png",
@@ -35,9 +28,7 @@
       "supportsTablet": true,
       "requireFullScreen": true,
       "userInterfaceStyle": "dark",
-      "associatedDomains": [
+      "associatedDomains": ["applinks:minuit.starter"],
-        "applinks:minuit.starter"
-      ],
       "bundleIdentifier": "com.omedis.musicland",
       "infoPlist": {
         "UISupportedInterfaceOrientations": [
@@ -48,10 +39,7 @@
           "UIInterfaceOrientationLandscapeLeft",
           "UIInterfaceOrientationLandscapeRight"
         ],
-        "LSApplicationQueriesSchemes": [
+        "LSApplicationQueriesSchemes": ["itms-apps", "minuit"]
-          "itms-apps",
-          "minuit"
-        ]
       },
       "config": {
         "usesNonExemptEncryption": false

package.json

@@ -13,29 +13,31 @@
     "build:desktop:prod": "yarn build:web && npx pake-cli ./dist/index.html --name minuit --iter-copy-file --icon ./assets/desktopIcon.icns"
   },
   "dependencies": {
-    "@babel/plugin-proposal-export-namespace-from": "^7.18.9",
+    "@babel/plugin-proposal-export-namespace-from": "~7.18.9",
-    "@expo-google-fonts/inter": "^0.4.1",
+    "@expo-google-fonts/inter": "~0.4.1",
     "@expo/metro-runtime": "~4.0.1",
-    "@expo/react-native-action-sheet": "^4.0.1",
+    "@expo/react-native-action-sheet": "~4.0.1",
     "@expo/vector-icons": "~14.0.4",
-    "@gorhom/bottom-sheet": "^4",
+    "@gorhom/bottom-sheet": "~4",
-    "@gorhom/portal": "^1.0.14",
+    "@gorhom/portal": "~1.0.14",
-    "@legendapp/motion": "^2.2.1",
+    "@legendapp/motion": "~2.2.1",
     "@react-native-async-storage/async-storage": "1.23.1",
     "@react-native-community/datetimepicker": "8.2.0",
-    "@react-native-community/hooks": "^3.0.0",
+    "@react-native-community/hooks": "~3.0.0",
     "@react-native-community/slider": "4.5.5",
-    "@react-native-masked-view/masked-view": "^0.3.2",
+    "@react-native-google-signin/google-signin": "~15.0.0",
-    "@react-navigation/bottom-tabs": "^6.0.9",
+    "@react-native-masked-view/masked-view": "~0.3.2",
-    "@react-navigation/core": "^6.1.0",
+    "@react-navigation/bottom-tabs": "~6.0.9",
-    "@react-navigation/native": "^6.0.6",
+    "@react-navigation/core": "~6.1.0",
-    "@react-navigation/stack": "^6.0.11",
+    "@react-navigation/native": "~6.0.6",
-    "@stripe/react-stripe-js": "^2.5.0",
+    "@react-navigation/stack": "~6.0.11",
-    "@stripe/stripe-js": "^3.0.0",
+    "@stripe/react-stripe-js": "~2.5.0",
-    "add": "^2.0.6",
+    "@stripe/stripe-js": "~3.0.0",
-    "deprecated-react-native-prop-types": "^3.0.1",
+    "add": "~2.0.6",
+    "deprecated-react-native-prop-types": "~3.0.1",
     "expo": "~52.0.47",
     "expo-audio": "~0.3.5",
+    "expo-auth-session": "~6.0.3",
     "expo-blur": "~14.0.3",
     "expo-build-properties": "~0.13.3",
     "expo-camera": "~16.0.18",
@@ -56,63 +58,63 @@
     "expo-status-bar": "~2.0.1",
     "expo-system-ui": "~4.0.9",
     "expo-video": "~2.0.6",
-    "firebase": "^9.20.0",
+    "expo-web-browser": "~14.0.2",
-    "lodash": "^4.17.21",
+    "firebase": "~9.20.0",
-    "moment": "^2.29.4",
+    "lodash": "~4.17.21",
-    "numbro": "^2.3.6",
+    "moment": "~2.29.4",
+    "numbro": "~2.3.6",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-native": "0.76.9",
-    "react-native-actions-sheet": "^0.9.7",
+    "react-native-actions-sheet": "~0.9.7",
-    "react-native-compressor": "^1.12.0",
+    "react-native-compressor": "~1.12.0",
-    "react-native-country-picker-modal": "^2.0.0",
+    "react-native-country-picker-modal": "~2.0.0",
-    "react-native-dialog": "^9.3.0",
+    "react-native-dialog": "~9.3.0",
-    "react-native-figma-squircle": "^0.3.4",
+    "react-native-figma-squircle": "~0.3.4",
     "react-native-gesture-handler": "~2.20.2",
-    "react-native-hyperlink": "^0.0.22",
+    "react-native-hyperlink": "~0.0.22",
-    "react-native-keyboard-aware-scroll-view": "^0.9.5",
+    "react-native-keyboard-aware-scroll-view": "~0.9.5",
-    "react-native-linear-gradient": "^2.8.3",
+    "react-native-linear-gradient": "~2.8.3",
-    "react-native-minuit": "^1.3.52",
+    "react-native-minuit": "~1.3.52",
-    "react-native-popup-menu": "^0.18.0",
+    "react-native-popup-menu": "~0.18.0",
     "react-native-reanimated": "~3.16.1",
-    "react-native-reanimated-carousel": "^4.0.3",
+    "react-native-reanimated-carousel": "~4.0.3",
-    "react-native-responsive-dimensions": "^3.1.1",
+    "react-native-responsive-dimensions": "~3.1.1",
     "react-native-safe-area-context": "4.12.0",
     "react-native-screens": "~4.4.0",
-    "react-native-sortables": "^1.8.0",
+    "react-native-sortables": "~1.8.0",
-    "react-native-store-review": "^0.3.0",
+    "react-native-store-review": "~0.3.0",
-    "react-native-super-grid": "^5.0.0",
+    "react-native-super-grid": "~5.0.0",
     "react-native-svg": "15.8.0",
-    "react-native-swiper-flatlist": "^3.2.5",
+    "react-native-swiper-flatlist": "~3.2.5",
     "react-native-web": "~0.19.6",
-    "react-native-web-linear-gradient": "^1.1.2",
+    "react-native-web-linear-gradient": "~1.1.2",
     "react-native-webview": "13.12.5",
-    "reactn": "^2.2.7",
+    "reactn": "~2.2.7",
-    "rxjs": "^7.6.0"
+    "rxjs": "~7.6.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.20.5",
+    "@babel/core": "^7.25.2",
-    "@babel/parser": "^7.25.6",
+    "@babel/parser": "~7.25.6",
-    "@babel/traverse": "^7.25.6",
+    "@babel/traverse": "~7.25.6",
     "@types/react": "~18.3.12",
-    "eslint": "^8.57.0",
+    "eslint": "~8.57.0",
     "eslint-config-expo": "~8.0.1",
-    "eslint-config-prettier": "^9.1.0",
+    "eslint-config-prettier": "~9.1.0",
-    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-prettier": "~5.1.3",
-    "imagemin": "^9.0.0",
+    "imagemin": "~9.0.0",
-    "imagemin-gifsicle": "^7.0.0",
+    "imagemin-gifsicle": "~7.0.0",
-    "imagemin-jpegtran": "^7.0.0",
+    "imagemin-jpegtran": "~7.0.0",
-    "imagemin-optipng": "^8.0.0",
+    "imagemin-optipng": "~8.0.0",
-    "imagemin-svgo": "^11.0.1",
+    "imagemin-svgo": "~11.0.1",
-    "prettier": "^3.2.5",
+    "prettier": "~3.2.5",
-    "typescript": "^5.3.3"
+    "typescript": "~5.3.3"
   },
   "resolutions": {
-    "firebase": "^9.20.0",
+    "firebase": "~9.20.0",
     "react-error-overlay": "6.0.9"
   },
-  "private": true
+  "private": true,
-  ,
   "expo": {
     "doctor": {
       "reactNativeDirectoryCheck": {

src/data/keys.js

@@ -1,3 +1,21 @@
 export const STRIPE_PUBLISHABLE_KEY_TEST = "..";
 export const STRIPE_PUBLISHABLE_KEY_LIVE = "...";
 export const GOOGLE_API_KEY = "...";
+
+// OAuth Client IDs for Google Sign-In
+// Use platform-specific client IDs from your Google Cloud Console / Firebase settings
+// - Android: client_type 1 from config/google-services.json (package + SHA-1 bound)
+// - iOS: CLIENT_ID from config/GoogleService-Info.plist
+// - Web/Expo Go: Web client (client_type 3)
+
+// Web client ID (client_type 3)
+export const GOOGLE_WEB_CLIENT_ID =
+  "305598753437-dtjknrpfrjt3bdd7838nga41m5i4emva.apps.googleusercontent.com";
+
+// iOS client ID (may need updating to match the iOS bundle for this project)
+export const GOOGLE_IOS_CLIENT_ID =
+  "943006074419-h43c7p48nhn5f4td4oimv4dq7b1p3s29.apps.googleusercontent.com";
+
+// Android client ID (client_type 1 from google-services.json)
+export const GOOGLE_ANDROID_CLIENT_ID =
+  "305598753437-qck73beo37mi04qlautgafbpdl3ccaoh.apps.googleusercontent.com";

src/screens/Login.js

@@ -1,36 +1,64 @@
-import React, { useState } from "react";
+/* eslint-disable react/display-name */
+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 { Platform, Pressable, Text, View } from "react-native";
 import { useGlobal } from "reactn";
-import { Pressable, Text, View } from "react-native";
-import Page from "../layouts/Page.js";
 import { background } from "../assets";
-import { Input } from "../components/Input.js";
 import GradientButton from "../components/GradientButton.js";
-import Palette from "../styles/Palette.js";
+import { Input } from "../components/Input.js";
-import { FONT_FAMILY } from "../styles/Fonts.js";
-import { navigate } from "../navigation/NavigationService.js";
-import { Routes } from "../navigation";
 import ItemContainer from "../components/ItemContainer/ItemContainer.js";
 import firebase, { usersRef } from "../config/firebase";
+import {
+  GOOGLE_ANDROID_CLIENT_ID,
+  GOOGLE_IOS_CLIENT_ID,
+  GOOGLE_WEB_CLIENT_ID,
+} from "../data/keys";
+import { isWeb } from "../hooks/useLayoutType";
+import Page from "../layouts/Page.js";
+import { Routes } from "../navigation";
+import { navigate } from "../navigation/NavigationService.js";
+import { FONT_FAMILY } from "../styles/Fonts.js";
+import Palette from "../styles/Palette.js";
 
 export default ({ navigation }) => {
+  WebBrowser.maybeCompleteAuthSession();
   const [, setTooltip] = useGlobal("_tooltip");
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
   const [loading, setLoading] = useState(false);
+  // 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 [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,
+    // Use Authorization Code + PKCE to comply with Google OAuth for native apps
+    responseType: AuthSession.ResponseType.Code,
+    usePKCE: true,
+    scopes: ["openid", "profile", "email"],
+  });
+
+  const afterLoginNavigate = async () => {
+    const uid = firebase.auth().currentUser?.uid;
+    if (!uid) throw new Error("Aucun utilisateur après connexion");
+    const snap = await usersRef.doc(uid).get();
+    const hasUserName = !!snap.data()?.userName;
+    if (hasUserName) {
+      navigation.reset({ index: 0, routes: [{ name: Routes.BottomTab }] });
+    } else {
+      navigation.reset({ index: 0, routes: [{ name: Routes.CreatePseudo }] });
+    }
+  };
 
   const onLogin = async () => {
     try {
       setLoading(true);
       await firebase.auth().signInWithEmailAndPassword(email.trim(), password);
-      const uid = firebase.auth().currentUser?.uid;
+      await afterLoginNavigate();
-      if (!uid) throw new Error("Aucun utilisateur après connexion");
-      const snap = await usersRef.doc(uid).get();
-      const hasUserName = !!snap.data()?.userName;
-      if (hasUserName) {
-        navigation.reset({ index: 0, routes: [{ name: Routes.BottomTab }] });
-      } else {
-        navigation.reset({ index: 0, routes: [{ name: Routes.CreatePseudo }] });
-      }
     } catch (e) {
       console.log("Login error", e?.message);
       setTooltip({ text: e?.message || "Connexion impossible", type: "error" });
@@ -39,6 +67,98 @@ export default ({ navigation }) => {
     }
   };
 
+  const onLoginWithGoogle = async () => {
+    try {
+      setLoading(true);
+      if (isWeb) {
+        const provider = new firebase.auth.GoogleAuthProvider();
+        provider.addScope("profile");
+        provider.addScope("email");
+        await firebase.auth().signInWithPopup(provider);
+        await afterLoginNavigate();
+        setLoading(false);
+      } else {
+        // Use defaults from the request; don't override with proxy here
+        const result = await promptAsync();
+        if (result?.type !== "success") {
+          // Cancelled or errored during the browser flow
+          setLoading(false);
+        }
+      }
+    } catch (e) {
+      console.log("Google Login error", e?.message);
+      setTooltip({
+        text: e?.message || "Connexion Google impossible. Merci de réessayer.",
+        type: "error",
+      });
+      setLoading(false);
+    }
+  };
+
+  // Handle native Google OAuth response
+  useEffect(() => {
+    const handleNativeGoogleResponse = async () => {
+      try {
+        if (response?.type === "success") {
+          // If using Expo proxy, tokens can be present already.
+          let idToken =
+            response?.authentication?.idToken || response?.params?.id_token;
+
+          if (!idToken) {
+            // Otherwise, exchange the authorization code for tokens using PKCE.
+            const code = response?.params?.code || response?.authentication?.code;
+            if (!code) throw new Error("Code d'autorisation Google manquant");
+
+            // Use the exact clientId used during the authorize request.
+            const clientId = request?.clientId;
+            const discovery = {
+              authorizationEndpoint: "https://accounts.google.com/o/oauth2/v2/auth",
+              tokenEndpoint: "https://oauth2.googleapis.com/token",
+              revocationEndpoint: "https://oauth2.googleapis.com/revoke",
+            };
+
+            // Light debug: helps identify redirect/client mismatches in dev.
+            console.log("Google token exchange", {
+              clientId,
+              redirectUri: request?.redirectUri,
+              hasCodeVerifier: !!request?.codeVerifier,
+            });
+
+            const tokenResponse = await AuthSession.exchangeCodeAsync(
+              {
+                clientId,
+                code,
+                redirectUri: request?.redirectUri,
+                extraParams: { code_verifier: request?.codeVerifier },
+              },
+              discovery
+            );
+            idToken = tokenResponse?.id_token;
+          }
+
+          if (!idToken) throw new Error("Jeton Google manquant (échange/retour)");
+
+          const credential = firebase.auth.GoogleAuthProvider.credential(idToken);
+          await firebase.auth().signInWithCredential(credential);
+          await afterLoginNavigate();
+        }
+      } catch (e) {
+        console.log("Google native sign-in error", e?.message);
+        setTooltip({
+          text: e?.message || "Connexion Google impossible",
+          type: "error",
+        });
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    if (!isWeb && response) {
+      handleNativeGoogleResponse();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [response]);
+
   return (
     <Page
       backgroundImg={background.homeBG}
@@ -88,9 +208,7 @@ export default ({ navigation }) => {
                   setValue={setPassword}
                   isBlur
                 />
-                <Pressable
+                <Pressable onPress={() => navigate(Routes.ForgotPassword)}>
-                  onPress={() => navigate(Routes.ForgotPassword)}
-                >
                   <Text
                     style={{
                       fontSize: 12,
@@ -112,6 +230,16 @@ export default ({ navigation }) => {
               onPress={onLogin}
               disabled={loading || !email || !password}
             />
+
+            <GradientButton
+              title="Se connecter avec Google"
+              containerStyle={{
+                width: "80%",
+                alignSelf: "center",
+              }}
+              onPress={onLoginWithGoogle}
+              disabled={loading}
+            />
             <View
               style={{
                 alignItems: "center",