login with google
This commit is contained in:
@@ -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";
|
||||
|
||||
+148
-20
@@ -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 { 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 [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;
|
||||
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 }] });
|
||||
}
|
||||
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",
|
||||
|
||||
Reference in New Issue
Block a user