leonm/musicland
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

login with google

Browse Source
This commit is contained in:
leon-morival
2025-09-05 16:52:31 +02:00
parent 3261ffd2eb
commit 17391daa76
7 changed files with 566 additions and 344 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.gitignore
+1
View File
@@ -52,6 +52,7 @@ local.properties
*.hprof
.cxx/
# node.js
#
node_modules/
android/app/src/main/AndroidManifest.xml
+1 -1
View File
@@ -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
+4 -16
View File
@@ -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": [
"js",
"json",
"ts",
"tsx",
"jsx",
"vue"
]
"sourceExts": ["js", "json", "ts", "tsx", "jsx", "vue"]
},
"splash": {
"image": "./assets/splash.png",
@@ -35,9 +28,7 @@
"supportsTablet": true,
"requireFullScreen": true,
"userInterfaceStyle": "dark",
"associatedDomains": [
"applinks:minuit.starter"
],
"associatedDomains": ["applinks:minuit.starter"],
"bundleIdentifier": "com.omedis.musicland",
"infoPlist": {
"UISupportedInterfaceOrientations": [
@@ -48,10 +39,7 @@
"UIInterfaceOrientationLandscapeLeft",
"UIInterfaceOrientationLandscapeRight"
],
"LSApplicationQueriesSchemes": [
"itms-apps",
"minuit"
]
"LSApplicationQueriesSchemes": ["itms-apps", "minuit"]
},
"config": {
"usesNonExemptEncryption": false
package.json
+57 -55
View File
@@ -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",
"@expo-google-fonts/inter": "^0.4.1",
"@babel/plugin-proposal-export-namespace-from": "~7.18.9",
"@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/portal": "^1.0.14",
"@legendapp/motion": "^2.2.1",
"@gorhom/bottom-sheet": "~4",
"@gorhom/portal": "~1.0.14",
"@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-navigation/bottom-tabs": "^6.0.9",
"@react-navigation/core": "^6.1.0",
"@react-navigation/native": "^6.0.6",
"@react-navigation/stack": "^6.0.11",
"@stripe/react-stripe-js": "^2.5.0",
"@stripe/stripe-js": "^3.0.0",
"add": "^2.0.6",
"deprecated-react-native-prop-types": "^3.0.1",
"@react-native-google-signin/google-signin": "~15.0.0",
"@react-native-masked-view/masked-view": "~0.3.2",
"@react-navigation/bottom-tabs": "~6.0.9",
"@react-navigation/core": "~6.1.0",
"@react-navigation/native": "~6.0.6",
"@react-navigation/stack": "~6.0.11",
"@stripe/react-stripe-js": "~2.5.0",
"@stripe/stripe-js": "~3.0.0",
"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",
"lodash": "^4.17.21",
"moment": "^2.29.4",
"numbro": "^2.3.6",
"expo-web-browser": "~14.0.2",
"firebase": "~9.20.0",
"lodash": "~4.17.21",
"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-compressor": "^1.12.0",
"react-native-country-picker-modal": "^2.0.0",
"react-native-dialog": "^9.3.0",
"react-native-figma-squircle": "^0.3.4",
"react-native-actions-sheet": "~0.9.7",
"react-native-compressor": "~1.12.0",
"react-native-country-picker-modal": "~2.0.0",
"react-native-dialog": "~9.3.0",
"react-native-figma-squircle": "~0.3.4",
"react-native-gesture-handler": "~2.20.2",
"react-native-hyperlink": "^0.0.22",
"react-native-keyboard-aware-scroll-view": "^0.9.5",
"react-native-linear-gradient": "^2.8.3",
"react-native-minuit": "^1.3.52",
"react-native-popup-menu": "^0.18.0",
"react-native-hyperlink": "~0.0.22",
"react-native-keyboard-aware-scroll-view": "~0.9.5",
"react-native-linear-gradient": "~2.8.3",
"react-native-minuit": "~1.3.52",
"react-native-popup-menu": "~0.18.0",
"react-native-reanimated": "~3.16.1",
"react-native-reanimated-carousel": "^4.0.3",
"react-native-responsive-dimensions": "^3.1.1",
"react-native-reanimated-carousel": "~4.0.3",
"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-store-review": "^0.3.0",
"react-native-super-grid": "^5.0.0",
"react-native-sortables": "~1.8.0",
"react-native-store-review": "~0.3.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",
"rxjs": "^7.6.0"
"reactn": "~2.2.7",
"rxjs": "~7.6.0"
},
"devDependencies": {
"@babel/core": "^7.20.5",
"@babel/parser": "^7.25.6",
"@babel/traverse": "^7.25.6",
"@babel/core": "^7.25.2",
"@babel/parser": "~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-plugin-prettier": "^5.1.3",
"imagemin": "^9.0.0",
"imagemin-gifsicle": "^7.0.0",
"imagemin-jpegtran": "^7.0.0",
"imagemin-optipng": "^8.0.0",
"imagemin-svgo": "^11.0.1",
"prettier": "^3.2.5",
"typescript": "^5.3.3"
"eslint-config-prettier": "~9.1.0",
"eslint-plugin-prettier": "~5.1.3",
"imagemin": "~9.0.0",
"imagemin-gifsicle": "~7.0.0",
"imagemin-jpegtran": "~7.0.0",
"imagemin-optipng": "~8.0.0",
"imagemin-svgo": "~11.0.1",
"prettier": "~3.2.5",
"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
+18
View File
@@ -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
+143 -15
View File
@@ -1,27 +1,48 @@
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 { FONT_FAMILY } from "../styles/Fonts.js";
import { navigate } from "../navigation/NavigationService.js";
import { Routes } from "../navigation";
import { Input } from "../components/Input.js";
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 onLogin = async () => {
try {
setLoading(true);
await firebase.auth().signInWithEmailAndPassword(email.trim(), password);
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();
@@ -31,6 +52,13 @@ export default ({ navigation }) => {
} else {
navigation.reset({ index: 0, routes: [{ name: Routes.CreatePseudo }] });
}
};
const onLogin = async () => {
try {
setLoading(true);
await firebase.auth().signInWithEmailAndPassword(email.trim(), password);
await afterLoginNavigate();
} 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
onPress={() => navigate(Routes.ForgotPassword)}
>
<Pressable 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",
yarn.lock
+337 -252
View File
File diff suppressed because it is too large Load Diff