Feat/authentication

.env

@@ -1 +1,8 @@
 REACT_APP_API_ENDPOINT=https://jsonplaceholder.typicode.com/todos
+
+REACT_APP_apiKey=AIzaSyAj85Ywt-FIO87x5KPw_HJZCvsx0CEESmg
+REACT_APP_authDomain=oct-2021-8d609.firebaseapp.com
+REACT_APP_projectId=oct-2021-8d609
+REACT_APP_storageBucket=oct-2021-8d609.appspot.com
+REACT_APP_messagingSenderId=743275450929
+REACT_APP_appId=1:743275450929:web:e37fef7d55cd22456efb10

package.json

@@ -6,6 +6,7 @@
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^12.1.4",
     "@testing-library/user-event": "^13.5.0",
+    "firebase": "^9.6.10",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "react-scripts": "5.0.0",

src/App.js

@@ -1,30 +1,14 @@
-import Loading from './components/Loading';
-import Error from './components/Error';
-import TaskList from './components/TaskList';
+import Header from './components/Header';
+import TaskPage from './components/TaskPage';
 
-import { useFetch } from './hooks/useFetch';
+import { useAuthentication } from './providers/Authentication';
 
 const App = () => {
-  const [state, tasks, update, add] = useFetch(
-    process.env.REACT_APP_API_ENDPOINT,
-  );
-
-  const updateTask = (task) => {
-    update(task.id, task);
-  };
-
-  const addTask = (title) => {
-    add({ title, completed: false });
-  };
-
+  const { currentUser } = useAuthentication();
   return (
     <>
-      <h1>TODO List</h1>
-      {state === 'PENDING' && <Loading />}
-      {state === 'SUCCESS' && (
-        <TaskList tasks={tasks} updateTask={updateTask} addTask={addTask} />
-      )}
-      {state === 'FAILED' && <Error>Something went wrong</Error>}
+      <Header />
+      {currentUser && <TaskPage />}
     </>
   );
 };

src/components/AuthenticationMethod.js

@@ -0,0 +1,32 @@
+import { useState } from 'react';
+
+import SignUp from './SignUp';
+import SignIn from './SignIn';
+import { useAuthentication } from '../providers/Authentication';
+
+const AuthenticationMethod = () => {
+  const [authMethod, setAuthMethod] = useState();
+  const { signInWithGoogle } = useAuthentication();
+
+  const handleClick = (method) => {
+    setAuthMethod(method);
+  };
+
+  if (authMethod === undefined) {
+    return (
+      <>
+        <button onClick={() => handleClick('sign-up')}>Sign Up</button>
+        <button onClick={() => handleClick('sign-in')}>Sign In</button>
+        <button onClick={() => signInWithGoogle()}>Sign In With Google</button>
+      </>
+    );
+  }
+
+  if (authMethod === 'sign-up') {
+    return <SignUp />;
+  }
+
+  return <SignIn />;
+};
+
+export default AuthenticationMethod;

src/components/Header.js

@@ -0,0 +1,28 @@
+import { useAuthentication } from '../providers/Authentication';
+import AuthenticationMethod from './AuthenticationMethod';
+import SignOut from './SignOut';
+
+const Header = () => {
+  const { currentUser } = useAuthentication();
+
+  if (currentUser === undefined) {
+    return null;
+  }
+
+  return (
+    <>
+      <h1>TODO List</h1>
+      {currentUser ? (
+        <>
+          <SignOut />
+          {currentUser.displayName && <p>Hi {currentUser.displayName}</p>}
+          {currentUser.photoURL && <img src={currentUser.photoURL} />}
+        </>
+      ) : (
+        <AuthenticationMethod />
+      )}
+    </>
+  );
+};
+
+export default Header;

src/components/SignIn.js

