Firebase (1)

- jsconfig.json 파일 생성

create-react-app.dev/docs/importing-a-component/

Importing a Component | Create React App

 

- Firebase 인증

firebase.google.com/docs/reference/js/firebase.auth

auth | JavaScript SDK  |  Firebase

- setPersistence

사용자들을 어떻게 기억할 것인지 선택할 수 있게 해줌

React Native 앱과 웹 브라우저에서의 초기값은 local

· 'local'은 브라우저를 닫더라도 사용자 정보는 기억될 것이라는 의미

· 'session'은 탭이 열려있는 동안에는 사용자 정보를 기억하는 것을 의미

· 'none'은 유저 정보를 기억하지 않는 것을 의미,

유저가 로그인을 시도할 때 로그인은 시켜주지만, 만약 페이지를 새로고침 한다면 유저는 로그아웃 되어서, 다시 로그인을 해야함

 

- onAuthStateChanged

firebase.google.com/docs/reference/js/firebase.auth.Auth#onauthstatechanged

Auth | JavaScript SDK  |  Firebase

· 사용자의 로그인 상태의 변화를 관찰하는 관찰자를 추가시킴

· 기본적으로 event listener, 그리고 유저 상태에 변화가 있을 때 그 변화를 알아차림

(유저가 로그아웃할 때, 계정을 생성할 때, firebase가 초기화 될 때, 로그인 되는 순간에 실행)

 

- signInWithPopup

firebase.google.com/docs/reference/js/firebase.auth.Auth#signinwithpopup

Auth | JavaScript SDK  |  Firebase

const onSocialClick = async (event) => {

        const { //ES6

            target:{name},

        } = event;

        let provider;

        if (name === "google"){ //구글 로그인

            provider = new firebaseInstance.auth.GoogleAuthProvider();

        } else if (name === "github"){ //깃허브 로그인

            provider = new firebaseInstance.auth.GithubAuthProvider();

        }

        const data = await authService.signInWithPopup(provider);

        console.log(data);

    };

 

//버튼에 onClick 이벤트 추가

<button onClick={onSocialClick} name="google">Continue with Google</button>

<button onClick={onSocialClick} name="github">Continue with Github</button>

 

- redirect (1)

로그아웃 했지만 계속 profile 링크에 남아있음

reactrouter.com/web/api/Redirect

React Router: Declarative Routing for React

// "/"이 route에 있으면 상관 없는데 그 외의 route로 가게 되면 여기 "/"로 돌아가라는 의미

<Redirect from="*" to="/" />

 

- redirect (2)

useHistory (react hook 사용)

reactrouter.com/web/api/Hooks/usehistory

React Router: Declarative Routing for React