사용자가 이메일과 비밀번호로 로그인, 로그 아웃 및 등록 할 수 있는 웹 앱을 만듭니다.

이 기사에서는 React 앱에서 firebase 이메일 인증을 구현하는 방법을 보여줄 것입니다.

먼저 App.js 내부에 useState 후크를 사용하여 상태 "user"와 업데이트 함수 "setUser"를 추가합니다.

import { useState } from 'react';import Home from './components/Home';import './App.css';function App() {const [user, setUser] = useState(null)return (<div className="App"><Home/></div>);}export default App;

구성 요소 폴더 아래에 홈 및 로그인 구성 요소를 만듭니다.

SignIn 및 Home 구성 요소를 만든 후 App.js에서 가져옵니다.

import Home from './components/Home';import SignIn from './components/SignIn';

웹에서 결과를 보기 위해 하나씩 주석을 달 수 있습니다.

<Home/>{/* <SignIn/> */}

Home.js

import React from 'react'const Home = () => {return (<div><h1>Welcome Home</h1></div>)}export default Home

SignIn.js

import React, {useRef} from 'react'import './SignIn.css'const SignIn = () => {return (<div className="signin"><form action=""><h1>Sign in</h1><input type="email"/><input type="password"/><button>Sign in</button></form></div>)}export default SignIn

SignIn.css

.signin{max-width: 300px;margin-left: auto;margin-right: auto;}.signin>form{display: grid; flex-direction: column;}.signin>form>input{margin-bottom: 5px;}

이 두 구성 요소를 만든 후에는 firebase로 이동하여 새 프로젝트를 만듭니다.

프로젝트 설정을 클릭하고 "앱 추가"를 클릭 한 다음 "웹 앱"을 나타내는 아이콘을 선택합니다.

마지막으로 firebase 구성을 얻었으므로 이 구성을 복사하고 firebase 구성 파일에 붙여 넣을 준비가 됩니다.

firebase.js 파일과 firebase.js 내부를 만듭니다.

import firebase from 'firebase';var firebaseConfig = {apiKey: "FIREBASE API KEY,authDomain: "react-firebase-email-login.firebaseapp.com",projectId: "react-firebase-email-login",storageBucket: "react-firebase-email-login.appspot.com",messagingSenderId: "1074096017244",appId: "1:1074096017244:web:ea192737e362a1ea3b7b99"};// Initialize Firebaseconst firebaseApp = firebase.initializeApp(firebaseConfig);const db = firebaseApp.firestore();const auth = firebaseApp.auth();export { auth };export default db;

인증으로 이동하여 이메일 / 비밀번호 로그인 방법을 활성화합니다.

가입 함수 생성 

SignIn.js로 이동하면 useRef()를 사용하여 다시 렌더링 하지 않고 이메일과 비밀번호를 추적합니다.

import { auth } from '../firebase'const emailRef = useRef(null)const passwordRef = useRef(null)<div className="signin"><form action=""><h1>Sign in</h1><input ref={emailRef} type="email" /><input ref={passwordRef} type="password" /><button onClick={signIn}> Sign in</button><h6>Not yet register? <span className="signin__link" onClick={signUp}>sign up</span></h6></form></div>

다음으로 사용자가 새 사용자를 생성하기 위해 이메일과 비밀번호를 전달할 수 있는 signUp 기능을 생성합니다.

const signUp = e => {e.preventDefault();auth.createUserWithEmailAndPassword(emailRef.current.value, passwordRef.current.value).then(user => {console.log(user)}).catch(err => {console.log(err)})}

이메일과 비밀번호를 입력하고 가입 버튼을 클릭하면 Firebase 내부에 새로운 사용자가 생성됩니다.

다음으로 로그인 기능을 추가하겠습니다.

const signIn = e => {e.preventDefault();auth.signInWithEmailAndPassword(emailRef.current.value, passwordRef.current.value).then(user => {console.log('user', user)}).catch(err => {console.log(err)})}

그런 다음이 기능을 로그인 버튼에 바인딩합니다.

<div className="signin"><form action=""><h1>Sign in</h1><input ref={emailRef} type="email" /><input ref={passwordRef} type="password" /><button onClick={signIn}> Sign in</button><h6>Not yet register? <span className="signin__link" onClick={signUp}>sign up</span></h6></form></div>

사용자의 로그인 상태를 추적하려면 onAuthStateChange를 사용하여 로그인 상태를 추적해야 합니다.

useEffect(() => {const unsubscribe = auth.onAuthStateChanged(userAuth => {const user = {uid: userAuth.uid,email: userAuth.email}if (userAuth) {console.log('userAuth', userAuth)setUser(user)} else {
setUser(null)}})return unsubscribe}, [])

로그인 한 사용자가 있으면 Home 구성 요소를 렌더링하고, 그렇지 않으면 SignIn 구성 요소를 렌더링 합니다.

return (<div className="App">{user ? <Home /> : <SignIn />}</div>);

앱에 이미 로그인 상태를 추적 할 수 있습니다. 이제 사용자가 로그 아웃 할 수 있도록 로그 아웃 버튼을 추가해야 합니다.

Home.js 내에서 Signout 버튼을 auth.signOut 메소드로 묶기 만하면 됩니다.

import React from 'react'import { auth } from '../firebase'const Home = () => {return (<div><h1>Welcome Home</h1><p><button onClick={() => auth.signOut()}>Signout</button></p></div>)}export default Home

이제 앱이 작동하고 로그인, 로그 아웃 및 등록 할 수 있습니다.

https://medium.com/swlh/react-firebase-authentication-b68bd0f078a8