I am using typescript along with Firebase and React Native.

I was working on my signup screen and I imported firebase like this:

import * as firebase from 'firebase/app';
import 'firebase/auth';

Then on my onSignUp function I got this:

 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 exist!', [
            {
              text: 'Ok',
            },
          ]);
        }
      }
    }
  };

Visual Studio code is complaining about the auth on await firebase.auth() it says Property 'auth' does not exist on type 'typeof.

Additionally, its also complaining on the error.code and it saying Object is of type 'unknown'.ts(2571) not sure what it meant and been stuck for awhile.

Here's my complete code:

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 exist!', [
            {
              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 idea what's causing the firebase.auth() and error.code? Please help.

UPDATE: I tried following the v9 guide using async await but still not working:

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 exist!', [
            {
              text: 'Ok',
            },
          ]);
        }
      }
    }
  };

CodePudding user response：

You probably have the new Modular SDK V9 which uses a new syntax. If want to use existing syntax (v8) then change the imports to compat version:

import firebase from 'firebase/compat/app'
import 'firebase/compat/auth'
// import 'firebase/compat/[SERVICE]'

I would recommend upgrading to new SDK since it has certain performance benefits. You can try using this syntax:

import { initializeApp } from "firebase/app"
import { getAuth, createUserWithEmailAndPassword } from "firebase/auth"

const app = initializeApp({...config})

const auth = getAuth(app)


// in onSignUp
createUserWithEmailAndPassword(auth, email, password)
  .then((userCredential) => {
    // Signed in 
    const user = userCredential.user;
    // ...
  })
  .catch((error) => {
    const errorCode = error.code;
    const errorMessage = error.message;
    // ..
  });

You can refer to documentation for learning more about the new SDK.