[firebase] authentication② 로그인 인증 상태 지속, useHistory, 로그아웃 구현
1. 로그인 인증 상태 지속
저번 시간에는 구글 로그인 구현을 했다.
그런데.. 한 가지 문제가 생겼다.
새로고침을 하면 다시 로그아웃이 되는 것이었다...
띠용??
찾아보니 로그아웃이 되지 않도록 인증 상태를 지속해야 하는 것이었다.
https://firebase.google.com/docs/auth/web/auth-state-persistence?hl=ko
docs를 읽어보니 3가지 인증 상태 지속성 유형 중 하나를 선택할 수 있다.
1) firebase.auth.Auth.Persistence.LOCAL
브라우저 창이 닫히거나 React Native에서 활동이 폐기된 경우에도 상태가 유지됨을 나타냅니다.
이 상태를 삭제하려면 명시적으로 로그아웃해야 합니다.
Firebase 인증 웹 세션은 단일 호스트 출처이며 단일 도메인의 경우에만 유지된다는 점에 유의하세요.2) firebase.auth.Auth.Persistence.SESSION
현재의 세션이나 탭에서만 상태가 유지되며 사용자가 인증된 탭이나 창이 닫히면 삭제됨을 나타냅니다.
웹 앱에만 적용됩니다.3) firebase.auth.Auth.Persistence.NONE
상태가 메모리에만 저장되며 창이나 활동이 새로고침되면 삭제됨을 나타냅니다.그렇다.. 나는 구글 로그인 구현만 하고 아무것도 건드리지 않아서 3번째였던 것이다. 새로고침되면 삭제라닣ㅎㅎㅎ
개발자도구 → application → session storage에 아무 정보도 저장이 되지 않고 있다..
유저가 새로고침 하는 와중에도 로그인 상태가 지속되기를 원하는 경우가 보편적일 것이다.
그럼 1번과 2번의 차이는 뭘까?
네이버 로그인창을 예로 들어보자. 로그인 상태 유지를 클릭하면 첫번째 방식이다. 즉 로그아웃을 원할 경우 명시적으로 로그아웃을 해야만 한다. 로그인 상태 유지를 클릭하지 않으면 창만 닫아도 로그아웃이 되는 2번째 방식인 것이다.
나는 우선 탭이나 창이 닫히면 로그인 상태가 유지되지 않도록(즉, 2번째 session 방식) 구현에 도전해보겠다.
setPersistence와 browserSessionPersistence를 통해 구현할 수 있었다.
.
.
import { GoogleAuthProvider, signInWithPopup, setPersistence, browserSessionPersistence} from "firebase/auth";
.
.
function App() {
const [userData, setUserData] = useState(null) as any;
const provider = new GoogleAuthProvider();
const handleGoogleLogin = () => {
setPersistence(auth, browserSessionPersistence).then(() => {
signInWithPopup(auth, provider)
.then((result) => {
setUserData(result.user);
console.log(result);
const name = result.user.displayName;
console.log(name);
})
.catch((error) => {
console.log(error);
});
});
};
return (
.
.
어어!! 드디어 session storage에 사용자 정보가 저장된다!!!!
새로고침을 해도 session storage에 있는 정보는 그대로 있다.
2. 로그인을 하면 마이페이지로 넘어가도록 해보자. (UseHistory)
.
.
import { Link, useHistory } from "react-router-dom";
.
.
function App() {
const history = useHistory();
const [userData, setUserData] = useState(null) as any;
const provider = new GoogleAuthProvider();
const handleGoogleLogin = () => {
setPersistence(auth, browserSessionPersistence).then(() => {
signInWithPopup(auth, provider)
.then((result) => {
setUserData(result.user);
console.log(result);
const name = result.user.displayName;
history.push("/mypage");
console.log(name);
})
.catch((error) => {
console.log(error);
});
});
};
.
.
.react-router-dom에서 useHistory를 import해온다.
signInWithPopup 함수 사용시 프로미스 체인 내부에
history.push("/mypage")라고 명시해놓는다.
로그인 성공시 mypage로 이동한다.
그런데 찾아보니 react-router-dom 6 버전 이상에서는 useHistory가 아니라 useNavigate를 써야한다고 한다!
나는 일부러 5버전을 쓰고 있다. 아직 현업에서 5 쓰는 곳이 꽤 있다고 하여 5에 어느 정도 익숙해지고 6을 새로 배우려고 한다. 근데 아마 6 배우려고 할 때 쯤 7이 나오겠지 ? ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 어쩔 수 없는 프론트 개발자의 수크명 그럼 또 7 배워야지 뭐 됴르륵~
useHistory를 써서 login을 하면 mypage로 넘어가도록 했다.
3. 로그아웃 구현
.
.
import { Link, useHistory } from "react-router-dom";
import { signOut } from "firebase/auth";
import auth from "./service/firebase";
.
.
function MyPage() {
const history = useHistory();
const handleGoogleLogout = () => {
signOut(auth)
.then(() => {
history.push("/");
})
.catch((error) => {
console.log(error);
});
};
return (
<>
<BtnWrapper className='MyPage'>
<Btn onClick={handleGoogleLogout}>Log-Out</Btn>
.
.login이랑 논리가 똑같아서 금방 해낼 수 있었다.
firebase/auth에서 signOut을 import 해와서 handleGoogleLogout 함수를 만들어주었다. 그리고 Btn에 onClick함수로 걸기!
마찬가지로
history.push("/")를 써서 로그아웃 성공 시 홈으로 가도록 했다.
log-out 전에는 session storage에 사용자 정보가 저장되어 있었지만
log-out을 누르면 session storage에서 사용자 정보가 없어지고 다시 홈으로 이동한다.
오늘의 프로젝트는 여기까지!! 저번주에 login 구현하느라 눈이 빠지는 줄 알았던 거에 비하면 정말 간단히 구현할 수 있었다. 확실히 한 번 뭔가 정복하고나면 비슷한 걸 구현하는 건 어렵지 않은 경우가 많은 것 같다. 그 한 번이 어렵긴 하지 ㅋㅋㅋㅋ
다음 시간에는 email/password 로그인과 회원가입을 구현해볼 건데,, 그런데,, 회원가입이 많이 어렵다고 하더라?? 조금 긴장해야 할지도?!
참고:
https://firebase.google.com/docs/auth/web/auth-state-persistence?hl=ko
