27. [개발] Firebase Authentication 계정 만들기

27. [개발] Firebase Authentication 계정 만들기 - Vue3 Firebase 프로젝트

그랜파 개발자 2025. 4. 10. 03:54

Firebase Authentication

Firebase Authentication은 Google의 Firebase에서 제공하는 서비스로,
웹 및 모바일 애플리케이션에 사용자를 인증하고 관리하는 데 도움을 줍니다.
이 서비스는 여러 인증 방법을 제공하여 사용자가 로그인할 수 있도록 해줍니다.

Firebase Authentication을 통해 다양한 인증 방식을 손쉽게 구현할 수 있어,
앱의 사용자 인증을 보다 안전하고 효율적으로 관리할 수 있습니다.

Firebase Authentication을 설정하고 '계정 만들기' 를 구현 합시다.

1. createUserWithEmailAndPassword 설명

createUserWithEmailAndPassword는 Firebase Authentication에서 제공하는 메서드로,
사용자의 이메일과 비밀번호를 기반으로 새로운 계정을 생성합니다.
이 메서드는 클라이언트 애플리케이션에서 Firebase의 인증 시스템과 상호작용하기 위해 사용됩니다.

메서드 정의

createUserWithEmailAndPassword(auth, email, password)

매개변수

auth: Firebase Authentication 인스턴스입니다. (getAuth()로 가져올 수 있음)
email: 사용자가 가입하려는 이메일 주소.
password: 사용자가 설정한 비밀번호. 최소 6자 이상이어야 합니다.

반환값

Promise<UserCredential>: 성공하면 사용자 계정이 생성되고,
UserCredential 객체가 반환됩니다.
- user: 생성된 사용자의 정보 (uid, email 등 포함).
- accessToken: 인증에 사용할 토큰.

성공 시 동작

Firebase는 사용자의 이메일과 비밀번호를 기반으로 새로운 계정을 생성하고,
이 계정을 Firebase Authentication에 저장합니다.
사용자 정보는 Firebase 콘솔의 Authentication 섹션에서 확인할 수 있습니다.
기본적으로 로그인된 상태로 전환됩니다.

실패 시 처리

createUserWithEmailAndPassword 메서드는 실패 시 FirebaseError 객체를 반환하며,
code와 message를 통해 오류를 확인할 수 있습니다.

자주 발생하는 에러 코드

auth/email-already-in-use: 이미 존재하는 이메일 주소로 계정을 생성하려 할 때 발생.
auth/invalid-email: 잘못된 이메일 형식.
auth/weak-password: 비밀번호가 6자 미만일 때 발생.

2. signInWithEmailAndPassword 설명

signInWithEmailAndPassword는 Firebase Authentication에서 제공하는 메서드로,
이메일과 비밀번호를 사용하여 기존 사용자 계정으로 로그인하는 기능을 제공합니다.

메서드 정의

signInWithEmailAndPassword(auth, email, password)

매개변수

auth: Firebase Authentication 인스턴스 (getAuth()로 가져옴)
email: 사용자의 이메일 주소
password: 사용자의 비밀번호

반환값

Promise<UserCredential>
UserCredential.user 객체에는 로그인된 사용자 정보 (uid, email, displayName 등)가 포함됨

성공 시 동작

로그인에 성공하면 Firebase Authentication에서 사용자의 정보를 불러옴
userCredential.user 객체를 통해 UID, 이메일, 인증 상태 등을 확인 가능
Firebase 콘솔에서 Authentication → Users에서 로그인된 사용자를 확인 가능

실패 시 발생하는 오류

auth/user-not-found : 해당 이메일로 등록된 사용자가 없음
auth/wrong-password : 비밀번호가 틀림
auth/invalid-email : 이메일 형식이 잘못됨
auth/too-many-requests : 로그인 시도 횟수가 많아 계정이 일시적으로 차단됨

3. signOut 설명

