[Firebase] React에서 Authentication로 로그인 구현하기

 

React에서 Authentication로 로그인 구현하기

 

---

 

 Firebase로 로그인 기능을 구현하기 위해 관련 강의도 들어보고 구글 검색도 열심히 해보았지만 이전 버전에 대한 내용이 많아서 공부하는 것에 어려움이 좀 있었다. 😥 그래서 Firebase 공식 문서를 읽어보며 최신 버전에 대해 공부했던 내용을 짧게나마 정리해보려 한다.

 

firebase 9.16.0 버전 기준으로 작성되었습니다.

 

---

 

# 이메일로 로그인하기

 

 

1. src에 firebase 파일 생성하기 

 

 src 폴더에 파일을 하나 생성해서 다음과 같이 입력한다.

 

// src/fbase.js

import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";

const firebaseConfig = {
  apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
  authDomain: process.env.REACT_APP_AUTH_DOMAIN,
  projectId: process.env.REACT_APP_PROJECT_ID,
  storageBucket: process.env.REACT_APP_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_MESSAGING_SENDER_ID,
  appId: process.env.REACT_APP_APPID,
};

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

 

 

2. 로그인 창을 만드려고 하는 js 파일로 와서 firebase를 import 해주기

 

// src/Login.js

import {
  getAuth,
  signInWithEmailAndPassword,
  createUserWithEmailAndPassword,
} from "firebase/auth";
import { auth } from "./fbase";

 

signInWithEmailAndPassword : 이메일로 로그인하기 기능

createUserWithEmailAndPassword : 이메일로 계정 생성하는 기능

 

 

3. 아이디, 비밀번호 값 저장하는 함수 만들기

 

const handleChange = (event) => {
  const {
    target: { name, value },
  } = event;
  if (name === "email") {
    setEmailValue(value);
  } else if (name === "password") {
    setPasswordValue(value);
  }
};

 

event.target.name이 "email"이면 해당 값을 emailValue에 저장하고, "password"이면 passwordValue에 저장하는 함수를 만든다. const { target: { name, value }, } = event 는 ES6 문법으로 표현한 것인데, 익숙하지 않다면 다음과 같이 작성해도 됨!

 

const handleChange = (event) => {
  if (event.target.name === "email") {
    setEmailValue(value);
  } else if (event.target.name === "password") {
    setPasswordValue(value);
  }
};

 

 

4. 로그인 함수 만들기

 

const handleSubmit = async (event) => {
  event.preventDefault();
  try {
    const auth = getAuth();
    let data;
    if (newAccount) {
      data = await createUserWithEmailAndPassword(auth, email, password);
      } else {
        data = await signInWithEmailAndPassword(auth, email, password);
      }
    } catch (error) {
      console.log(error)
    }
};

 

newAccount가 true라면 새로운 계정을 생성하고, 아니라면 이미 있는 계정으로 로그인을 할 수 있도록 해준다.

 

 

5. 변수 생성 및 html 작성하기

 

// 변수 생성

const [email, setEmail] = useState();
const [password, setPassword] = useState();
const [newAccount, setNewAccount] = useState(false);

 

새로 계정을 생성하는 것인지, 이미 있는 계정으로 로그인 하는 것인지 확인해주기 위해 newAccount 변수도 만들어 준다.

 

<div>
	<form onSubmit={handleSubmit}>
	 <input
   		name="email"
   		type="text"
   		placeholder="이메일"
   		required
   		onChange={handleChange}
   		value={emailValue || ""}
  	 />
  	 <input
   		name="password"
   		type="password"
   		placeholder="비밀번호"
   		required
   		onChange={handleChange}
   		value={passwordValue || ""}
  	 />
  	 <input
   		type="submit"
   		value={newAccount ? "회원가입" : "로그인"}
   	 />
  	</form>
</div>

 

value는 각각 뒤에 || ""를 붙여줘야 한다. 그렇지 않으면 콘솔창에 에러가 뜸... 그리고 새로운 계정이면 회원가입, 이미 계정이 있다면 로그인 버튼이 나타나도록 value={newAccount ? "회원가입" : "로그인"} 이라고 작성해준다. 끝!

 

---

 

 

# 구글 계정으로 로그인하기

 

fbase.js 파일은 이미 위에서 만들었으니 그 다음부터 시작!

 

 

1. 로그인 창을 만드려고 하는 js 파일에서 firebase를 import 해주기

 

// src/Login.js

import {
  GoogleAuthProvider,
  signInWithPopup,
} from "firebase/auth";
import { auth } from "./fbase";

 

구글 로그인은 팝업 창을 통해 구현할 거라서  GoogleAuthProvider,  signInWithPopup 둘 다 가져와준다.

 

 

2. 구글 로그인 함수 만들기

 

const handleGoogleLogIn = async (event) => {
  let provider;
  try {
    if (name === "google") {
      provider = new GoogleAuthProvider();
    }
    await signInWithPopup(auth, provider);
  } catch (error) {
    console.log(error);
  }
};

 

 

3. html 작성

 

<button
  onClick={handleGoogleLogIn}
  name="google">
  {newAccount ? "구글 계정으로 회원가입" : "구글 계정으로 로그인"}
</button>

 

클릭하면 구글 로그인 팝업 창이 뜨는 것을 확인할 수 있다.

 

 

---

 

다 정리해놓고 보니 굉장히 간단하긴 한데...?! ㅋㅋㅋㅋㅋ 막상 공부를 할 때는 fbase.js의 위치를 어디로 설정해야 하는지, auth를 export 해야 하는 건지 아니면 그냥 export하지 않아도 알아서 잘 돌아가는 건지, auth는 어떻게 작성해야하는지 등등... 어려움이 많았다. 공식문서 하나하나 읽어보고 다 작성해보고 드디어 돌아가는 코드를 찾음! 로그인 기능을 할 줄 알게 되어 굉장히 기쁘다.

 

 

참고 자료

https://firebase.google.com/docs/auth/web/start?hl=ko