firebase auth done

pages/login/firebase.js

@@ -0,0 +1,19 @@
+// Import the functions you need from the SDKs you need
+import { initializeApp } from "firebase/app";
+import { getAuth } from  "firebase/auth"
+// TODO: Add SDKs for Firebase products that you want to use
+// https://firebase.google.com/docs/web/setup#available-libraries
+
+// Your web app's Firebase configuration
+const firebaseConfig = {
+  apiKey: "AIzaSyBSWmhExysiQWedI94Md6OS80SqXWUqW9w",
+  authDomain: "rainbow-490e3.firebaseapp.com",
+  projectId: "rainbow-490e3",
+  storageBucket: "rainbow-490e3.appspot.com",
+  messagingSenderId: "78260067943",
+  appId: "1:78260067943:web:1086947575858daf26fec2"
+};
+
+// Initialize Firebase
+const app = initializeApp(firebaseConfig);
+export const auth = getAuth(app);

pages/login/index.js

@@ -1,15 +1,45 @@
 import Head from 'next/head'
-
+import { useState } from "react";
+import {
+  createUserWithEmailAndPassword,
+  signInWithEmailAndPassword,
+  onAuthStateChanged,
+  signOut,
+} from "firebase/auth";
+import {auth} from './firebase'
 
 export default function Login() {
+
+  const [loginEmail, setLoginEmail] = useState("");
+  const [loginPassword, setLoginPassword] = useState("");
+
+
+  const login = async () => {
+    try {
+      const user = await signInWithEmailAndPassword(
+        auth,
+        loginEmail,
+        loginPassword
+      );
+
+      console.log(user);
+    } catch (error) {
+      console.log(error.message);
+    }
+  };
+
   return (
     <div class="loginBody">
     <div class="loginmain">
     <p class="loginsign" align="center">Sign in</p>
     <form class="loginform">
-      <input class="loginun " type="text" align="center" placeholder="Username" />
-      <input class="loginpass" type="password" align="center" placeholder="Password" />
-      <a class="loginsubmit" align="center">Sign in</a>
+      <input class="loginun " type="text" align="center" placeholder="Username" onChange={(event) => {
+            setLoginEmail(event.target.value);
+          }}/>
+      <input class="loginpass" type="password" align="center" placeholder="Password"  onChange={(event) => {
+            setLoginPassword(event.target.value);
+          }} />
+      <a class="loginsubmit" align="center" onClick={login}>Sign in</a>
       <p align = "center" >OR</p>
       <a class="submitgoogle" align="center">Sign in with Google</a>
       <p class="loginforgot" align="center"><a href="#">Forgot Password?</a></p>

pages/login/signup.js

@@ -0,0 +1,51 @@
+import Head from 'next/head'
+import { useState } from "react";
+import {
+  createUserWithEmailAndPassword,
+  signInWithEmailAndPassword,
+  onAuthStateChanged,
+  signOut,
+} from "firebase/auth";
+import {auth} from './firebase'
+
+
+export default function signup() {
+
+  const [registerEmail, setRegisterEmail] = useState("");
+  const [registerPassword, setRegisterPassword] = useState("");
+
+  const register = async () => {
+    try {
+      const user = await createUserWithEmailAndPassword(
+        auth,
+        registerEmail,
+        registerPassword
+      );
+      console.log(user);
+    } catch (error) {
+      console.log(error.message);
+    }
+  };
+
+  return (
+    <div class="loginBody">
+    <div class="loginmain">
+    <p class="loginsign" align="center">Sign in</p>
+    <form class="loginform">
+      <input class="loginun " type="text" align="center" placeholder="Username" onChange={(event) => {
+            setRegisterEmail(event.target.value);
+          }} />
+      <input class="loginpass" type="password" align="center" placeholder="Password" onChange={(event) => {
+            setRegisterPassword(event.target.value);
+          }} />
+      <a class="loginsubmit" align="center" onClick={register}>Sign up</a>
+      <p align = "center" >OR</p>
+      <a class="submitgoogle" align="center">Sign in with Google</a>
+      <p class="loginforgot" align="center"><a href="#">Forgot Password?</a></p>
+       </form>     
+
+    </div>
+     </div>
+
+  )
+}