Merge pull request #3 from Jgarnes/main

Removed React-Auth-kit

Author: chrisuribe

package-lock.json

@@ -17,10 +17,10 @@
     "@emotion/styled": "^11.11.0",
     "@mui/icons-material": "^5.15.12",
     "@mui/material": "^5.15.12",
+    "firebase": "^10.9.0",
     "git": "^0.1.5",
     "node": "^21.6.2",
     "react": "^18.2.0",
-    "react-auth-kit": "^3.1.2",
     "react-dom": "^18.2.0",
     "react-draggable": "^4.4.6",
     "react-router-dom": "^6.22.3"

package.json

@@ -0,0 +1,28 @@
+import { onAuthStateChanged, signOut, User } from "firebase/auth";
+import { useEffect, useState } from "react";
+import { auth } from '../../firebase-config';
+
+const AuthDetails = () => {
+    const [authUser, setAuthUser] = useState<User | null>(null);
+
+    useEffect(() => {
+        const removeAuthListener = onAuthStateChanged(auth, (user) => {
+            if (user) {
+                setAuthUser(user);
+            } else {
+                setAuthUser(null);
+            }
+        })
+        return () => removeAuthListener();
+    }, []);
+
+    const userSignOut = () => {
+        signOut(auth).then(() => {
+            console.log('signed out worked')
+        }).catch(error => console.log(error))
+    }
+
+    return <div>{authUser ? <><p>{`Signed In as ${auth.currentUser?.email}`}</p><button onClick={userSignOut}> Sign Out</button> </> : <p>Signed Out</p>}</div> 
+};
+
+export default AuthDetails

src/components/login/AuthDetails.tsx

@@ -1,6 +1,22 @@
 import './login.css';
+import { signInWithEmailAndPassword } from 'firebase/auth';
+import { useState } from 'react';
+import { auth } from '../../firebase-config';
 
 function Login() {
+    const [email, setEmail] = useState('');
+    const [password, setPassword] = useState('');
+
+  const signIn = (e: { preventDefault: () => void; }) => {
+    e.preventDefault();
+    signInWithEmailAndPassword(auth, email, password)
+    .then((userCredential) => {
+      console.log(userCredential)
+    }).catch((error) => {
+      console.log(error)
+    })
+  };
+
   return (
     <>
       <div className="main-container">
@@ -20,12 +36,14 @@ function Login() {
 
             <div className="_or">or</div>
 
-            <form action="" className="the-form">
+            <form onSubmit={signIn} className="the-form">
               <label htmlFor="email">Email</label>
               <input
                 type="email"
                 name="email"
                 id="email"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
                 placeholder="Enter your email"
               ></input>
 
@@ -34,6 +52,8 @@ function Login() {
                 type="password"
                 name="password"
                 id="password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
                 placeholder="Enter your password"
               ></input>
 

src/components/login/Login.tsx renamed to src/components/login/loginForm.tsx

@@ -0,0 +1,57 @@
+import './login.css';
+import { createUserWithEmailAndPassword } from 'firebase/auth';
+import { useState } from 'react';
+import { auth } from '../../firebase-config';
+
+function SignUp() {
+    const [email, setEmail] = useState('');
+    const [password, setPassword] = useState('');
+
+  const signUp = (e: { preventDefault: () => void; }) => {
+    e.preventDefault();
+    createUserWithEmailAndPassword(auth, email, password)
+    .then((userCredential) => {
+      console.log(userCredential)
+    }).catch((error) => {
+      console.log(error)
+    })
+  };
+
+  return (
+    <>
+      <div className="main-container">
+        <div className="form-container">
+          <div className="form-body">
+            </div>
+
+            <form onSubmit={signUp} className="the-form">
+                <h1>Sign Up</h1>
+              <label htmlFor="email">Email</label>
+              <input
+                type="email"
+                name="email"
+                id="email"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                placeholder="Enter your email"
+              ></input>
+
+              <label htmlFor="password">Password</label>
+              <input
+                type="password"
+                name="password"
+                id="password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                placeholder="Enter your password"
+              ></input>
+
+              <input type="submit" value="Sign Up"></input>
+            </form>
+          </div>
+        </div>
+    </>
+  );
+}
+
+export default SignUp;

src/components/login/signUp.tsx

@@ -0,0 +1,17 @@
+import { auth } from "./firebase-config";
+import { createUserWithEmailAndPassword, signInWithEmailAndPassword, signOut, UserCredential } from "firebase/auth";
+
+// Sign up function
+export const signUp = async (email: string, password: string): Promise<UserCredential> => {
+  return createUserWithEmailAndPassword(auth, email, password);
+};
+
+// Sign in function
+export const signIn = async (email: string, password: string): Promise<UserCredential> => {
+  return signInWithEmailAndPassword(auth, email, password);
+};
+
+// Sign out function
+export const signOutUser = async (): Promise<void> => {
+  return signOut(auth);
+};

src/firebase-auth.ts

@@ -0,0 +1,18 @@
+import { initializeApp } from "firebase/app";
+import { getAuth } from "firebase/auth";
+
+const firebaseConfig = {
+    apiKey: "AIzaSyC4Xc8yP6YZopnPpeaYGjsjUg05oG2GT-Y",
+    authDomain: "agile-coder-quest.firebaseapp.com",
+    projectId: "agile-coder-quest",
+    storageBucket: "agile-coder-quest.appspot.com",
+    messagingSenderId: "770833514045",
+    appId: "1:770833514045:web:e9c52325e78d9a6c5ef454",
+    measurementId: "G-ENRRMBS1S1"
+  };
+
+//Initialize Firebase
+const app = initializeApp(firebaseConfig);
+
+//Initializes Authentication
+export const auth = getAuth(app);

src/firebase-config.ts

@@ -1,7 +1,15 @@
-import Login from '../../components/login/Login';
+import Login from '../../components/login/loginForm';
+import SignUp from '../../components/login/signUp'
+import AuthDetails from '../../components/login/AuthDetails';
 
 const LoginPage = () => {
-  return <Login />;
+  return (
+    <div>
+  <Login />
+  <SignUp />
+  <AuthDetails />
+  </div>
+);
 };
 
 export default LoginPage;