setting up firebase and firebase auth

contexts/authContext.tsx

@@ -0,0 +1,37 @@
+import { getAuth, onAuthStateChanged, User } from "firebase/auth";
+import React, { useContext, useEffect, useState } from "react";
+
+const AuthContext = React.createContext(null);
+
+export function useAuth() {
+  return useContext(AuthContext)
+}
+
+export function AuthProvider({ children }) {
+  const [currUser, setCurrUser] = useState<null | User>(null);
+
+  function loginSignup() {
+    return 
+  }
+
+  useEffect(() => {
+    const unsubscribe = getAuth().onAuthStateChanged(user => {
+      // will be null or the firebase logged in user
+      setCurrUser(user)
+    });
+
+    return unsubscribe
+  }, [])
+  
+
+
+  const value = {
+    currUser
+  }
+
+  return (
+    <AuthContext.Provider value={value}>
+      {children}
+    </AuthContext.Provider>
+  )
+}

firebase/index.js

@@ -0,0 +1,25 @@
+// Import the functions you need from the SDKs you need
+import firebase from "firebase/app";
+
+import { getAnalytics } from "firebase/analytics";
+
+// 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
+// For Firebase JS SDK v7.20.0 and later, measurementId is optional
+const firebaseConfig = {
+  apiKey: process.env.NEXT_PUBLIC_FIREBASE_APIKEY,
+  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
+  projectId: process.env.NEXT_PUBLIC_PROJECT_ID,
+  storageBucket: process.env.NEXT_PUBLIC_STORAGE_BUCKET,
+  messagingSenderId: process.env.NEXT_PUBLIC_MESSAGING_SENDER_ID,
+  appId: process.env.NEXT_PUBLIC_APPID,
+  measurementId: process.env.NEXT_PUBLIC_MEASUREMENT_ID
+};
+
+// Initialize Firebase
+const app = firebase.initializeApp(firebaseConfig);
+const analytics = getAnalytics(app);
+
+export default app;

package.json

@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "antd": "^4.18.3",
+    "firebase": "^9.6.2",
     "next": "12.0.7",
     "react": "17.0.2",
     "react-dom": "17.0.2",

pages/teams/login.tsx

@@ -4,7 +4,7 @@ export default function Login() {
   return (
     <div className="container mx-auto max-w-screen-sm bg-white bg-opacity-80 mt-20 p-10 rounded-lg shadow-lg flex flex-col items-start">
 
-      <button className='mx-auto text-lg text-sky-500 py-2 px-5 bg-gray-200 rounded flex flex-row items-center space-x-2 shadow-lg'>
+      <button className='mx-auto text-md text-sky-500 py-2 px-5 bg-gray-200 rounded flex flex-row items-center space-x-2 shadow-lg'>
         <FaGoogle />
         <span>Continue with Google</span>
       </button>