Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 |
Tags
- 생명주기
- todolist
- 넥스트
- SSR
- 파이어베이스
- 겹치는 선분의 길이
- next-pwa
- React
- 자바스크립트
- 배열
- customModal component 만들기
- debounce
- csr
- Next
- programmers
- Firebase
- 리액트
- NextJS
- lifecycle
- google firebase
- 달리기경주
- useMutation
- 리덕스
- react-query
- JS
- JavaScript
- Redux
- 투두리스트
- Recoil
- 리엑트
Archives
- Today
- Total
끄적끄적
[React + Firebase] OAuth 소셜 로그인 본문
개인적으로 구글 파이어베이스가 다른 플랫폼에 비해 사용하기가 쉽다고 생각됩니다.
가장 좋은건 파이어베이스 Auth를 통해 각종 소셜 로그인을 쉽게 구현할 수 있고
Realtime DB와 store를 통해 프로젝트를 쉽게 만들어볼 수 있습니다.
오늘은 React 프로젝트에서 구글Firebase연동을 통해 구글로그인을 할 수 있도록 설정해보겠습니다.
1. 파이어베이스에 로그인하여 프로젝트를 생성합니다.


2. 프로젝트를 등록하고 받은 firebase SDK를 저장해놓습니다.


3. 이제 다시 VSC로 돌아와 터미널에서 firebase를 설치해 줍니다.
npm install firebase
그리고 아까 저장해두었던 SDK를 가지고 유틸 컴포넌트를 하나 만들어줍니다.
// firebase_config.js
import firebase from 'firebase'
const firebaseConfig = {
apiKey: "[APIKEY]",
authDomain: "[Your domain]",
databaseURL: "[Your DBurl]",
projectId: "[Your project id]",
storageBucket: "[Your storage Bucket]",
messagingSenderId: "[Your .. ]",
appId: "[Your .. ]",
measurementId: "[Your .. ]"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig)
export const auth = firebase.auth();
export const firestore = firebase.firestore();
const provider = new firebase.auth.GoogleAuthProvider();
// GoogleAuthProvider 클래스를 authentication 라이브러리에서 사용할 수 있도록 불러오는 코드.
provider.setCustomParameters({prompt: 'select_account'});
// signIn이랑 authentication을 위해서 GoogleAuthProvider를 사용할 때마다 구글 팝업을 항상 띄우기를 원한다는 의미이다.
export const signInWithGoogle = () => auth.signInWithPopup(provider);
// signInWithPopup 메소드는 여러 파라미터를 받을 수 있다. 트위터, 페이스북, 깃허브 등으로도 로그인이 필요할 수도 있으므로.
// 여기에서는 google로 signIn할 것이기 때문에, 파라미터로 위에서 정의한 provider를 넣어준다.
export default firebase;
// 혹시 전체 라이브러리가 필요할지도 모르기 때문에 firebase도 export 해준다.
4. 이제 준비는 끝났습니다. 구글 로그인을 보여줄 컴포넌트를 만들어봅시다.
import 'firebase/firestore';
import 'firebase/auth';
import { signInWithGoogle } from '../firebase_config';
import { auth } from '../firebase_config';
먼저 필요한 파일들을 가져오겠습니다. 여기서 firebase_config는 좀전에 저희가 작성했던 파이어베이스 앱에 대한 파일입니다.
// onAuthStatChanged를 통해 로그인 변경 감지를하여 함수를 실행시켜줍니다
function GoogleSignin(props){
auth.onAuthStateChanged(user => {
// user.currentUser 를 통해 현재 로그인 중인 사용자에 대한 정보를 이용할 수 있습니다.
// ex) user.currentUser.email , user.currentUser.displayName .. etc
if(user !== null){;
console.log('로그인되었습니다.');
}
})
return (
<div>
<button onClick={signInWithGoogle}>로그인</button>
</div>
)
}
5. 로그아웃 버튼 추가하기
로그아웃 버튼을 보여줄 컴포넌트를 정한 후 컴포는트에서도 똑같이 auth 관련 import를 해줍니다.
import { auth } from './firebase_config';
<button onClick={() => {
auth.signOut();
console.log('로그아웃 합니다');
}}>EXIT</button>
완성!
'React' 카테고리의 다른 글
[React+Redux]간단하게 만들어보는 Todolist(1) (0) | 2020.11.27 |
---|---|
[상태관리라이브러리] Redux(리덕스) (0) | 2020.11.25 |
[React] 자주 쓰이는 React 생명 주기(함수형편, useEffect) (0) | 2020.11.25 |
[React] 자주 쓰이는 React 생명 주기(Class편) (0) | 2020.11.25 |
[React + Firebase] 호스팅(Hosting) (0) | 2020.11.25 |
Comments