Firebase로 회원가입 & 로그인 기능 구현하기 - Authentication

 

📌

근래에 프로젝트들을 진행하면서 꼭 필수적으로 들어가는 기능들이 있었다. 

구태여 프로젝트 뿐만아니라 대부분 사이트에 있는 필수 기능이기도 한 

바로 회원가입, 로그인 기능이다! 

토이프로젝트를 진행하면서 JSON Server로 로그인기능을 구현해보기는 했는데 

Firebase가 훨씬 더 구현하기 간편한 것 같다. 

 

---

로그인 기능 이해하기

1. 회원가입

서비스를 사용하는 사람들은 우선 회원가입을 하는데 email, password 등 필요한 정보를 db에 저장한다. 

 

2. 로그인

그 후 사용자들은 email, password를 입력하면 db에서는 해당 user를 구별하여 해당 user에 대한 token을 전달한다. 

 

3. 로그인 이후 

token을 전달 받은 사용자들은 db에 해당 token을 header에 넣어 원하는 요청과 함께 전달하여 그에 맞는 응답을 받는다. 

 

---

Authentication

1) Authentication란?

Firebase에서 제공하는 사용자 인증 서비스로 웹 및 모바일에서 사용자를 안전하고 쉽게 인증할 수 있다. 또한 다양한 인증방법을 지원하고 사용자 관리 및 보안을 관리하기 위한 강력한 도구를 제공한다. 

 

2) Authentication 특징 

• 이메일/암호, 전화번호, Google, Facebook, Twitter, GitHub 등 다양한 인증 방법을 제공한다. 
• firebase conseole 또는 Authentication API를 사용하여 사용자를 관리 할 수 있다. 
  • 새로운 사용자 생성
  • 기존 사용자 관리
  • 사용자 프로필 정보 저장 및 업데이트
• 사용자 인증 및 세션 관리에 대한 보안 기능을 제공한다. 즉, 사용자 데이터를 안전하게 보호하며 인증된 사용자만이 애플리케이션의 보호된 리소스를 액세스 할 수 있다. 

 

💡 Authentication는 인증 관련 작업을 최소화하고 안전한 방법으로 사용자 인증을 할 수 있다.

 

로그인 기능 시작하기 - Authentication

1. 해당 프로젝트에서 Authentication 클릭한다.

 

2. 시작하기 클릭!

 

3. 원하는 로그인 방식을 선택해준다. → 나중에 다른 로그인 방식도 하고 싶다면 추가해줄 수 있다.

 

4.1 이메일/비밀번호를 선택했을 경우!

둘 다 사용설정(enable)을 눌러주고 저장을 클릭한다. 

 

 

4.2 구글을 선택했을 경우! 

사용설정(enable)을 눌러 사용 할 이메일을 입력해주고 SDK 정보를 확인한뒤 저장을 누른다. → SDK 정보는 나중에 따로 확인할 수 있음!

 

5. 추가한 로그인 방식을 확인할 수 있다. 

 

---

리액트로 회원가입 & 로그인 기능 구현하기

자바스크립트를 사용하여 비밀번호 기반 계정으로 Firebase에 인증하기

 

설치하기

npm install firebase

 

기본 셋업하기

import { initializeApp } from "firebase/app";

const firebaseConfig = {
  apiKey: import.meta.env.VITE_API_KEY,
  authDomain: import.meta.env.VITE_AUTH_DOMAIN,
  projectId: import.meta.env.VITE_PROJECT_ID,
};

//firebase 초기화
const app = initializeApp(firebaseConfig);

• 프로젝트를 생성하면 확인했던 SDK를 통해 firebase를 초기화 한다.
• SDK를 통해 가져온 정보들은 공개적으로 사용하기 보단 환경변수 설정을 통해 보호해준다. 

 

.env 파일로 환경 변수 설정

VITE_API_KEY=
VITE_AUTH_DOMAIN=
VITE_PROJECT_ID=

 

💡 이러한 파일들은 firebase.js 파일을 만들어 따로 관리하는 것이 좋다. 회원가입이나 로그인 로직을 각각의 컴포넌트에서 관리하면 해당 기능에 지나치게 의존적인 컴포넌트가 될 수 있기 때문이다. 또한 코드의 복잡성을 줄이기 위해 따로 관리하는 것이 좋다.

 

회원가입 기능 구현하기

 

firebase.js 추가

