[firebase] googleLogin()

export async function googleLogin() {
  return signInWithPopup(auth, googleProvider)
    .then((result) => {
      const user = result.user;
      return user;
    })
    .catch((error) => {
      console.error(error);
    });
}

  googleLogin().then((user) => setUser(user));

googleLogin에 성공하면 user가 전달될 것임(함수 부분에서 return user했음)

그걸로 setUser하겠다! 

  googleLogin().then(setUser);

이렇게 간략하게 표시가능하다. 

 

 

오랜만에 블로그...

요즘은 블로그 할 정신이 없었다.

음... 이건 핑계인 것 같고 그냥 공부가 하기 싫었다.

 

쉬면서 까치 얘기랑 일상 기록을 하려고 했는데 까먹었다. 

일기 보고 몰아서 써봐야지,,, ! 이런 기회를 주신 ㅃ님께 감사를 

 

최종 로그인 코드

 

// src/api/firebase.js

import { initializeApp } from "firebase/app";
import {
  getAuth,
  signInWithPopup,
  GoogleAuthProvider,
  signOut,
  onAuthStateChanged,
} from "firebase/auth";

const firebaseConfig = {
  apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
  databaseURL: process.env.NEXT_PUBLIC_FIREBASE_DB_URL,
  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
};

const app = initializeApp(firebaseConfig);
const googleProvider = new GoogleAuthProvider();
export const auth = getAuth(app);

export async function googleLogin() {
  return signInWithPopup(auth, googleProvider).catch((error) => {
    console.error(error);
  });
}

export async function googleLogout() {
  return signOut(auth).catch((error) => console.log(error));
}

export function onUserStateChange(callback) {
  onAuthStateChanged(auth, (user) => {
    callback(user);
  });
}

 

// LayoutHeader.tsx

import { googleLogin, googleLogout, onUserStateChange } from "@/api/firebase";
import User from "@/components/units/user/User";
import Link from "next/link";
import React, { useEffect, useState } from "react";
import { HiShoppingCart } from "react-icons/hi";

export default function Header() {
  const [user, setUser] = useState<any>();

  useEffect(() => {
    onUserStateChange((user: any) => {
      setUser(user);
    });
  }, []);
  
  return (
    <header className="flex flex-row justify-between items-center">
      <Link href="/">
        <p className="text-xl font-semibold">Beanmarket</p>
      </Link>
      <nav className="flex items-center gap-4">
        <p>장바구니</p>
        <HiShoppingCart />
        <a href="/product/register">상품등록</a>
        {user ? (
          <>
            <User user={user} />
            <button onClick={googleLogin}>로그아웃</button>
          </>
        ) : (
          <button onClick={googleLogout}>로그인</button>
        )}
      </nav>
    </header>
  );
}

 

---

 

1. 로그인, 로그아웃 구분해서 carts 보여주고 숨기기

2. admin에 따라서 작성 아이콘 보여주고 숨기기 - realtime database 

 

1 -> user 있으면 보여주고 없으면 안 보여주면 되지 않나??

2 -> 

 

import { getDatabase } from "firebase/database";

...

const app = initializeApp(firebaseConfig);


const database = getDatabase(app);

export function writeUserData(userId) {
  const db = getDatabase();
  set(ref(db, "users" + userId), {
    userId,
  });
}

 

db에 admins라는 이름으로 admin id들을 저장함... -> 어디서 저장...? 내가 그냥 직접 써주면 되나? 

로그인 하면 db의 admins 목록에 있는지 확인함... -> 그래 해보겠음,... 

있으면 admin 없으면 일반 회원... 

 

 

0207

읽는 것까진 했는데 값 비교가 안됨