I am currently using Typescript in conjunction with Firebase and React Native.
While working on the signup screen, I included Firebase like so:
import * as firebase from 'firebase/app';
import 'firebase/auth';
In my onSignUp function, I encountered this issue:
onSignUp = async () => {
if (this.state.email && this.state.password) {
try {
const response = await firebase
.auth()
.createUserWithEmailAndPassword(this.state.email, this.state.password);
} catch (error) {
if (error.code == 'auth/email-already-in-use') {
Alert.alert('Signup Error', 'User already exists!', [
{
text: 'Ok',
},
]);
}
}
}
};
Visual Studio Code is giving me an error about auth in await firebase.auth(), stating that
Property 'auth' does not exist on type 'typeof'Furthermore, it's also flagging the error.code and showing
Object is of type 'unknown'.ts(2571)Here is my complete code snippet:
export interface Props {}
interface State {
email: string;
password: any;
isLoading: boolean;
}
export default class LoginScreen extends React.Component<Props, State> {
constructor(props: Props) {
super(props);
this.state = {
email: '',
password: '',
isLoading: false,
};
}
onLogin = () => {};
onSignUp = async () => {
if (this.state.email && this.state.password) {
try {
const response = await firebase
.auth()
.createUserWithEmailAndPassword(
this.state.email,
this.state.password
);
} catch (error) {
if (error.code == 'auth/email-already-in-use') {
Alert.alert('Signup Error', 'User already exists!', [
{
text: 'Ok',
},
]);
}
}
}
};
render() {
return (
<View style={styles.container}>
<TextInput
placeholder="Your Email"
keyboardType="email-address"
autoCorrect={false}
style={styles.txtInput}
onChangeText={(email) => this.setState(email)}
/>
<TextInput
placeholder="Your Password"
secureTextEntry
style={styles.txtInput}
onChangeText={(password) => this.setState(password)}
/>
<TouchableOpacity style={styles.btnLog} onPress={this.onLogin}>
<Text style={styles.logTxt}>Login</Text>
</TouchableOpacity>
</View>
);
}
}
Any insights into why firebase.auth() and error.code issues are occurring? Your help would be greatly appreciated.
UPDATE: I attempted to follow the v9 guide using async/await, but it's still not functioning correctly:
import {initializeApp} from 'firebase/app';
import {firebaseConfig} from '../config/config';
import {getAuth, createUserWithEmailAndPassword} from 'firebase/auth';
export interface Props {}
interface State {
email: string;
password: any;
isLoading: boolean;
}
export default class LoginScreen extends React.Component<Props, State> {
constructor(props: Props) {
super(props);
this.state = {
email: '',
password: '',
isLoading: false,
};
this.initialFirebase();
}
initialFirebase = () => {
initializeApp(firebaseConfig);
};
auth = getAuth(this.initialFirebase);
onLogin = () => {};
onSignUp = async () => {
if (this.state.email && this.state.password) {
try {
const response = await createUserWithEmailAndPassword(
auth,
this.state.email,
this.state.password,
);
} catch (error) {
if (error.code == 'auth/email-already-in-use') {
Alert.alert('Signup Error', 'User already exists!', [
{
text: 'Ok',
},
]);
}
}
}
};