Make a few structural changes to #98

Author: chrisbianca

auth/README.md

@@ -11,8 +11,8 @@ import { useAuthState } from 'react-firebase-hooks/auth';
 List of Auth hooks:
 
 - [useAuthState](#useauthstate)
-- [useRegister](#useregister)
-- [useLogin](#uselogin)
+- [useCreateUserWithEmailAndPassword](#usecreateuserwithemailandpassword)
+- [useSignInWithEmailAndPassword](#usesigninwithemailandpassword)
 
 ### useAuthState
 
@@ -32,7 +32,7 @@ Returns:
 - `loading`: A `boolean` to indicate whether the the authentication state is still being loaded
 - `error`: Any `firebase.auth.Error` returned by Firebase when trying to load the user, or `undefined` if there is no error
 
-#### If you are registering or logingIn the user for the first time consider using [useRegister](#useregister), [useLogin](#uselogin)
+#### If you are registering or signing in the user for the first time consider using [useCreateUserWithEmailAndPassword](#usecreateuserwithemailandpassword), [useSignInWithEmailAndPassword](#usesigninwithemailandpassword)
 
 #### Full Example
 
@@ -75,79 +75,121 @@ const CurrentUser = () => {
 };
 ```
 
-### useRegister
+### useCreateUserWithEmailAndPassword
 
 ```js
-const [registeredUser, error, register, loading] = useRegister( auth, email, password );
+const [
+  createUserWithEmailAndPassword,
+  user,
+  loading,
+  error,
+] = useCreateUserWithEmailAndPassword(auth);
 ```
 
-Import statement :
+Create a user with email and password. Wraps the underlying `firebase.auth().createUserWithEmailAndPassword` method and provides additional `loading` and `error` information.
 
-```js
-import { useRegister } from 'react-firebase-hooks/auth';
-```
-
-For full full example [check here](#register-and-login-hook-usage)
-
-Register a user and receive the user credentials
-
-The `useRegister` hook takes the following parameters:
+The `useCreateUserWithEmailAndPassword` hook takes the following parameters:
 
 - `auth`: `firebase.auth.Auth` instance for the app you would like to monitor
-- `email`: `string` email of the user
-- `password`: `string` password of the user
 
 Returns:
 
-- `registeredUser`: The `registeredUser` if data is received or `undefined` if not
-- `loading`: A `boolean` to indicate whether the the registration is completed or it's yet processing
-- `error`: `any` returned by Firebase when trying to register the user, or `undefined` if there is no error
-- `register`: `void` a function you can call to start the registration
+- `createUserWithEmailAndPassword(email: string, password: string)`: a function you can call to start the registration
+- `user`: The `firebase.User` if the user was created or `undefined` if not
+- `loading`: A `boolean` to indicate whether the the user creation is processing
+- `error`: Any `firebase.auth.Error` returned by Firebase when trying to create the user, or `undefined` if there is no error
 
-### useLogin
+#### Full Example
 
-```js
-const [loggedInUser, error, login, loading] = useLogin(auth, email, password);
+```jsx
+import { useSignInWithEmailAndPassword } from 'react-firebase-hooks/auth';
+
+const SignIn = () => {
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [
+    createUserWithEmailAndPassword,
+    user,
+    loading,
+    error,
+  ] = useCreateUserWithEmailAndPassword(auth);
+
+  if (error) {
+    return (
+      <div>
+        <p>Error: {error.message}</p>
+      </div>
+    );
+  }
+  if (loading) {
+    return <p>Loading...</p>;
+  }
+  if (user) {
+    return (
+      <div>
+        <p>Registered User: {user.email}</p>
+      </div>
+    );
+  }
+  return (
+    <div className="App">
+      <input
+        type="email"
+        value={email}
+        onChange={(e) => setEmail(e.target.value)}
+      />
+      <input
+        type="password"
+        value={password}
+        onChange={(e) => setPassword(e.target.value)}
+      />
+      <button onClick={() => createUserWithEmailAndPassword(email, password)}>
+        Register
+      </button>
+    </div>
+  );
+};
 ```
 
-Import statement :
+### useSignInWithEmailAndPassword
 
 ```js
-import { useLogin } from 'react-firebase-hooks/auth';
+const [
+  signInWithEmailAndPassword,
+  user,
+  loading,
+  error,
+] = useSignInWithEmailAndPassword(auth, email, password);
 ```
 
-For full full example [check here](#register-and-login-hook-usage)
+Login a user with email and password. Wraps the underlying `firebase.auth().signInWithEmailAndPassword` method and provides additional `loading` and `error` information.
 
-Register a user and receive the user credentials
-
-The `useLogin` hook takes the following parameters:
+The `useSignInWithEmailAndPassword` hook takes the following parameters:
 
 - `auth`: `firebase.auth.Auth` instance for the app you would like to monitor
-- `email`: `string` email of the user
-- `password`: `string` password of the user
 
 Returns:
 
-- `loggedInUser`: The `loggedInUser` if data is received or `undefined` if not
-- `loading`: A `boolean` to indicate whether the the login process is completed or it's yet processing
-- `error`: `any` returned by Firebase when trying to register the user, or `undefined` if there is no error
-- `login`: `void` a function you can call to start the login process
+- `signInWithEmailAndPassword(email: string, password: string)`: a function you can call to start the login
+- `user`: The `firebase.User` if the user was logged in or `undefined` if not
+- `loading`: A `boolean` to indicate whether the the user login is processing
+- `error`: Any `firebase.auth.Error` returned by Firebase when trying to login the user, or `undefined` if there is no error
 
-## Register and Login hook usage
+#### Full Example
 
 ```jsx
-import React, { useState } from 'react';
-import { auth } from './firebase';
-import { useLogin, useRegister } from 'react-firebase-hooks/auth';
+import { useSignInWithEmailAndPassword } from 'react-firebase-hooks/auth';
 
-function App() {
+const SignIn = () => {
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
-  const [loggedInUser, error, login, loading] = useLogin(auth, email, password);
-  const [registeredUser, error, register, loading] = useRegister(auth, email, password);
-  
-  // Use only one of the above two hooks in one file
-  
+  const [
+    signInWithEmailAndPassword,
+    user,
+    loading,
+    error,
+  ] = useSignInWithEmailAndPassword(auth);
+
   if (error) {
     return (
       <div>
@@ -158,17 +200,10 @@ function App() {
   if (loading) {
     return <p>Loading...</p>;
   }
-  if (loggedInUser) {
-    return (
-      <div>
-        <p>Currently LoggedIn User: {loggedInUser.email}</p>
-      </div>
-    );
-  }
-  if (registeredUser) {
+  if (user) {
     return (
       <div>
-        <p>Currently Registered User: {loggedInUser.email}</p>
+        <p>Signed In User: {user.email}</p>
       </div>
     );
   }
@@ -184,11 +219,10 @@ function App() {
         value={password}
         onChange={(e) => setPassword(e.target.value)}
       />
-      <button onClick={login}>SIGN IN</button>
-      <button onClick={register}>SIGN UP</button>
+      <button onClick={() => signInWithEmailAndPassword(email, password)}>
+        Sign In
+      </button>
     </div>
   );
-}
-
-export default App;
+};
 ```

auth/index.ts

@@ -1,3 +1,5 @@
 export { default as useAuthState, AuthStateHook } from './useAuthState';
-export { default as useLogin, loginHook } from './useLogin';
-export { default as useRegister, registerHook } from './useRegister';
+export { default as useSignInWithEmailAndPassword } from './useSignInWithEmailAndPassword';
+export { default as useCreateUserWithEmailAndPassword } from './useCreateUserWithEmailAndPassword';
+
+export { EmailAndPasswordActionHook } from './types';

auth/types.ts

@@ -0,0 +1,12 @@
+import firebase from 'firebase/app';
+
+type AuthActionHook<T, E> = [
+  (email: string, password: string) => void,
+  T | undefined,
+  boolean,
+  E | undefined
+];
+export type EmailAndPasswordActionHook = AuthActionHook<
+  firebase.auth.UserCredential,
+  firebase.FirebaseError
+>;

auth/useCreateUserWithEmailAndPassword.ts

@@ -0,0 +1,35 @@
+import { useState, useMemo } from 'react';
+import firebase from 'firebase/app';
+import { EmailAndPasswordActionHook } from './types';
+
+export default (auth: firebase.auth.Auth): EmailAndPasswordActionHook => {
+  const [error, setError] = useState<firebase.FirebaseError>();
+  const [
+    registeredUser,
+    setRegisteredUser,
+  ] = useState<firebase.auth.UserCredential>();
+  const [loading, setLoading] = useState<boolean>(false);
+
+  const createUserWithEmailAndPassword = async (
+    email: string,
+    password: string
+  ) => {
+    setLoading(true);
+    try {
+      const user = await auth.createUserWithEmailAndPassword(email, password);
+      setRegisteredUser(user);
+      setLoading(false);
+    } catch (error) {
+      setError(error);
+      setLoading(false);
+    }
+  };
+
+  const resArray: EmailAndPasswordActionHook = [
+    createUserWithEmailAndPassword,
+    registeredUser,
+    loading,
+    error,
+  ];
+  return useMemo<EmailAndPasswordActionHook>(() => resArray, resArray);
+};

auth/useLogin.ts

@@ -0,0 +1,36 @@
+import { useState, useMemo } from 'react';
+import firebase from 'firebase/app';
+import 'firebase/auth';
+import { EmailAndPasswordActionHook } from './types';
+
+export default (auth: firebase.auth.Auth): EmailAndPasswordActionHook => {
+  const [error, setError] = useState<firebase.FirebaseError>();
+  const [
+    loggedInUser,
+    setLoggedInUser,
+  ] = useState<firebase.auth.UserCredential>();
+  const [loading, setLoading] = useState<boolean>(false);
+
+  const signInWithEmailAndPassword = async (
+    email: string,
+    password: string
+  ) => {
+    setLoading(true);
+    try {
+      const user = await auth.signInWithEmailAndPassword(email, password);
+      setLoggedInUser(user);
+      setLoading(false);
+    } catch (err) {
+      setError(err);
+      setLoading(false);
+    }
+  };
+
+  const resArray: EmailAndPasswordActionHook = [
+    signInWithEmailAndPassword,
+    loggedInUser,
+    loading,
+    error,
+  ];
+  return useMemo<EmailAndPasswordActionHook>(() => resArray, resArray);
+};