1

I am using firebae auth to log in and sign up for my react app. I can get sign up working but I am having issues with log in. I followed the https://firebase.google.com/docs/reference/rest/auth#section-sign-in-email-password for the api link. I followed the same code for log in than I did for sign up but I keep getting issues with it.

This is the error message i get when i try to log in.

Object {
  "error": Object {
    "code": 400,
    "errors": Array [
      Object {
        "domain": "global",
        "message": "MISSING_REQUEST_URI",
        "reason": "invalid",
      },
    ],
    "message": "MISSING_REQUEST_URI",
  },
}

This is my user action page for my app for log in.

export const login = (email, password) => {
    return async dispatch => {
        const response = await fetch('https://identitytoolkit.googleapis.com/v1/accounts:signInWithIdp?key=[API]', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ //javascript to json
                //key value pairs of data you want to send to server
                // ...
                email: email,
                password: password,
                returnSecureToken: true
            })
        });

        // console.log(await response.json());

        const data = await response.json(); // json to javascript
        console.log(data);
        if (!response.ok) {
            Alert.alert("There was a issue with logging in ")
        } else {
            await SecureStore.setItemAsync('email', data.email);
            await SecureStore.setItemAsync('token', data.idToken);
            dispatch({ type: SIGNUP, payload: { email: data.email, idToken: data.idToken } })
        }
    };
}

This is my user action page for my app for sign in.

export const signup = (email, password) => {
    return async dispatch => {
        const response = await fetch('https://identitytoolkit.googleapis.com/v1/accounts:signUp?key=[API]', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ //javascript to json
                //key value pairs of data you want to send to server
                // ...
                email: email,
                password: password,
                returnSecureToken: true
            })
        });

        // console.log(await response.json());

        const data = await response.json(); // json to javascript
        console.log(data);
        if (!response.ok) {
            Alert.alert("There was a issue with signing in ")
        } else {
            await SecureStore.setItemAsync('email', data.email);
            await SecureStore.setItemAsync('token', data.idToken);
            dispatch({ type: SIGNUP, payload: { email: data.email, idToken: data.idToken } })
        }
    };
};

Then this is my log in screen.

const LoginScreen = ({ navigation }) => {

    const [email, setEmail] = useState('')
    const [password, setPassword] = useState('')
    const dispatch = useDispatch()

    async function load() {
        let emailFromSecureStore = await SecureStore.getItemAsync('email');
        let tokenFromSecureStore = await SecureStore.getItemAsync('token');
        if (emailFromSecureStore && tokenFromSecureStore) {
            console.log("success", emailFromSecureStore);

            // dispatch(restoreUser(emailFromSecureStore, tokenFromSecureStore));

        } else {
            console.log("failure");
        }
    }

    useEffect(() => {
        load(); // uncomment to read from secure store
    }, [])


    return (
        <View style={styles.ViewStyle}>
            <TextInput placeholder='Email'
                onChangeText={setEmail}
                value={email} 
                style={styles.loginText}/>

            <TextInput placeholder='Password'
                onChangeText={setPassword}
                value={password} 
                style={styles.loginText}/>

            <View style={styles.gap}>

            </View>
            <Pressable style={styles.buttonStyle} onPress={() => dispatch(login(email, password))}>
            <Text style={styles.text}>Log in</Text>
            </Pressable>
        </View>
    );
}

Vanya Novikov
  • 51
  • 1
  • 1
  • 2

0 Answers0