Started the Firebase Integration. Users Register and Login done

src/components/Account.jsx

@@ -0,0 +1,31 @@
+import React, {useState} from 'react'
+import {firebase} from './Firebase/firebase'
+import {getAuth, onAuthStateChanged} from 'firebase/auth'
+
+const Account = () => {
+
+    const [signIn, setSignIn] = useState('false')
+
+    const auth = getAuth()
+
+    onAuthStateChanged(auth, (user) => {
+
+        if (user) {
+            setSignIn(true)
+        } else {
+            setSignIn(false)
+        }
+    })
+    
+    return (
+        <div>
+            {
+                signIn ?
+                    <h1>Insert your Clockify API here</h1> :
+                    <h1>Sign in before access to this page...</h1>
+            }
+        </div>
+    )
+}
+
+export default Account

src/components/DarkMode.jsx

@@ -0,0 +1,11 @@
+import React from 'react'
+
+const DarkMode = () => {
+    return (
+        <input type="checkbox" className=".dark-mode_toogle-switch">
+            
+        </input>
+    )
+}
+
+export default DarkMode

src/components/Identify.jsx

@@ -2,13 +2,50 @@ import React, {useState} from 'react'
 import LoginForm from './Identify Childrens/LoginForm'
 import RegisterForm from './Identify Childrens/RegisterForm'
 
+import {firebase} from './Firebase/firebase'
+import {withRouter} from 'react-router-dom'
 
-const Identify = () => {
+import {getAuth, createUserWithEmailAndPassword, signInWithEmailAndPassword} from 'firebase/auth'
+
+
+const Identify = (props) => {
+    
     const [act, setAct] = useState('')
-
+    
     const [email, setEmail] = useState('')
     const [password, setPassword] = useState('')
     const [confirmPassword, setConfirmPassword] = useState('')
+    
+    const [message, setMessage] = React.useState('')
+
+    const auth = getAuth()
+
+    const register = async () => {
+
+        try {
+            const response = await createUserWithEmailAndPassword(auth, email, password)
+
+        } catch (error) {
+            console.log(error)
+            setMessage(error.message)
+            console.log(message)
+        }
+    }
+
+    const login = async () => {
+
+        try {
+            const response = await signInWithEmailAndPassword(auth, email, password)
+            console.log(response)
+            console.log(response.user)
+
+            props.history.push('/config-account')
+
+        } catch (error) {
+            console.log(error)
+            alert('USER OR PASSWORD NOT VALID')
+        }
+    }
 
     const defineLogin = () => {
         if (act !== 'login') {
@@ -35,6 +72,11 @@ const Identify = () => {
             return
         }
 
+        if (password.trim().length < 8) {
+            alert('PASSWORD TOO SHORT')
+            return
+        }
+
         if (act === 'register') {
 
             if (!confirmPassword.trim()) {
@@ -42,22 +84,27 @@ const Identify = () => {
                 return
             }
 
+            if (password !== confirmPassword) {
+                alert("PASSWORDS DOESN'T MATCH")
+                return                
+            }
+            register()  
+
             e.target.reset()
             setEmail('')
             setPassword('')
             setConfirmPassword('')
 
-            //SEND TO FIREBASE
             return
         }
 
         if (act === 'login') {
 
+            login()
+
             e.target.reset()
             setEmail('')
             setPassword('')
-
-            //SEND TO FIREBASE
             return
         }
 
@@ -126,4 +173,4 @@ const Identify = () => {
     )
 }
 
-export default Identify
+export default withRouter(Identify)