Блог

Я работаю на веб-сайте электронной коммерции, используя next js и firebase для аутентификации и в качестве источника базы данных . Тем не менее , я выяснил, как зарегистрироваться с помощью аутентификации firebase . Я пытаюсь понять, как отобразить информацию о моих пользователях, т. е. имя, в компоненте заголовка моего проекта

Вот файл конфигурации firebase

 import firebase from "firebase";  const firebaseConfig = {  apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",  authDomain: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",  projectId: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",  storageBucket: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",  messagingSenderId: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",  appId: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",  measurementId: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx" };  // Initialize Firebase if (!firebase.apps.length) {  firebase.initializeApp(firebaseConfig);}    export{firebase}  

Вот мой компонент заголовка . я хочу отобразить его в ЧАСТИ ПРИВЕТСТВИЯ

 import Image from "next/image"; import 'tailwindcss/tailwind.css' import { getAuth } from "firebase/auth";  import firebase from "../Firebase/Firebase"; // import { signIn, signOut, useSession } from "next-auth/client"  import { MenuIcon, SearchIcon, ShoppingCartIcon } from "@heroicons/react/outline"; function Header() {        const auth = getAuth();  const customer = auth.currentUser;  if (user !== null) {  // The user object has basic properties such as display name, email, etc.  const displayName = user.displayName;  const email = user.email;  const photoURL = user.photoURL;  const emailVerified = user.emailVerified;   // The user's ID, unique to the Firebase project. Do NOT use  // this value to authenticate with your backend server, if  // you have one. Use User.getToken() instead.  const uid = user.uid;  }   const user = firebase.auth().currentUser;  if (user !== null) {  // The user object has basic properties such as display name, email, etc.  const displayName = user.displayName;  const email = user.email;  const photoURL = user.photoURL;  const emailVerified = user.emailVerified;   // The user's ID, unique to the Firebase project. Do NOT use  // this value to authenticate with your backend server, if  // you have one. Use User.getToken() instead.  const uid = user.uid;  }  return (  lt;divgt;  lt;div className="flex items-center bg-amazon_blue p-1 flex-grow py-2"gt;  {/* top nav */}  lt;div className=" mt-2 flex items-center flex-grow sm:flex-grow-0"gt;  lt;Image src="https://links.papareact.com/f90"  width={150}  height={40}  objectFit="contain"  className="cursor-pointer"   /gt;  lt;/divgt;   {/* bottom nav */}   {/* Search bar */}  lt;div className="hidden sm:flex items-center h-10 cursor-pointer flex-grow rounded-md bg-yellow-400 hover:bg-yellow-500"gt;  lt;input className="p-2 h-full w-6 flex-grow flex-shrink rounded-l-md focus:outline-none px-4 " type="text" /gt;  lt;SearchIcon className="h-12 p-4" /gt;  lt;/divgt;  {/* Rigth */}  lt;div className="text-white flex items-center text-xs space-x-6 mx-6 whitespace-nowrap"gt;  lt;div onClick={SigninWithFirebase} className="signIn cursor-pointer links"gt;  lt;pgt;`hello ${displayName}`lt;/pgt;  lt;p className="font-extrabold md:text-sm"gt;Account amp; listlt;/pgt;  lt;/divgt;   lt;div className="cursor-pointer links"gt;  lt;pgt;Returnslt;/pgt;  lt;p className="font-extrabold md:text-sm"gt;Orderslt;/pgt;   lt;/divgt;  lt;div className="cursor-pointer relative links flex items-center"gt;  lt;span className="absolute top-0 right-0 md:right-10 h-4 w-4 bg-yellow-400 text-center rounded-full text-black font-bold"gt; 0lt;/spangt;  lt;ShoppingCartIcon className="h-10" /gt;  lt;p className="hidden md:inline font-extrabold md:text-sm mt-2"gt;Basketlt;/pgt;  lt;/divgt;  lt;/divgt;   lt;/divgt;  lt;div className="space-between flex items-center space-x-3 p-2 pl-6 bg-amazon_blue-light text-white text-sm "gt;   lt;p className="link flex items-center"gt;  lt;MenuIcon className="h-6 mr-1" /gt;  All  lt;/pgt;   lt;p className="link"gt;Menlt;/pgt;  lt;p className="link"gt;Womenlt;/pgt;  lt;p className="link"gt;Shoeslt;/pgt;  lt;p className="link "gt;Accessories lt;/pgt;  lt;p className="link hidden lg:inline-flex"gt;Latestlt;/pgt;  lt;p className="link hidden lg:inline-flex"gt;Latestlt;/pgt;  lt;p className="link hidden lg:inline-flex"gt;Latestlt;/pgt;      lt;/divgt;  lt;/divgt;    ) }  export default Header