I am trying to learn and use getAuth(), onAuthStateChanged() methods from "firebase/auth" But in the folder of node_modules/firebase/auth doesnt include those methods. It seems like changing dirs depending on versions of firebase. My Dependencies:
"dependencies": {
"antd": "^4.16.13",
"firebase": "^9.0.2",
"next": "11.1.2",
"react": "17.0.2",
"react-dom": "17.0.2"
},
By the firebase doc it sais that i should use import { getAuth, onAuthStateChanged } from "firebase/auth";
I searched and found that "firebase/firebase-auth"; folder has included getAuth method but when i try to use import {getAuth} from "firebase/firebase-auth"; it gives me an error states firebase/firebase-auth file is not exported.
What did I miss?
How i can use getAuth and onAuthStateChanged methods with this dependencies?
thank you for advices
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
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>
</>}</>
}