<div id="readability-page-1" class="page"><div>
 <a href="/m/category/DevOps%2C%20Infra/%F0%9F%94%A5%20Firebase">DevOps, Infra/🔥 Firebase</a><h2>firebase ver 8 with React (2) Authentication</h2>
 <cite>
 DarrenKwonDev
 </cite>
 </div><time>2021. 6. 21. 05:18</time>
 
 
 <a href="#comment" onclick="Utils.smoothScroll(this);return false">
 
 </a>
 
 
 
 
 
 
 
 <div>
 가이드 :&nbsp;<a href="https://firebase.google.com/docs/auth">firebase.google.com/docs/auth</a>
참고 :&nbsp;<a href="https://firebase.google.com/docs/reference/js/firebase.auth.Auth">firebase.google.com/docs/reference/js/firebase.auth.Auth</a>

프로젝트를 진행하면서 Authentication과 관련된 메서드를 사용하게 될 때마다 지속적 업데이트를 할 예정입니다.
솔직히 FCM과 더불어 파베의 백미가 아닐까 싶은 서비스입니다.&nbsp;
<figure width="450" height="290" data-origin-width="940" data-origin-height="606" data-ke-mobilestyle="widthOrigin"><img src="https://blog.kakaocdn.net/dn/7AQzK/btq7NyPdFPh/5HYjDjk8j9AAlbiCXkZo41/img.png" width="450" height="290" data-origin-width="940" data-origin-height="606" data-ke-mobilestyle="widthOrigin"></figure>

구글 문서대로 정리하는게 제일 깔끔할 것 같습니다.
Properties, Variables 는 몇개 없으니 직접 문서를 보시고 자주 쓰는 Methods를 좀 살펴봅시다.


1) authenticate
이메일 회원 가입 : <a href="https://firebase.google.com/docs/reference/js/firebase.auth.Auth#createuserwithemailandpassword">firebase.auth.Auth.createUserWithEmailAndPassword</a>&nbsp;
이메일 로그인&nbsp;<a href="https://firebase.google.com/docs/reference/js/firebase.auth.Auth#signinwithemailandpassword">firebase.auth.Auth.signInWithEmailAndPassword</a>.
두 메서드 다 Promise&lt;UserCredential&gt;를 반환한다. 반환 타입 등에 대해서는 직접 출력하거나 문서를 읽어보도록하자.
로그인을하게 되면 독특하게&nbsp;IndexedDB에 유저의 정보가 저장되어 있다.
<pre id="code_1624220087939" data-ke-language="javascript" data-ke-type="codeblock"><code>await firebase.auth().createUserWithEmailAndPassword(email, password);
await firebase.auth().signInWithEmailAndPassword(email, password);</code></pre>

2) social authenticate

signin (popup) <a href="https://firebase.google.com/docs/reference/js/firebase.auth.Auth#signinwithpopup" target="_blank" rel="noopener">https://firebase.google.com/docs/reference/js/firebase.auth.Auth#signinwithpopup</a>
signin (redirect) <a href="https://firebase.google.com/docs/reference/js/firebase.auth.Auth#signinwithredirect" target="_blank" rel="noopener">https://firebase.google.com/docs/reference/js/firebase.auth.Auth#signinwithredirect</a>

google sdk를 써서 직접 구현해봐서 알겠지만, 팝업 형식이 있고, 완전 다른 페이지로 이동하는 방식이 있다.
진짜 어이없게도, 단 2줄이면 구현이 된다. provider를 설정하고, signInWithPopup이나 singInWithredirect와 함께 사용하면 된다.
예전에 sdk의 개념조차 없었을 때 소셜 로그인 만들려고 일주일을 찾아 헤맸는데...ㅜ 억울해! 억울해! 억울해!
<pre id="code_1624219927845" data-ke-language="javascript" data-ke-type="codeblock"><code>const googleLogin = async () =&gt; {
 provider = new firebase.auth.GoogleAuthProvider(); // provider를 설정
 await firebase.auth().signInWithPopup(provider); // 로그인
}
</code></pre>


2) persistence
<a href="https://firebase.google.com/docs/reference/js/firebase.auth.Auth#persistence-1">https://firebase.google.com/docs/reference/js/firebase.auth.Auth#persistence-1</a>
<a href="https://firebase.google.com/docs/reference/js/firebase.auth.Auth#setpersistence" target="_blank" rel="noopener">https://firebase.google.com/docs/reference/js/firebase.auth.Auth#setpersistence</a>
기본값은 local이다. 즉, 브라우저 종료해도 로그인 상태가 유지된다는 것이다. 별도로 설정 안해줘도 LOCAL이 기본값이라서 로그인 상태는 유지됩니다. 굳이 건드릴 필요는 없지만 알아둘 필요는 있다.
Indicates that the state will be persisted even when the browser window is closed or the activity is destroyed in react-native
<pre id="code_1624220007043" data-ke-language="javascript" data-ke-type="codeblock"><code>firebase.auth().setPersistence(firebase.auth.Auth.Persistence.SESSION)
</code></pre>

3) sign out
<a href="https://firebase.google.com/docs/reference/js/firebase.auth.Auth#signout" target="_blank" rel="noopener">https://firebase.google.com/docs/reference/js/firebase.auth.Auth#signout</a>
<pre id="code_1624220114633" data-ke-language="javascript" data-ke-type="codeblock"><code>firebase.auth().signOut();</code></pre>

