Google SignIn for IOS with React-native error 400

Please provide the following:

  1. SDK Version: 36.0.0
  2. Platforms(Android/iOS/web/all): android and ios

I’m setting up a page where I can Id with a google account. This is my code :

    import React from "react"
    import { StyleSheet, Text, View, Image, Button } from "react-native"
    import * as Google from "expo-google-app-auth";
    
    export default class App extends React.Component {
      constructor(props) {
        super(props)
        this.state = {
          signedIn: false,
          name: "",
          photoUrl: ""
        }
      }
      signIn = async () => {
        try {
          const result = await Google.logInAsync({
            androidClientId:
              "1051966217196.apps.googleusercontent.com",
              iosClientId:
                     "1051966217196.apps.googleusercontent.com",
            scopes: ["profile", "email"]
          })
    
          if (result.type === "success") {
            this.setState({
              signedIn: true,
              name: result.user.name,
              photoUrl: result.user.photoUrl
            })
          } else {
            console.log("cancelled")
          }
        } catch (e) {
          console.log("error", e)
        }
      }
      render() {
        return (
          <View style={styles.container}>
            {this.state.signedIn ? (
              <LoggedInPage name={this.state.name} photoUrl={this.state.photoUrl} />
            ) : (
              <LoginPage signIn={this.signIn} />
            )}
          </View>
        )
      }
    }
    
    const LoginPage = props => {
      return (
        <View>
          <Text style={styles.header}>Sign In With Google</Text>
          <Button title="Sign in with Google" onPress={() => props.signIn()} />
        </View>
      )
    }
    
    const LoggedInPage = props => {
      return (
        <View style={styles.container}>
          <Text style={styles.header}>Welcome:{props.name}</Text>
          <Image style={styles.image} source={{ uri: props.photoUrl }} />
        </View>
      )
    }
    
    const styles = StyleSheet.create({
      container: {
        flex: 1,
        backgroundColor: "#fff",
        alignItems: "center",
        justifyContent: "center"
      },
      header: {
        fontSize: 25
      },
      image: {
        marginTop: 15,
        width: 150,
        height: 150,
        borderColor: "rgba(0,0,0,0.2)",
        borderWidth: 3,
        borderRadius: 150
      }
    })

On Android it’s ok, everthing is fine but in IOS I have that mistake :

Google 400 - That’s an error - Error : redirect_uri_mismatch

Can you help me understand where it goes wrong ? I’m new to react native so I need detailed explanations.
Thanks for your time and help.

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.