프로젝트 이름을 작성하고, Google 애널리틱스 연동이 필요하다면 사용 버튼을 ON으로, 필요하지 않다면 OFF로 변경합니다.
프로젝트 만들기 버튼을 눌러 프로젝트를 생성을 마무리합니다.
프로젝트가 완성되면 Firebase 내부의 다양한 기능을 사용할 수 있습니다.
앱(iOS, Android), 웹에 Firebase를 추가하여 시작할 수 있습니다.
상단 앱에 Firebase를 추가하여 시작하기 아래에 Firebase 추가가 필요한 어플리케이션을 선택합니다.
웹을 선택하여 Firebase 추가하였습니다.
firebaseConfig(SDK)를 저장해둡니다.
Authentication(인증)
섹션을 클릭합니다.
- 원하는 로그인 방식을 추가합니다. 여러 개 설정도 가능합니다.
npm i firebase
fbInstance.js
파일을 만들어 그 안에 객체를 생성했습니다.import { initializeApp } from 'firebase/app';
const firebaseConfig = {
apiKey:
authDomain:
projectId:
storageBucket:
messagingSenderId:
appId:
};
const app = initializeApp(firebaseConfig);
.env
파일에 따로 저장할 수 있습니다..env
파일은 반드시 src 파일 밖에 저장해야합니다. (root 경로)// fbInstance.js 코드
import { initializeApp } from 'firebase/app';
const firebaseConfig = {
apiKey: process.env.REACT_APP_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_APP_ID
};
const app = initializeApp(firebaseConfig);
// .env 파일 코드
REACT_APP_API_KEY = apikey 입력
REACT_APP_AUTH_DOMAIN = authDomain 입력
REACT_APP_PROJECT_ID = projectId 입력
REACT_APP_STORAGE_BUCKET = storageBucket 입력
REACT_APP_MESSAGING_SENDER_ID = messagingSenderId 입력
REACT_APP_APP_ID = appId 입력
import { getAuth } from 'firebase/auth'
getAuth()
를 export
합니다.export const authService = getAuth();
import { initializeApp } from 'firebase/app';
import { getAuth } from 'firebase/auth'
const firebaseConfig = {
apiKey: process.env.REACT_APP_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_APP_ID
};
const app = initializeApp(firebaseConfig);
export const authService = getAuth();
form
태그와 input
태그로 회원가입 form을 작성합니다.const onChange = (e) => {
const { target: { name, value } } = e;
if (name === "email") setEmail(value);
else if (name === "password") setPassword(value);
}
import React, { useState } from 'react'
const Auth = () => {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const onChange = (e) => {
const { target: { name, value } } = e;
if (name === "email") setEmail(value);
else if (name === "password") setPassword(value);
}
const onSubmit = (e) => {
e.preventDefault();
}
return (
<div>
<form onSubmit={onSubmit}>
<input
name="email"
type="text"
placeholder='Email'
required
value={email}
onChange={onChange} />
<input
name="password"
type="password"
placeholder="Password"
required
value={password}
onChange={onChange} />
<input
type="submit"
value="Create Account"/>
</form>
<div>
<button name="Google">Google 로그인</button>
<button name="Github">GitHub 로그인</button>
</div>
</div>
)
}
export default Auth
신규 사용자 가입
(회원가입) 기능 구현createUserWithEmailAndPassword
메서드에 전달합니다.// orginal 코드
import { getAuth, createUserWithEmailAndPassword } from "firebase/auth";
const auth = getAuth();
createUserWithEmailAndPassword(auth, email, password)
.then((userCredential) => {
// Signed in
const user = userCredential.user;
// ...
})
.catch((error) => {
const errorCode = error.code;
const errorMessage = error.message;
// ..
});
firebase
는 기본적으로 비동기적으로 동작합니다.createUserWithEmailAndPassword API
가 동작할 때까지 기다리기 위해 async/await
로 비동기처리를 합니다.fbInstance
에서 미리 만든 authService를 불러옵니다.createUserWithEmailAndPassword API
의 매개변수로 담습니다.// 수정한 코드
import { createUserWithEmailAndPassword, signInWithEmailAndPassword } from "firebase/auth";
import { authService } from '../firebase/fbInstance';
const Auth = () => {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [error, setError] = useState('');
const onSubmit = async (e) => {
e.preventDefault();
let data ;
try {
data = await createUserWithEmailAndPassword(authService, email, password)
} catch (error) {
setError(error.message);
}
}
...
}
기존 사용자 로그인
기능 구현signInWithEmailAndPassword
메서드를 호출합니다.// orginal 코드
import { getAuth, signInWithEmailAndPassword } from "firebase/auth";
const auth = getAuth();
signInWithEmailAndPassword(auth, email, password)
.then((userCredential) => {
// Signed in
const user = userCredential.user;
// ...
})
.catch((error) => {
const errorCode = error.code;
const errorMessage = error.message;
});
// 수정한 코드
import { createUserWithEmailAndPassword, signInWithEmailAndPassword } from "firebase/auth";
import { authService } from '../firebase/fbInstance';
const Auth = () => {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [newAccount, setNewAccount] = useState(true);
const [error, setError] = useState('');
const onSubmit = async (e) => {
e.preventDefault();
let data ;
try {
if(newAccount) data = await createUserWithEmailAndPassword(authService, email, password);
else data = await signInWithEmailAndPassword(authService, email, password);
} catch (error) {
setError(error.message);
}
}
...
}
// 전체 코드
import React, { useState } from 'react'
import { createUserWithEmailAndPassword, signInWithEmailAndPassword } from "firebase/auth";
import { authService } from '../firebase/fbInstance';
const Auth = () => {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [newAccount, setNewAccount] = useState(true);
const [error, setError] = useState('');
const toggleAccount = () => setNewAccount((prev) => !prev)
const onChange = (e) => {
const { target: { name, value } } = e;
if (name === "email") setEmail(value);
else if (name === "password") setPassword(value);
}
const onSubmit = async (e) => {
e.preventDefault();
let data ;
try {
if(newAccount) data = await createUserWithEmailAndPassword(authService, email, password);
else data = await signInWithEmailAndPassword(authService, email, password);
} catch (error) {
setError(error.message);
}
}
return (
<div>
<form onSubmit={onSubmit}>
<input
name="email"
type="text"
placeholder='Email'
required
value={email}
onChange={onChange} />
<input
name="password"
type="password"
placeholder="Password"
required
value={password}
onChange={onChange} />
<input
type="submit"
value={newAccount? "회원가입" : "로그인"} />
</form>
<span onClick={toggleAccount}>{newAccount? "회원가입" : "로그인"}</span>
<div>
<button name="Google">Google 로그인</button>
<button name="Github">GitHub 로그인</button>
</div>
</div>
)
}
export default Auth
글 너무 잘 읽었습니다. 직접 실습을 하려는데 혹시 깃허브에 전체코드가 있으시다면 깃헙 주소 공유 해주실 수 있으실까요?