Firebase認証でアプリケーションを反応させる

今日、我々はサインイン、サインアップとログアウトの機能を持つ単純な反応アプリを作成し、我々はユーザーのデータを保存するためにFirebase CloudStoreでアプリケーションを統合します.
そこで、コマンドを使用して新しい反応アプリを作成することから始めましょうNPXの作成反応アプリMyAppを作成し、アプリケーションの後に必要なクリーンアップを行う任意のテストファイル、ロゴを削除し、コードをコメントアウトが含まれて作成されています.
さて、コマンドラインで入力することで、我々の反応アプリにFireBaseをインストールしましょう.

npm i firebase

また、FireBaseに移動する必要があります.グーグル.comは、アカウントを作成します.その後、プロジェクトを作成した後、新しいアプリケーションを作成すると、あなたのアプリケーションに名前を付けると、“登録アプリ”をクリックした後、コードのブロックを取得するには、そのコードをコピーし、Firebaseを作成する必要があります.あなたの反応アプリのSRCフォルダーのJSファイルと次の方法でコードをペーストします

プロジェクトのFireBaseコンソールに戻るには、認証をクリックし、' Set - up Method 'を設定する必要があります.ここで、最初のオプション' email/password 'を有効にし、[保存]をクリックします.'ユーザー'タブここに私たちのアプリケーションに登録しているすべてのユーザーのリストが表示されます.

今、私たちの反応アプリに戻って、我々のアプリ機能を作るために必要なコードを追加を開始しましょう.
第一に、我々はすべての国の状態変数を作成しますので、我々のアプリは、アプリケーション内で.js変数USENTフックを使用して状態変数を定義します.

const [user, setUser] = useState("");
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [emailError, setEmailError] = useState("");
  const [passwordError, setPasswordError] = useState("");
  const [hasAccount, setHasAccount] = useState(false);

ここで、srcディレクトリに「コンポーネント」フォルダを作成し、ログインを定義します.我々がログインフォーム(ユーザー・メールとパスワードを求めている)とサインイン/サインアップボタンを持っているJSコンポーネントがそこにあります:

const Login = () => {

    return (
        <div className="login">


        <div className="loginContainer">

         <label>Username</label>
         <input type="text" autoFocus required value={email} onChange={(e)=> setEmail(e.target.value)}/>

           <p className="errorMsg">{emailError}</p>

           <label>Password</label>
           <input type="password" autoFocus required value={password} onChange={(e)=> setPassword(e.target.value)}/>
           <p className="errorMsg">{passwordError}</p>

           <div className="btnContainer">
               {hasAccount ? (
                    <>
                    <button onClick={handleLogin}>Sign In</button>
                    <p>Don't have an account ? <span onClick={() => setHasAccount(!hasAccount)}>Sign Up</span></p>
                    </>
               ) : (
<>
                    <button onClick={handleSignUp}>Sign Up</button>
                    <p>Already have an account .. <span onClick={() => setHasAccount(!hasAccount)}>Sign In</span></p>
                    </>
               )}

           </div>
        </div>
        </div>
    )
}

export default Login

我々はここでhandleloginとhandlesignup機能を定義していることに注意してください、しかし、彼らは我々のアプリから行方不明です.JSファイルを作成しましょう

const handleLogin = () => {
    firebasedb
      .auth()
      .signInWithEmailAndPassword(email, password)
      .catch((err) => {
        switch (err.code) {
          case "auth/Invalid-email":
          case "auth/user-disabled":
          case "auth/user-not-found":
            setEmailError(err.message);
            break;
          case "auth/wrong-password":
            setPasswordError(err.message);
            break;
          default:
        }
      });
  };

HandleLogin関数は、FireBase Auth ()とSignInWithEmailおよびパスワードを使用して、電子メール/パスワードのユーザーが有効になっているかどうかを確認し、入力された情報が不正か見つからない場合にエラーをスローします.
同様に、HandleSignupメソッドを定義します.

const handleSignUp = () => {
    firebasedb
      .auth()
      .createUserWithEmailAndPassword(email, password)
      .catch((err) => {
        switch (err.code) {
          case "auth/email-already-in-use":
          case "auth/invalid-email":
            setEmailError(err.message);
            break;
          case "auth/weak-password":
            setPasswordError(err.message);
            break;
          default:
        }
      });
  };

ここではかなり簡単なhandleLogout関数も定義します:

  const handleLogout = () => {
    firebasedb.auth().signOut();
  };

また、AuthState ()を使用して、Auth状態の変更ごとにアクティブ化されるAuthListener ()メソッドを定義し、アプリケーションに有効なユーザーが存在するかどうかを確認します.

const authListener = () => {
    firebasedb.auth().onAuthStateChanged((user) => {
      if (user) {
        clearInputs();
        setUser(user);
      } else {
        setUser("");
      }
    });
  };

また、AuthListener ()をコールするuseeffectフックが必要になります.

useEffect(() => {

    authListener();
  }, []);

今、我々はアプリケーション内でので、我々は実際のコンポーネントでそれらをインポートできるようにログインコンポーネントで小道具を渡す必要があります.JSファイルも、我々は家を定義します.ユーザーがログインしたときに表示されるJSコンポーネントは、以下のように、ユーザーが存在する場合、「ユーザー」のE - Eに基づいて切り替えます.

return (
    <div className="App">
      {user ? (
        <Home handleLogout={handleLogout} />
      ) : (
        <Login
          email={email}
          setEmail={setEmail}
          password={password}
          setPassword={setPassword}
          handleLogin={handleLogin}
          handleSignUp={handleSignUp}
          hasAccount={hasAccount}
          setHasAccount={setHasAccount}
          emailError={emailError}
          passwordError={passwordError}
        />
      )}
    </div>
  );

また、ログインコンポーネントで小道具をインポートすることを忘れないでください.

const Login = (props) => {

const {email, password, setEmail, setPassword, handleLogin, handleSignUp,hasAccount,setHasAccount, emailError, passwordError} = props;

    return (
        <div className="login">


        <div className="loginContainer">

           <label>Username</label>
           <input type="text" autoFocus required value={email} onChange={(e)=> setEmail(e.target.value)}/>

           <p className="errorMsg">{emailError}</p>

           <label>Password</label>
           <input type="password" autoFocus required value={password} onChange={(e)=> setPassword(e.target.value)}/>
           <p className="errorMsg">{passwordError}</p>

           <div className="btnContainer">
               {hasAccount ? (
                    <>
                    <button onClick={handleLogin}>Sign In</button>
                    <p>Don't have an account ? <span onClick={() => setHasAccount(!hasAccount)}>Sign Up</span></p>
                    </>
               ) : (
<>
                    <button onClick={handleSignUp}>Sign Up</button>
                    <p>Already have an account .. <span onClick={() => setHasAccount(!hasAccount)}>Sign In</span></p>
                    </>
               )}

           </div>
        </div>
        </div>
    )
}

export default Login

その後、アプリケーションにサインアップし、FireBaseコンソールに移動すると、ユーザーのリストは、あなたが作成したユーザーが表示されますが表示されます.
これは私たちのアプリケーションの最後に、あなたが読んで楽しんで希望をもたらす..
ハッピーコーディング.