import { initializeApp } from "firebase/app";
import { getAuth, createUserWithEmailAndPassword } 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,
};

//firebase 초기화
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);

export { auth, createUserWithEmailAndPassword };

 

회원가입 컴포넌트

import React, { useState } from "react";
import Input from "../component/Input";
import { createUserWithEmailAndPassword } from "firebase/auth";
import { auth } from "../api/firebase";

export default function Register() {
	const [formData, setFormData] = useState({
		email: "",
		password: "",
	});

	const signUp = async () => {
		try {
			const userCredential = await createUserWithEmailAndPassword(auth, formData.email, formData.password);
			const user = userCredential.user;
			console.log("회원가입 성공:", user);
		} catch (error) {
			console.error("Error:", error);
		}
	};

	const onChange = e => {
		const { name, value } = e.target;
		setFormData(prevFormData => ({
			...prevFormData,
			[name]: value,
		}));
	};

	const onSubmit = e => {
		e.preventDefault();
		signUp();
	};

	return (
		<>
			<h2>회원가입</h2>
			<form onSubmit={onSubmit}>
				<div>
					<Input
						label={"이메일"}
						type={"email"}
						placeholder={"이메일을 입력해주세요."}
						name={"email"}
						value={formData.email}
						onChange={onChange}
					/>
					<Input
						label={"비밀번호"}
						type={"password"}
						placeholder={"비밀번호를 입력해주세요."}
						name={"password"}
						value={formData.password}
						onChange={onChange}
					/>
				</div>
				<button className="login" type="submit">
					가입하기
				</button>
			</form>
		</>
	);
}

 

폼에 이메일과 비밀번호를 입력해준 뒤 가입하기 버튼을 눌러주면 된다. 가입이 성공하면 콘솔에서 회원가입 성공과 함께 내용을 확인할 수 있다. 

 

파이어베이스 콘솔로 돌아가 확인하면 내가 등록한 내용이 추가된 걸 확인할 수 있다!

 

 

로그인 기능 구현하기

 

firebase.js 추가

import { initializeApp } from "firebase/app";
import { getAuth, createUserWithEmailAndPassword, signInWithEmailAndPassword } 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,
};

//firebase 초기화
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);

export { auth, createUserWithEmailAndPassword, signInWithEmailAndPassword };

 

로그인 컴포넌트

import { useState } from "react";
import { useNavigate } from "react-router-dom";
import "./App.css";
import Input from "./component/Input";
import { signInWithEmailAndPassword } from "firebase/auth";
import { auth } from './api/firebase';

function App() {
	const navigate = useNavigate();
	const [formData, setFormData] = useState({
		email: "",
		password: "",
	});

	const login = async () => {
		try {
			const userCredential = await signInWithEmailAndPassword(auth, formData.email, formData.password);
			const user = userCredential.user;
			console.log("로그인 성공:", user);
		} catch (error) {
			console.error("Error:", error);
		}
	};

	const onChange = e => {
		const { name, value } = e.target;
		setFormData(prevFormData => ({
			...prevFormData,
			[name]: value,
		}));
	};

	const onSubmit = e => {
		e.preventDefault();
		login();
	};

	const handleClick = () => {
		navigate("/register");
	};

	return (
		<>
			<h2>로그인</h2>
			<form onSubmit={onSubmit}>
				<div>
					<Input
						label={"이메일"}
						type={"email"}
						placeholder={"이메일을 입력해주세요."}
						name={"email"}
						value={formData.email}
						onChange={onChange}
					/>
					<Input
						label={"비밀번호"}
						type={"password"}
						placeholder={"비밀번호를 입력해주세요."}
						name={"password"}
						value={formData.password}
						onChange={onChange}
					/>
				</div>
				<button className="login">로그인</button>
				<button className="join" onClick={handleClick}>
					혹시 아직 회원이 아니신가요?
				</button>
			</form>
		</>
	);
}

export default App;

로그인도 회원가입 폼과 거의 같은 형태이다. 

 

기존에 회원가입했던 이메일, 비밀번호를 입력하고 로그인 버튼을 눌러주면 된다. 로그인이 되면 콘솔에서 확인할 수 있다. 

 

💡 간단하게 로그인폼 만들면서 해봤는데 파이어베이스와 연결 해두니 여러 함수를 이용해서 쉽게 회원가입 / 로그인 기능을 구현할 수 있었다.