I am trying to integrate firebase with react-native(expo). I followed the firebase documentation found here. The documentation was quite straight-forward and works as intended, but since the document is in JS and I am coding in typescript, I am receiving quite a few errors on my linter.
So few points about the code below
- i have defined the SuccessfullyAuthenticatedUser because the type of parameter changes when I call the method onSignIn(result) within signInWithGooglAsync
- in onSignIn function i am recieving a value from firebase. The value received comes with type definitions, but value.additionalUserInfo.profile is defined as Object | null | undefined, therefore i am unable to access the values inside profile Object without explicitly defining profile as any. ESlint is kinda mad at that.
- In the isUserEqual function googleUser object has no method called getUserProfile().getUserId(). I tried to explicitly define type for that but I do not know how to define types for functions(classes?) which have functions of their own
I am quite sure that I am doing a lot of things wrong, and chasing down a rabbit hole. So someone please suggest me how to implement this in a better way or tell me how I resolve point 2 and 3.
interface SuccessfullyAuthenticatedUser {
...
type: "success";
getBasicProfile?: any;
}
const signInWithGoogleAsync = async () => {
try {
const result = await Google.logInAsync({...});
if (result.type === "success") {
onSignIn(result);
...
}
...
} catch (e) {
...
}
};
const onSignIn = (googleUser: SuccessfullyAuthenticatedUser) => {
....
....
firebase.auth().signInWithCredential(credential).then((value) => {
const profile: any = value.additionalUserInfo?.profile;
firebase.database().ref(...).set({
...
first_name: profile.given_name,
});
})
...
});
};
const isUserEqual = (
googleUser: SuccessfullyAuthenticatedUser,
firebaseUser: firebase.User | null,
) => {
if (firebaseUser) {
if (providerData[i]!.uid === googleUser.getBasicProfile().getId()){
...
}
return false;
};