signOut은 Firebase Authentication에서 제공하는 메서드로,
현재 로그인한 사용자를 로그아웃시키는 기능을 합니다.
이 메서드를 호출하면 Firebase 인증 세션이 종료되며,
onAuthStateChanged를 사용하면 로그인 상태 변화를 감지할 수 있습니다.

메서드 정의

signOut(auth)

매개변수

auth: Firebase Authentication 인스턴스 (getAuth()로 가져옴)

반환값

Promise<void>
성공하면 void를 반환하고, 에러가 발생하면 catch에서 처리 가능

로그아웃 후 동작

signOut을 호출하면 Firebase 인증 세션이 초기화됨
onAuthStateChanged에서 로그아웃 상태를 감지할 수 있음
Firestore 또는 Vuex 등의 상태 관리를 사용했다면, 로그아웃 후 데이터를 초기화해야 함

4. Firebase에서 Authentication 설정

Firebase Console로 이동
프로젝트 선택 후 Authentication > 시작하기 클릭
"이메일/비밀번호" 로그인 방법 활성화

계정 만들기 - Vue 컴포넌트

AccountView.vue

<!-- src/views/AccountView.vue -->
<template>
  <div class="signup-container">
    <h2>계정 만들기</h2>
    <form @submit.prevent="handleSignup">
      <div>
        <label for="email">이메일:</label>
        <input type="email" id="email" v-model="email" required />
      </div>
      <div>
        <label for="password">비밀번호:</label>
        <input type="password" id="password" v-model="password" required />
      </div>
      <button type="submit">계정 만들기</button>
    </form>
    <p v-if="errorMessage" class="error">{{ errorMessage }}</p>
    <p v-if="successMessage" class="success">{{ successMessage }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { createUserWithEmailAndPassword } from 'firebase/auth';
import { auth } from '@/firebase'; // Firebase 설정 파일 임포트

// 사용자 입력 상태
const email = ref('');
const password = ref('');

// 에러 메시지와 성공 메시지 상태
const errorMessage = ref('');
const successMessage = ref('');

// 회원가입 핸들러
const handleSignup = async () => {
  try {
    // Firebase에서 이메일과 비밀번호로 사용자 계정 생성
    const userCredential = await createUserWithEmailAndPassword(auth, email.value, password.value);
    // 성공 메시지
    successMessage.value = `회원가입 성공! 환영합니다, ${userCredential.user.email}`;
    errorMessage.value = ''; // 에러 메시지 초기화
    // 입력 필드 초기화
    email.value = '';
    password.value = '';
  } catch (error) {
    // 에러 처리
    errorMessage.value = `회원가입 오류: ${error.message}`;
    successMessage.value = ''; // 성공 메시지 초기화
  }
};
</script>

<style scoped>
.signup-container {
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background-color: #f9f9f9;
}

h2 {
  text-align: center;
  margin-bottom: 20px;
}

div {
  margin-bottom: 15px;
}

input {
  width: 100%;
  padding: 10px;
  margin-top: 5px;
}

button {
  width: 100%;
  padding: 10px;
  background-color: #4caf50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #45a049;
}

.error {
  color: red;
  font-size: 14px;
}

.success {
  color: green;
  font-size: 14px;
}
</style>

설명:

script setup: setup() 함수 없이 직접적으로 컴포넌트 내부에서 상태 변수와 메서드를 정의합니다.
이 방식은 코드가 더 간결하고 직관적입니다.
ref: email, password, errorMessage, successMessage 모두 ref로 정의하여 반응형 상태를 관리합니다.
handleSignup: createUserWithEmailAndPassword를 호출하여 사용자를 Firebase에 등록합니다. 성공 및 오류 메시지는 상태 변수에 저장됩니다.
v-model: 이메일과 비밀번호 입력 필드와 ref 변수를 연결하여 양방향 데이터 바인딩을 합니다.
폼 제출: @submit.prevent="handleSignup"로 폼이 제출될 때 handleSignup 함수가 실행되도록 설정합니다.

실행

npm run dev