Блог

Главная - Вопросы по программированию - FireBase getAuth и onAuthStateChanged не входят в импорт «firebase/auth

FireBase getAuth и onAuthStateChanged не входят в импорт «firebase/auth

# #javascript #reactjs #firebase #firebase-authentication

Вопрос:

Я пытаюсь изучить и использовать методы getAuth(), onAuthStateChanged() из «firebase/auth», но в папке node_modules/firebase/auth эти методы не включены. Похоже, что это похоже на изменение dir в зависимости от версий firebase. Мои Зависимости:

 "dependencies": {
    "antd": "^4.16.13",
    "firebase": "^9.0.2",
    "next": "11.1.2",
    "react": "17.0.2",
    "react-dom": "17.0.2"
  },

В документе firebase говорится, что я должен использовать import { getAuth, onAuthStateChanged } from "firebase/auth";
Я искал и обнаружил, что в эту "firebase/firebase-auth"; папку включен getAuth метод, но когда я пытаюсь его использовать import {getAuth} from "firebase/firebase-auth"; , он выдает сообщение об ошибке, firebase/firebase-auth что файл не экспортирован.

Что я пропустил?
Как я могу использовать методы getAuth и onAuthStateChanged с этими зависимостями?
спасибо вам за советы

Firebase.js:

 // import "firebase/auth"
import "firebase/compat/auth"
//import {getAuth} from "firebase/firebase-auth";
import firebase from 'firebase/compat/app';
import 'firebase/compat/firestore';

import { getAuth, onAuthStateChanged } from "firebase/auth";


// onAuthStateChanged(auth, user => {
//     // Check for user status
// });

const app = firebase.initializeApp({
    apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
    authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
    projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
    storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
    messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGIN_SENDER_ID,
    appId: process.env.REACT_APP_FIREBASE_APP_ID
})


export const auth = getAuth(app);

export default app

Комментарии:

1. можете ли вы поделиться кодом?

2. Почему вы пытаетесь импортировать getAuth дважды? Первый из них не выглядит действительным

3. @Фил, я не пытаюсь просто показать, что я раскомментировал их обоих, чтобы сказать тебе, что они оба не работают!

4. Это ошибка или предупреждение? Раньше я получал подобные предупреждения в проекте JS (в Webstorm). Отлично работал в проекте TS, все еще пытаясь отладить JS. Кроме того, почему у вас также есть импорт compat? Использовать любой из них ?

5. @Dharmaraj я перепробовал все возможности, ничего не сработало. Проблема здесь в том, что у меня нет функции gethAuth (), экспортируемой из firebase/auth. И в документации говорится, что я должен использовать эту функцию из каталога firebase/auth

Ответ №1:

Согласно документам firebase, «Код совместимости версии 9 идентичен коду версии 8, но импорт изменился».

Вот фрагмент из рабочего проекта с firebase@9.1.3

 import { firebase } from "@firebase/app";

import { initializeApp } from "firebase/app";

import { getAuth, onAuthStateChanged } from "firebase/auth";

const firebaseConfig =  {
  apiKey: "xxx",
  authDomain: "xxx",
  projectId: "xxx",
  storageBucket: "xxx",
  messagingSenderId: "xxx",
  appId: "xxx",
};

const app = initializeApp(firebaseConfig);
const auth = getAuth();

Ответ №2:

 import React, { useState } from 'react'
import { initializeApp } from "firebase/app";
import { getAuth, onAuthStateChanged, GoogleAuthProvider, signInWithPopup, signOut } from "firebase/auth";
import './App.css';

// import { getAnalytics } from "firebase/analytics";

// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

const firebaseConfig = {
  apiKey: 
  authDomain:
  databaseURL: 
  projectId: 
  storageBucket: 
  messagingSenderId: 
  appId: 
};


initializeApp(firebaseConfig);
// const analytics = getAnalytics(app);
const firebaseApp = initializeApp(firebaseConfig);
const provider = new GoogleAuthProvider();
const auth = getAuth(firebaseApp);

export default function App() {
  const [user, setUser] = useState(null)
  onAuthStateChanged(auth, (user) => {
          if (user) {
            // User is signed in, see docs for a list of available properties
            // https://firebase.google.com/docs/reference/js/firebase.User
            setUser(user);
            // ...
          } else {
            // User is signed out
            // ...
            setUser(null)
            }
          }
        );

  return <>{user ? 
  <><p>Welcome</p><button onClick={() => signOut(auth)}>Google Logout</button></>
  : <><p>Enjoy</p>
  <button onClick={() =>  signInWithPopup(auth, provider)
                  .then((result) => {
                    // The signed-in user info.
                    // eslint-disable-next-line
                    const user = result.user;
                    // ...
                  }).catch((error) => {
                    // Handle Errors here.
                    // eslint-disable-next-line
                    const errorCode = error.code;
                    // eslint-disable-next-line
                    const errorMessage = error.message;
                    // The email of the user's account used.
                    // eslint-disable-next-line
                    const email = error.email;
                    // The AuthCredential type that was used.
                    // eslint-disable-next-line
                    const credential = GoogleAuthProvider.credentialFromError(error);
                    // ...
                  })}>
                      Sign in with Google
                    </button>
  </>}</>
}
Метки: