Why I am redirecting to "Google.com" when tried Google Login in React Native Expo App?

I am trying to add Google Login in my Expo React Native application and following official expo documentation from here Auth with Google.

When I login through Expo Play Store App it is working completely fine, but when I build apk by EAS services it is loading for some time and redirecting me to "www.google.com".

I am a beginner and not able to solve this for more than 20 hours now. Please help.

Here is my Login Screen Code and other files.

import { StyleSheet, View, LogBox, Pressable, Text } from "react-native";
import { useEffect, useState } from "react";
import Fonts from "../utils/Fonts";
import Colors from "../utils/Colors";
import { db } from "../utils/firebase";
import GoogleIcon from "../icons/GoogleIcon";
import * as WebBrowser from "expo-web-browser";
import { LivornLogoIcon } from "../icons/HeaderIcons";
import { ref, onValue } from "firebase/database";
import FormComponent from "../components/FormComponent";
import * as Google from "expo-auth-session/providers/google";
import { useAndroidRipple } from "../hooks/useAndroidRipple";
import AsyncStorage from "@react-native-async-storage/async-storage";
import PrimaryButtonComponent from "../components/PrimaryButtonComponent";
WebBrowser.maybeCompleteAuthSession();
LogBox.ignoreLogs(["The useProxy option is deprecated and will be removed in a future release"]);
export default function LoginScreen({ setUserLoginInfo }) {
const [token, setToken] = useState("");
const [inviteCode, setInviteCode] = useState();
const [isAuthorized, setIsAuthorized] = useState(true);
const [errorMessage, setErrorMessage] = useState("");
const [request, response, promptAsync] = Google.useAuthRequest({
// iosClientId: "",
androidClientId: // My ID
expoClientId: // My ID
webClientId: // My ID
});
useEffect(() => {
handleEffect();
}, [response, token]);
async function handleEffect() {
const user = await getLocalUser();
if (!user) {
if (response?.type === "success") {
setToken(response.authentication.accessToken);
getUserInfo(response.authentication.accessToken);
}
} else {
setUserLoginInfo(user);
}
}
const getLocalUser = async () => {
const data = await AsyncStorage.getItem("@user");
if (!data) return null;
return JSON.parse(data);
};
const getUserInfo = async (token) => {
if (!token) return;
try {
const response = await fetch("https://www.googleapis.com/userinfo/v2/me", {
headers: { Authorization: `Bearer ${token}` },
});
const user = await response.json();
await AsyncStorage.setItem("@user", JSON.stringify(user));
setUserLoginInfo(user);
} catch (error) {
// Add your own error handler here
}
};
return (
<View style={styles.container}>
<LivornLogoIcon scale={6} marginLeft={10} />
{isAuthorized && (
<View style={styles.buttonContainer}>
<Pressable
disabled={!request}
style={styles.googleButton}
onPress={() => promptAsync()}
android_ripple={useAndroidRipple(170)}
>
<GoogleIcon scale={0.35} marginRight={12} />
<Text style={Fonts.primaryText}>Continue with Google</Text>
</Pressable>
</View>
)}
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: 100,
alignItems: "center",
justifyContent: "flex-start",
backgroundColor: Colors.blackTheme.backgroundPrimary,
},
buttonContainer: {
width: "80%",
marginTop: 20,
overflow: "hidden",
borderRadius: 100,
},
googleButton: {
height: 60,
borderRadius: 100,
flexDirection: "row",
alignItems: "center",
justifyContent: "center",
backgroundColor: Colors.blackTheme.buttonAndIconColor,
},
errorMessage: {
color: "red",
marginTop: 20,
marginBottom: -40,
},
});

This is my app.json

{
"expo": {
"name": "Livorn",
"slug": "Livorn",
"version": "1.0.0",
"orientation": "portrait",
"icon": "./assets/LivornAdaptiveIcon.png",
"userInterfaceStyle": "light",
"splash": {
"image": "./assets/LivornSplashScreen.png",
"resizeMode": "contain",
"backgroundColor": "#000000"
},
"updates": {
"fallbackToCacheTimeout": 0
},
"assetBundlePatterns": [
"**/*"
],
"ios": {
"supportsTablet": true
},
"android": {
"adaptiveIcon": {
"foregroundImage": "./assets/LivornAdaptiveIcon.png",
"backgroundColor": "#000000"
},
"package": "company.cubes.Livorn"
},
"web": {
"favicon": "./assets/LivornFavicon.png"
},
"scheme": "Livorn",
"extra": {
"eas": {
"projectId": "b198162a-e569-4414-8d5f-86148568b764"
}
}
}
}

In app.json.

Make slug and scheme both to lowercase and equal. It would solve the problem.