default.auth(...).collection is not a function

Question

I started to get this error after editing my react.js code and i couldnt get rid of it. Checked some other pages about firebase.auth is not a function error but the answers there didnt help. Error gives at the beginninh of main.js file starting with "fire.auth..."

Exact error message:

TypeError: _config_Fire__WEBPACK_IMPORTED_MODULE_2__.default.auth(...).collection is not a function

My fire.js code

import firebase from 'firebase';
import 'firebase/firestore'

const config = { /* COPY THE ACTUAL CONFIG FROM FIREBASE CONSOLE */
    my config info here ...
};
const fire = firebase.initializeApp(config);
export default fire;

My main.js file which gives error:

import React, {useState,useEffect, useRef, useContext} from 'react'
import fire from '../config/Fire';
//import { UserConsumer } from  './UserContext.js';

//import {UserContext} from '../App'


function useTimes(){
  //const user2 = useContext(UserContext.Consumer)
    const [kullanici,setTimes] = useState([])
    useEffect(()=>{
      fire
            .auth()
            .collection('kullanici')
            .doc('gNfFy0uEsk5OvrZOfkGm')
            .onSnapshot((doc)=>{
                const newTimes = doc.data()
                setTimes(newTimes)
            })

    },[])

    return kullanici
}
function useInterval(callback, delay) {
    const savedCallback = useRef();

    // Remember the latest callback.
    useEffect(() => {
      savedCallback.current = callback;
    }, [callback]);

    // Set up the interval.
    useEffect(() => {
      function tick() {
        savedCallback.current();
      }
      if (delay !== null) {
        let id = setInterval(tick, delay);
        return () => clearInterval(id);
      }
    }, [delay]);
  }

const Main = () => {
  //console.log(firebase.auth().currentUser.uid)
    const kullanici =useTimes()
    let [count, setCount] = useState(0);
    //console.log(new Date().getTime())
    useInterval(() => {
        // Your custom logic here
        setCount(count + 1);
    }, 1000);
    return(
      
        
        Welcome {kullanici.nick}
        Silver: {kullanici.silver ? count * kullanici.silver : ''}
        Copper: {kullanici.silver ? count * kullanici.copper : ''}
        Iron: {kullanici.silver ? count * kullanici.iron : ''}
        
        
    )
  }


export default Main

user_2713850 · Answer

First of all, you have to import firebase/auth in your fire.js file.

And also try to import the core firebase sdk with firebase/app.

// fire.js

import firebase from 'firebase/app';
import 'firebase/firestore'
import 'firebase/auth';

...

This will solve the error .auth is not a function.

And lastly, you are trying to chain .collection() on auth(). If you are trying to read data from Firestore, you have to do it this way:

// main.js

...

import fire from '../config/Fire';

...

fire
  .firestore()
  .collection('kullanici')

...

default.auth(...).collection is not a function

1 Answers