# Authentication

Doozuu·2023년 1월 4일
0

Firebase

목록 보기
3/6

⚠️ 강의가 올라온지 꽤 되어서 바뀐 코드들이 많다.

(auth대신 getAuth 써야하는 등..)
2023.01.04 기준 아래처럼 하면 오류없이 작동한다.
https://github.com/Doozuu/Twitter


📌 Authentication

인증 방법으로 이메일, 구글, 깃허브 등을 추가할 수 있다.


⭐️ 깃허브 로그인을 사용하려면 깃허브에서 앱을 따로 설정해야한다.

설정 방법

github) Settings -> Developer settings -> Oauth Apps -> Resister new application

  • Hompage url: firebase에 나와 있는 주소에서 auth/handler 부분만 삭제해서 가져오기
  • Callback url: firebase에 나와 있는 주소 그대로 복사해서 가져오기

다 작성하면 resister application 해준 후, Client Id와 보안 비밀번호를 복사해서 firebase에 붙여넣어 주면 완성이다.


로그인

1. 이메일 로그인

firebase.auth.EmailAuthProvider에서 아래 두 개 문서 살펴보기

createUserWithEmailAndPassword

  • 이메일과 비밀번호로 가입
  • promise를 제공하기 때문에 사용할 때 async, await를 써야 함.

SignInWithEmailAndPassword

  • 가입된 이메일과 비밀번호로 로그인

2. 소셜 로그인

SignInWithPopup

  • 팝업창을 통해 로그인
    GoogleAuthProvider()
    GithubAuthProvider()

로그아웃

signOut()

  • 로그아웃

Redirect

  • 로그아웃 후 접속 주소 바꾸기
  • useNavigate() 사용.
    useNavigate를 import 해주고 navigate("Redirect 할 경로");
  • 강의에는 아래 방식이 나와있지만 버전 문제로 현재 사용할 수 없다.
    <Redirect from="*" to="/" />
    history.push("/")

persistence

: 사용자를 어떻게 기억할 것인지 선택할 수 있게 해줌.

local : 브라우저를 닫아도 사용자 정보 기억
session : 브라우저가 열려있는 동안에만 기억
none : 기억하지 않음(새로고침하면 로그아웃됨)


onAuthStateChanged

: 로그인 상태 변화 관찰(eventListener 역할)
로그인 되었는지 안되었는지 알 수 있음.


참고 ) 절대 경로 사용하기

경로 주소에 .. 안 넣어도 되어서 더 깔끔하게 쓸 수 있다.
jsconfig.json 파일 만들어서 아래 코드 넣기

{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src"]
}
profile
모든게 새롭고 재밌는 프론트엔드 새싹

0개의 댓글