[오늘의 이슈] 아주 쉬운 파이어베이스 Auth, 왜 로그인이 안될까?

 아무일 없을 것 같았던 2차 프로젝트, 3일 내내 불안했던 백엔드의 의견 차이가 결국 4일 째 터져 팀원이 나가고 백엔드는 결국 나와 다른 팀원 하나가 떠맡게 되었다. 결과적으로는 백엔드 전담 팀원이 나가 최선의 결과는 아니었지만, 불화가 끝나서 다행이었다. 그래도 남은 프론트엔드 지망자들이 백엔드를 해야한다는 부담과 프론트 코드를 전혀 못 짜는 상황이 오는 건 아닌지 불안했다.  그렇게 코치님과 대화하고 우리는 파이어베이스로 백을 처리하고 프론트에 집중하기로 하였다. 그리고 다음날 로그인부터 파이어스토어까지 알아보려고 찾아보며 코드를 치던 중 문서대로 했는데 에러가 발생했다. 처음 문서를 보며 아니 로그인이 이게 끝이야? 했는데 이 말이 무색하게 처음이라 헤맸다. 근데, 한글로 되어 있는 건 진짜 정말 편했다...

 

1. SDK를 가져오고 AUTH를 위해 코드 2줄 만 더 적으면 된다. 놀랍다.... vite에 맞게 .env 파일을 작성해주면 된다

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

const firebaseConfig = {
  apiKey: import.meta.env.VITE_API_KEY,
  authDomain: import.meta.env.VITE_AUTH_DOMAIN,
  projectId: import.meta.env.VITE_PROJECT_ID,
  storageBucket: import.meta.env.VITE_STORAGE_BUCKET,
  messagingSenderId: import.meta.env.VITE_MESSAGING_SENDER_ID,
  appId: import.meta.env.VITE_APP_ID,
  measurementId: import.meta.env.VITE_MEASUREMENT_ID,
};

export const app = initializeApp(firebaseConfig);

export const auth = getAuth(app);

 

2. 로그인을 위해 템플릿을 만든다.  그리고 AUTH 메서드를 사용만 해주면 된다. 

import { getAuth, createUserWithEmailAndPassword } from "firebase/auth";
import { useState } from "react";

const SignUp = () => {
  const auth = getAuth();
  const [email, setEmail] = useState<string>("");
  const [password, setPassword] = useState<string>("");
  const signup = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    createUserWithEmailAndPassword(auth, email, password)
      .then((userCredential) => {
        // Signed in
        const user = userCredential.user;
        console.log(user)
      })
      .catch((error) => {
        const errorCode = error.code;
        const errorMessage = error.message;
        console.log(errorCode)
        console.log(errorMessage)
      });
  };

  return (
    <div>
      <h1>Log In</h1>
      <form action="" onSubmit={signup}>
        <input
          type="email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
        />
        <input
          type="password"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
          autoComplete="off"
        />
        <button type="submit">Sign Up</button>
      </form>
    </div>
  );
};

export default SignUp;

 

3. ts를 쓴다면 env 타입 설정을 해주어야 한다. 다 string이다. id가 숫자로 되어 있어 number로 착각할 수 있는데 string이다.

interface ImportMetaEnv {
  readonly VITE_API_KEY: string;
  readonly VITE_AUTH_DOMAIN: string;
  readonly VITE_PROJECT_ID: string;
  readonly VITE_STORAGE_BUCKET: string;
  readonly VITE_MESSAGING_SENDER_ID: string;
  readonly VITE_APP_ID: string;
  readonly VITE_MEASUREMENT_ID: string;
}

 

4. sign in도 작성하고 아이디를 치고 들어가면 되야하는데 

 

잉? auth/operation-not-allowed 라고 한다. 코드는 알맞게 친거같은데(복사한 것 같은데) 맞왜틀을 시전하였다.

맨 처음에 auth를 제대로 import 안했나 싶었는데 문제는 파이어베이스 페이지에서 해결할 수 있었다. 

 

여기서 이메일/비밀번호 로그인을 허용해줘야한다. 소셜 로그인도 마찬가지이다. 본인이 허용하고 싶은 로그인 방식만 설정할 수 있다. 

 

그럼 잘된다.