@@ -0,0 +1,49 @@
+import { useState } from 'react';
+import { useForm } from '../hooks/useForm';
+import { useAuthentication } from '../providers/Authentication';
+
+const SignIn = () => {
+  const [error, setError] = useState();
+  const [form, updateForm, resetForm] = useForm({ email: '', password: '' });
+  const { signIn } = useAuthentication();
+
+  const handleSubmit = (event) => {
+    event.preventDefault();
+
+    if (form.email && form.password) {
+      signIn(form.email, form.password)
+        .then(() => {
+          resetForm();
+        })
+        .catch((error) => {
+          setError(error.message);
+        });
+    } else {
+      setError('email and password cannot be empty');
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <input
+        type="text"
+        name="email"
+        placeholder="Enter your email address"
+        value={form.email}
+        onChange={updateForm}
+      />
+      <input
+        type="password"
+        name="password"
+        value={form.password}
+        onChange={updateForm}
+      />
+      <button type="submit" onClick={handleSubmit}>
+        submit
+      </button>
+      {error && <p>{error}</p>}
+    </form>
+  );
+};
+
+export default SignIn;

src/components/SignOut.js

@@ -0,0 +1,13 @@
+import { useAuthentication } from '../providers/Authentication';
+
+const SignOut = () => {
+  const { signOut } = useAuthentication();
+
+  const handleClick = () => {
+    signOut();
+  };
+
+  return <button onClick={handleClick}>Sign Out</button>;
+};
+
+export default SignOut;

src/components/SignUp.js

@@ -0,0 +1,62 @@
+import { useState } from 'react';
+import { useForm } from '../hooks/useForm';
+import { useAuthentication } from '../providers/Authentication';
+
+const SignUp = () => {
+  const [error, setError] = useState();
+  const [form, updateForm, resetForm] = useForm({
+    email: '',
+    password: '',
+    passwordConfirmation: '',
+  });
+  const { signUp } = useAuthentication();
+
+  const handleSubmit = (event) => {
+    event.preventDefault();
+    if (
+      form.email &&
+      form.password &&
+      form.password === form.passwordConfirmation
+    ) {
+      signUp(form.email, form.password)
+        .then(() => {
+          resetForm();
+        })
+        .catch((error) => {
+          setError(error.message);
+        });
+    } else {
+      setError('email and password cannot be empty');
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <input
+        type="text"
+        name="email"
+        placeholder="Enter your email address"
+        value={form.email}
+        onChange={updateForm}
+      />
+      <input
+        type="password"
+        name="password"
+        value={form.password}
+        onChange={updateForm}
+      />
+      <input
+        type="password"
+        name="passwordConfirmation"
+        value={form.passwordConfirmation}
+        onChange={updateForm}
+      />
+      <button type="submit" onClick={handleSubmit}>
+        submit
+      </button>
+      {error && <p>{error}</p>}
+    </form>
+  );
+};
+
+export default SignUp;

src/components/TaskForm.js

@@ -1,7 +1,7 @@
-import { useInput } from '../hooks/useInput';
+import { useForm } from '../hooks/useForm';
 
 const TaskForm = ({ addTask }) => {
-  const [{ task }, update, reset] = useInput({ task: '' });
+  const [{ task }, update, reset] = useForm({ task: '' });
 
   const handleInputChange = (event) => {
     update(event);

src/components/TaskPage.js

@@ -0,0 +1,30 @@
+import Loading from './Loading';
+import Error from './Error';
+import TaskList from './TaskList';
+
+import { useFetch } from '../hooks/useFetch';
+
+const TaskPage = () => {
+  const [state, tasks, update, add] = useFetch(
+    process.env.REACT_APP_API_ENDPOINT,
+  );
+
+  const updateTask = (task) => {
+    update(task.id, task);
+  };
+
+  const addTask = (title) => {
+    add({ title, completed: false });
+  };
+  return (
+    <>
+      {state === 'PENDING' && <Loading />}
+      {state === 'SUCCESS' && (
+        <TaskList tasks={tasks} updateTask={updateTask} addTask={addTask} />
+      )}
+      {state === 'FAILED' && <Error>Something went wrong</Error>}
+    </>
+  );
+};
+
+export default TaskPage;

src/firebase.js

@@ -0,0 +1,12 @@
+import { initializeApp } from 'firebase/app';
+
+const firebaseConfig = {
+  apiKey: process.env.REACT_APP_apiKey,
+  authDomain: process.env.REACT_APP_authDomain,
+  projectId: process.env.REACT_APP_projectId,
+  storageBucket: process.env.REACT_APP_storageBucket,
+  messagingSenderId: process.env.REACT_APP_messagingSenderId,
+  appId: process.env.REACT_APP_appId,
+};
+
+export const app = initializeApp(firebaseConfig);

src/hooks/useForm.js

@@ -0,0 +1,20 @@
+import { useState } from 'react';
+
+export const useForm = (initialState) => {
+  const [form, setForm] = useState(initialState);
+
+  const updateForm = (event) => {
+    setForm((previous) => {
+      return {
+        ...previous,
+        [event.target.name]: event.target.value,
+      };
+    });
+  };
+
+  const resetForm = () => {
+    setForm(initialState);
+  };
+
+  return [form, updateForm, resetForm];
+};

src/index.js

@@ -2,10 +2,13 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
+import { AuthenticationProvider } from './providers/Authentication';
 
 ReactDOM.render(
   <React.StrictMode>
-    <App />
+    <AuthenticationProvider>
+      <App />
+    </AuthenticationProvider>
   </React.StrictMode>,
   document.getElementById('root'),
 );