MISSING_REQUEST_URI firebase - reactjs

Question

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>
);
}