21.1.119学習記録🧑‍💻

FireBase、Reactを使用してtwitterクローンをエンコード🧑‍💻

今日完成したリスト
1.ログイン実施機能
2.ソーシャル・ログイン(Github,Google)
3.ログアウト機能
バックエンド部分はFirebaseを使用しているので、Firebaseサイトを参考にしました.
https://firebase.google.com/docs/auth/web/firebaseui?hl=ko

1.ログイン機能

ステータス更新にはusState関数を使用します.

    const [email, setEmail] = useState("");
    const [password, setPassword] = useState("");
    const [newAccount, setnewAccount] = useState(true);
    const [error, setError] = useState("");

ログインを続行する方法

Firebaseでログインを続けるためにsetPersistenceを使用します.
setPersistenceにはlocal、session、noneオプションがあります.

local:Webブラウザを終了してもログインを保持
Localオプションを使用すると、Webブラウザを終了するときにログインしたユーザーの情報を記憶できます.

session:Webブラウザのタブを終了してログアウトする

none:更新後ログアウト
ただし、デフォルト値はlocalなので、他の設定は必要ありません.

2.ソーシャル・ログイン

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

const onSocialClick =  async (event) =>{
     const {target:{name},
    } = event;
    let provider;
    if(name === "Google"){
        provider = new GoogleAuthProvider();
    }else if(name === "Github"){
        provider = new GoogleAuthProvider();
    }
    await signInWithPopup(auth, provider);
 };

まず、Firebaseでは、
GoogleAutheProviderとGithubAutheProvider.
またsignInWithPopup関数は非同期操作であるためasync-await文を用いた.
providerをsignInWithPopup関数パラメータに渡し、ログインを使用します.

結果

3.ログアウト

ボタンのログアウト機能を利用するために、ナビゲーション構成部品が作成されました.

const Navigation = () => 
<nav>
    <ul>
    <li>
        <Link to ="/">Home</Link>
    </li>
    <li>
        <Link to ="/profile">Profile</Link>
    </li>
    </ul>
 </nav>

ルータに追加し、Profileをクリックして/profileに移動します.

const Profile = () => <span>Profile</span>

export default () => {
    const onLogOutClick = () => auth.signOut();
    return (
    <>
    <button onClick ={onLogOutClick}>Log out</button>
    </>
    );
};

import { auth } from 'fbase';

const Profile = () => <span>Profile</span>

export default () => {
    const onLogOutClick = () => auth.signOut();
    return (
    <>
    <button onClick ={onLogOutClick}>Log out</button>
    </>
    );
};

Firebaseでログアウト機能を使用するにはsignOut()関数を使用する必要があります.
そこで、onLogoutClick関数を作成し、ボタンをクリックしてsignOut関数を起動します.
ただし、ログアウトしてもProfileサイトにあります.
Redirectが配備されています.

const AppRouter = ({isLoggedIn}) =>{ //Router을 이미 정의했기 때문에 다른 이름으로 정의
    //상위 컴포넌트에서 받은 프롭스는 구조분해 할당으로 사용
   
    return( // switch를 이용하면 여러가지 라우트 중 하나만 렌더링하게 해줌.
        <Router>
            {isLoggedIn &&<Navigation />} 
            {/* && -> 로그인이 맞다면 Navigation => true*/}
            <Switch>  
                {isLoggedIn ?( // 로그인 상태 시
                <>
                    <Route exact path ="/">  
                        <Home />
                    </Route>  
                    <Route exact path ="/profile">  
                    <Profile />
                </Route>
                <Redirect from="*" to="/" />
                </> 
                ) : ( // 비로그인 상태 시
                    <>
                    <Route exact path ="/"> 
                        <Auth />
                    </Route>   
                    <Redirect from="*" to="/" />
                    </>
                )}
            </Switch>
        </Router>
    )
}

詳細には、switchを使用して1つのルーティングしかレンダリングできません.
isLogdInの状態に基づいてログインするかどうかを判断し、結果に基づいてルーティングをレンダリングします.
しかし、ログアウトするとisLogdInはfalseになります.
ルーティングはfalseでなければなりませんが、アドレスが「/」の場合にのみ「/」になります.ログアウトボタンを使用した後のアドレスは「/profile」なので、ルーティングは機能しません.
Redirectが起動してメイン画面に移動します.
コメントリンク
https://reactrouter.com/web/api/Redirect

に感銘を与える

実は年初からブログ活動をしていた時に学習記録を書きたかったのですが、人が面倒になってしまい…延期しました...ほほほ...だから遅くなりましたが、これからも書き続けます!