<h4 data-ke-size="size20">UI 그리는 팁</h4>
firebase가 로드되기 전에 state가 초기화되어서 코드를 어떻게 짜는 지에 다라 "깜빡임"이 두번이나 일어날 수 있다.&nbsp;
firebase가 로드되기 전에 로딩 화면을 보여주다가 로드 되면 제대로 되면 화면을 보여줘야 합니다.
<pre id="code_1624214530766" data-ke-language="javascript" data-ke-type="codeblock"><code>function App() {
 const [fbaseInitialize, setFbaseInitialize] = useState(false);
 const [isLoggedIn, setIsLoggedIn] = useState(false);

 useState(() =&gt; {
 
 // firebase가 load되기 전에 이미 react의 state가 초기화되기 때문에
 // AuthState가 바뀐 것을 리스닝하고 있어야 함
 authService.onAuthStateChanged((user) =&gt; {
 if (user) {
 setIsLoggedIn(true);
 } else {
 setIsLoggedIn(false);
 }
 setFbaseInitialize(true);
 });
 }, []);

 return (
 &lt;&gt;
 {fbaseInitialize ? &lt;Router isLoggedIn={isLoggedIn} /&gt; : "initializing..."}
 &lt;footer&gt;&amp;copy; firebase-test&lt;/footer&gt;
 &lt;/&gt;
 );
}
</code></pre>




 
 
					
 
 
 </div></div>

HotHandCoding

DarrenKwon

가이드 : firebase.google.com/docs/auth
참고 : firebase.google.com/docs/reference/js/firebase.auth.Auth
 
프로젝트를 진행하면서 Authentication과 관련된 메서드를 사용하게 될 때마다 지속적 업데이트를 할 예정입니다.
솔직히 FCM과 더불어 파베의 백미가 아닐까 싶은 서비스입니다. 
 
구글 문서대로 정리하는게 제일 깔끔할 것 같습니다.
Properties, Variables 는 몇개 없으니 직접 문서를 보시고 자주 쓰는 Methods를 좀 살펴봅시다.
 
 
1) authenticate
이메일 회원 가입 : firebase.auth.Auth.createUserWithEmailAndPassword 
이메일 로그인 firebase.auth.Auth.signInWithEmailAndPassword.
두 메서드 다 Promise<UserCredential>를 반환한다. 반환 타입 등에 대해서는 직접 출력하거나 문서를 읽어보도록하자.
로그인을하게 되면 독특하게 IndexedDB에 유저의 정보가 저장되어 있다.
await firebase.auth().createUserWithEmailAndPassword(email, password);
await firebase.auth().signInWithEmailAndPassword(email, password);
 
2) social authenticate
 
signin (popup) https://firebase.google.com/docs/reference/js/firebase.auth.Auth#signinwithpopup
signin (redirect) https://firebase.google.com/docs/reference/js/firebase.auth.Auth#signinwithredirect
 
google sdk를 써서 직접 구현해봐서 알겠지만, 팝업 형식이 있고, 완전 다른 페이지로 이동하는 방식이 있다.
진짜 어이없게도, 단 2줄이면 구현이 된다. provider를 설정하고, signInWithPopup이나 singInWithredirect와 함께 사용하면 된다.
예전에 sdk의 개념조차 없었을 때 소셜 로그인 만들려고 일주일을 찾아 헤맸는데...ㅜ 억울해! 억울해! 억울해!
const googleLogin = async () => {
 provider = new firebase.auth.GoogleAuthProvider(); // provider를 설정
 await firebase.auth().signInWithPopup(provider); // 로그인
}
 
 
2) persistence
https://firebase.google.com/docs/reference/js/firebase.auth.Auth#persistence-1
https://firebase.google.com/docs/reference/js/firebase.auth.Auth#setpersistence
기본값은 local이다. 즉, 브라우저 종료해도 로그인 상태가 유지된다는 것이다. 별도로 설정 안해줘도 LOCAL이 기본값이라서 로그인 상태는 유지됩니다. 굳이 건드릴 필요는 없지만 알아둘 필요는 있다.
Indicates that the state will be persisted even when the browser window is closed or the activity is destroyed in react-native
firebase.auth().setPersistence(firebase.auth.Auth.Persistence.SESSION)
 
3) sign out
https://firebase.google.com/docs/reference/js/firebase.auth.Auth#signout
firebase.auth().signOut();
 
UI 그리는 팁
firebase가 로드되기 전에 state가 초기화되어서 코드를 어떻게 짜는 지에 다라 "깜빡임"이 두번이나 일어날 수 있다. 
firebase가 로드되기 전에 로딩 화면을 보여주다가 로드 되면 제대로 되면 화면을 보여줘야 합니다.
function App() {
 const [fbaseInitialize, setFbaseInitialize] = useState(false);
 const [isLoggedIn, setIsLoggedIn] = useState(false);
 useState(() => {
 
 // firebase가 load되기 전에 이미 react의 state가 초기화되기 때문에
 // AuthState가 바뀐 것을 리스닝하고 있어야 함
 authService.onAuthStateChanged((user) => {
 if (user) {
 setIsLoggedIn(true);
 } else {
 setIsLoggedIn(false);
 }
 setFbaseInitialize(true);
 });
 }, []);
 return (
 <>
 {fbaseInitialize ? <Router isLoggedIn={isLoggedIn} /> : "initializing..."}
 <footer>&copy; firebase-test</footer>
 </>
 );
}

firebase ver 8 with React (2) Authentication

댓글