Firebase - 로그아웃

- 프로필 위애 커서 가져가면 signout이 드롭다운 형식으로 나타나도록 

- 프로필 이미지는 firebase의 유저 정보에 담겨 있음 

 

 

1) singOut 함수 이용 

import { getAuth, GoogleAuthProvider,onAuthStateChanged,signInWithPopup, signOut } from 'firebase/auth';

//signOut: 현재 로그인된 사용자를 로그아웃 시킴 

 

2)  firebase에서 전해준 userdata state에 보관

const [userData, setuserData] = useState({});

 

 

3) 버튼 생성 

<SignOut>

<UserImg src={userData.photoURL} alt={userData.displayName}/>

<DropDown>

<span onClick ={handleSignOut}>Sign Out</span>

</DropDown>

</SignOut>

 

 

const handleSignOut = () => {

signOut(auth)

.then(() => {

setUserData({});

//로그아웃시 setUserData를 빈 배열로 변환 

navigate('/');  //이후 로그이 페이지로 이동시킴 

})

.catch((error) => {

console.log(error)})

}

 

 

4) 버튼 css

 

const SignOut = styled.div`

position: relative;

height: 48px;

width:48px;

display:flex;

cursor:pointer;

align-items: center;

justify-content: center;

&:hover{

${DropDown}{

oppacity:1;

transition-duration: 1s;

}

}

`;

const DropDown = styled.div`

position: absolute;

top: 48px;

right: 0px;

background: rgb(19,19,19);

border: 1px solid rgba(151,151,151,0.34);

border-radius: 4px;

box-shadow: rgb(0 0 0 / 50%) 0px 0px 18px 0px;

padding: 10px;

font-size: 14px;

letter-spacing: 3px;

width: 100px;

opacity:0;

`;

const UserImg = styled.img`

border-radius: 50%;

width:100%;

height: 100%;

`;

 

 

${DropDown} : styled-components에서 다른 스타일드 컴포넌트를 참조하는 방법 중 하나