google sign in
This commit is contained in:
Thomas Demirdjian
+166
-16
@@ -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
|
||||
title="Se connecter avec Google"
|
||||
containerStyle={{
|
||||
width: "80%",
|
||||
alignSelf: "center",
|
||||
}}
|
||||
<GoogleAuthButton
|
||||
onPress={onLoginWithGoogle}
|
||||
disabled={loading}
|
||||
/> */}
|
||||
{/*<GoogleSigninButton*/}
|
||||
{/* style={{ width: "80%", height: 50, alignSelf: "center" }}*/}
|
||||
{/* color={GoogleSigninButton.Color.Dark}*/}
|
||||
{/* onPress={onLoginWithGoogle}*/}
|
||||
{/* disabled={loading}*/}
|
||||
{/*/>*/}
|
||||
loading={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>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user