6개월간의 수업을 수료 후에 노마드코더의 트위더 클론코딩에 도전하게 되었다. 기존에 개인 프로젝트에서도 Firebase를 이용한 로그인 기능을 구현해본적은 있지만, 간단하게 깃허브나 구글로 로그인하는 기능만 구현해보았던 부분이 아쉬웠는데, 클론코딩을 통해서 이메일과 패스워드로 로그인하는 부분을 추가로 진행하게 되었다.
Firebase 이메일/비밀번호 로그인 기능 구현
Firebase 이메일/비밀번호 로그인 제공업체 설정
-
Firebase 콘솔에서 로그인 기능을 구현하려는 프로젝트를 선택하고 Firebase 인증을 활성화한다.
-
sign-in-method에 들어가서 원하는 로그인 제공업체를 선택한다. 이번 프로젝트에서는 기본 제공업체에서 이메일/비밀번호와 추가 제공업체에서 깃허브를 진행하려고 한다.
-
이메일/비밀번호를 추가 할 경우, 이메일/비밀번호를 선택하면 아래의 사진과 같이 사용설정을 클릭한 후, 저장을 클릭해주면 된다.
-
sign-in-method에 들어가면, 내가 선택한 항목이 사용설정되었다는 것을 확인할 수 있다.
Firebase 초기화
Firebase SDK 사용하여 구성정보를 불러오며, Firebase를 초기화준다. firebaseConfig에 기재한 정보들은 중요한 정보들로, env파일에 적은 내용들을 불러왔다.
import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";
import { getFirestore } from "firebase/firestore";
import { getStorage } from "firebase/storage";
const firebaseConfig = {
apiKey: import.meta.env.VITE_APP_FIREBASE_API_KEY,
authDomain: import.meta.env.VITE_APP_FIREBASE_AUTH_DOMAIN,
projectId: import.meta.env.VITE_APP_FIREBASE_PROJECT_ID,
storageBucket: import.meta.env.VITE_APP_FIREBASE_STORAGE_BUCKET,
messagingSenderId: import.meta.env.VITE_APP_FIREBASE_MESSAGING_SENDER_ID,
appId: import.meta.env.VITE_APP_FIREBASE_APP_ID,
measurementId: import.meta.env.VITE_APP_FIREBASE_MEASUREMENT_ID,
};
const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);회원가입 기능 구현
사용자가 필요한 정보들을 입력한 후 회원가입 버튼을 클릭하면, Firebase의 인증 시스템을 통해 사용자를 생성하는 createUserWithEmailAndPassword 함수를 사용하여, firebase 파일에서 작성한 auth와 사용자가 입력한 아이디와 비밀번호를 보내준다. 성공적으로 생성된다면, updateProfile를 이용하여 사용자의 프로필 정보를 업데이트해준다. credentials 변수에 담은 회원가입에 성공한 user 정보를 보내주고, displayName은 사용자가 입력한 이름으로 업데이트 해주었다.
import React, { useState } from 'react';
import { Link, useNavigate } from 'react-router-dom';
import { auth } from '../firebase';
import { FirebaseError } from 'firebase/app';
import { createUserWithEmailAndPassword, updateProfile } from 'firebase/auth';
export default function CreateAccount() {
const navigate = useNavigate();
const [isLoading, setIsLoading] = useState(false);
const [error, setError] = useState('');
const [form, setForm] = useState({ name: '', email: '', password: '' });
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const { name, value } = e.target;
setForm({ ...form, [name]: value });
};
const handleFormSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
setError('');
if (
isLoading ||
form.name === '' ||
form.email === '' ||
form.password === ''
)
return;
try {
setIsLoading(true);
const credentials = await createUserWithEmailAndPassword(
auth,
form.email,
form.password,
);
await updateProfile(credentials.user, { displayName: form.name });
navigate('/');
} catch (e) {
if (e instanceof FirebaseError) {
setError(e.message);
}
} finally {
setIsLoading(false);
}
};
return (
<Wrapper>
{/* 생략 */}
<Wrapper>
)
}로그인 기능 구현
firebase의 signInWithEmailAndPassword 함수를 사용하여 firebase 파일에서 작성한 auth와 사용자가 입력한 아이디와 비밀번호를 보내준다. 입력한 정보가 일치한 유저가 있다면 로그인이 완료되며, 아닐 경우에는 FirebaseError를 사용하여 error 메세지를 보여준다.
import React, { useState } from 'react';
import { Link, useNavigate } from 'react-router-dom';
import { auth } from '../firebase';
import { FirebaseError } from 'firebase/app';
import { signInWithEmailAndPassword } from 'firebase/auth';
export default function Login() {
const navigate = useNavigate();
const [isLoading, setIsLoading] = useState(false);
const [error, setError] = useState('');
const [form, setForm] = useState({ email: '', password: '' });
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const { name, value } = e.target;
setForm({ ...form, [name]: value });
};
const handleFormSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
setError('');
if (isLoading || form.email === '' || form.password === '') return;
try {
setIsLoading(true);
await signInWithEmailAndPassword(auth, form.email, form.password);
navigate('/');
} catch (e) {
if (e instanceof FirebaseError) {
setError(e.message);
}
} finally {
setIsLoading(false);
}
};
return (
<Wrapper>
{/* 생략 */}
<Wrapper>
)
}깃허브 로그인 기능 구현
Firebase 깃허브 로그인 제공업체 설정
-
깃허브 Developer Settings으로 들어가서 OAuth Apps를 클릭 후, new OAuth App 버튼을 클릭하면 프로젝트와 깃허브를 연결하기 위한 설정을 할 수 있다
-
sign-in-method에서 깃허브 추가하고, 사용 설정을 클릭해준다. 깃허브에서 발급된 클라이언트 ID, 클라이언트 보안 비밀번호를 입력할 수 있으며, 승인 콜백 URL을 확인 할 수 있다.
-
new OAuth application을 등록하는 페이지로 이동하면, Application name과 Homepage URL을 기재한다. Authorization callback URL은 Firebase의 sign-in-method에서 깃허브를 클릭하면 승인 콜백 URL을 확인할 수 있으며, 그 정보를 입력해주면 된다.
-
new OAuth application 페이지에서 등록을 완료했다면, 아래와 같은 페이지를 확인할 수 있다. Client Id와 Client secrets은 sign-in-method에 각각 정보를 적어주면 된다.
깃허브 로그인 기능 구현
깃허브 로그인은 GithubAuthProvider를 사용하여 GitHub 인증 공급자를 생성하고, signInWithPopup으로 사용자를 팝업을 통해 GitHub에 로그인할 수 있도록 한다.
import { GithubAuthProvider, signInWithPopup } from 'firebase/auth';
import { useNavigate } from 'react-router-dom';
import styled from 'styled-components';
import { auth } from '../firebase';
// 스타일 코드 생략 ...
export default function GithubButton() {
const navigate = useNavigate();
const githubLogin = async () => {
try {
const provider = new GithubAuthProvider();
await signInWithPopup(auth, provider);
navigate('/');
} catch (error) {
console.error(error);
}
};
return (
<Button onClick={githubLogin}>
<Logo src="github-logo.svg" />
Continue with Github
</Button>
);
}Firebase를 통해서 로그인 및 사용자 인증 관련 기능을 간단하게 진행해볼 수 있었다. 기존의 백엔드 팀과 진행할때 신경써야할 부분들이 많았는데 원하는 정보만 보내주면 간편하게 처리할 수 있을만큼 간소화하여 작업할 수 있었지만, 로그인과 회원가입의 경우 유저정보를 다루는 중요한 기능으로 비밀번호 보안, 사용자 경험, 이메일 중복여부 확인 등 다양한 경우들을 구현해보고 개선하는 시간을 가져야겠다
