Feat auth frontend

.env.development

@@ -23,3 +23,4 @@ NEXT_PUBLIC_APP_MEASUREMENT_ID=G-7ZNKM9VFN2
 NEXT_PUBLIC_TERM_URL=https://file-system-run-qi6ms4rtoa-ue.a.run.app/
 NEXT_PUBLIC_APP_STRIPE_KEY=pk_test_51NyMUrJJ9Dbjmm7hji7JsdifB3sWmgPKQhfRsG7pEPjvwyYe0huU1vLeOwbUe5j5dmPWkS0EqB6euANw2yJ2yQn000lHnTXis7
 NEXT_PUBLIC_KANA_SERVER_URL=kana-server.ctfguide.com
+NEXT_PUBLIC_GOOGLE_CLIENT_ID=166652277588-4uk7g7irqlicacelg1nfgt0ejmskmo9h.apps.googleusercontent.com

package.json

@@ -27,13 +27,14 @@
     "asciinema-player": "3.6.3",
     "autoprefixer": "^10.4.12",
     "babel-plugin-macros": "^3.1.0",
+    "@react-oauth/google": "^0.12.1",
+    "jwt-decode": "^4.0.0",
     "chart.js": "^4.4.1",
     "clsx": "^1.2.1",
     "corepack": "^0.17.0",
     "dotenv": "^16.0.3",
     "easymde": "^2.18.0",
     "enable": "^3.4.0",
-    "firebase": "^9.16.0",
     "focus-visible": "^5.2.0",
     "framer-motion": "^10.2.4",
     "heroicons": "^2.0.13",

src/components/AuthPopup.jsx

@@ -1,24 +1,10 @@
 import { useState, useEffect } from 'react';
 import Link from 'next/link';
-import { getAuth, onAuthStateChanged } from 'firebase/auth';
+//import { getAuth, onAuthStateChanged } from 'firebase/auth';
 
 export function AuthPopup() {
   // check if firebase logged in
   const [user, setUser] = useState(false);
-  const auth = getAuth();
-  useEffect(() => {
-    const auth = getAuth();
-    onAuthStateChanged(auth, (user) => {
-      if (user) {
-        // User is signed in, see docs for a list of available properties
-        // https://firebase.google.com/docs/reference/js/firebase.User
-        const uid = user.uid;
-        setUser(false);
-      } else {
-        setUser(false);
-      }
-    });
-  });
   if (user) {
     return <div>{/*User logged in*/}</div>;
   } else {

src/components/StandardNav.jsx

@@ -18,10 +18,7 @@ import request from "@/utils/request";
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faEllipsis, faSearch } from '@fortawesome/free-solid-svg-icons';
 import { faBug, faLock, faUserSecret, faNetworkWired, faBrain, faTerminal } from '@fortawesome/free-solid-svg-icons';
-// Do not remove, even if detected as unused by vscode!
-import { app } from '../config/firebaseConfig';
 
-import { getAuth, onAuthStateChanged, signOut } from 'firebase/auth';
 import 'reactjs-popup/dist/index.css';
 import Upgrade from './nav/Upgrade';
 
@@ -34,9 +31,7 @@ function classNames(...classes) {
   return classes.filter(Boolean).join(' ');
 }
 
-const auth = getAuth();
 const baseUrl = process.env.NEXT_PUBLIC_FRONTEND_URL;
-
 const adminList = ['pranav'];
 
 const DEFAULT_NOTIFICATION = {
@@ -58,20 +53,15 @@ export function StandardNav({ guestAllowed, alignCenter = true }) {
   const [showBanner, setShowBanner] = useState(false);
   const [showSearchModal, setShowSearchModal] = useState(false);
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+
   const [open, setOpen] = useState(true)
 
 
-
   const router = useRouter();
 
   function logout() {
-    signOut(auth)
-      .then(() => {
-        window.location.replace('/login');
-      })
-      .catch((error) => {
-        console.log(error);
-      });
+    document.cookie = 'idToken=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
+    router.push('/login');
   }
 
   // if user signed out redirect

src/components/groups/assignments/create-challenge.jsx

@@ -7,8 +7,8 @@ import { MarkdownViewer } from '@/components/MarkdownViewer';
 import { ToastContainer, toast } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
 import  fileApi  from '@/utils/file-api';
-import { getAuth } from 'firebase/auth';
-import request from '@/utils/request';
+import request, { getCookie } from '@/utils/request';
+import { jwtDecode } from 'jwt-decode';
 
 const styles = {
   h1: { fontSize: '2.4rem' },
@@ -19,8 +19,6 @@ const styles = {
   h6: { fontSize: '1.2rem' },
 };
 
-const auth = getAuth();
-
 export default function Createchall(props) {
 
   const pages = [
@@ -87,7 +85,10 @@ export default function Createchall(props) {
         await uploadChallenge('');
         return;
       } else {
-        const token = await auth.currentUser.accessToken;
+        const cookie = getCookie('idToken');
+        const data = jwtDecode(cookie);
+
+        const token = data.id;
         const fileId = await fileApi(token, selectedFile);
         if(fileId !== null) {
           await uploadChallenge(fileId);

src/components/groups/assignments/updateChallengeInfo.jsx

@@ -5,14 +5,12 @@ import { StandardNav } from '@/components/StandardNav';
 import ClassroomNav from '@/components/groups/classroomNav';
 import CreateAssignment from '@/components/groups/assignments/createAssignment';
 import { useState, useEffect } from 'react';
-import request from '@/utils/request';
 import { ToastContainer, toast } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
-
 import fileApi, { deleteFiles, getFileName, getFile } from '@/utils/file-api';
-import { getAuth } from 'firebase/auth';
 
-const auth = getAuth();
+import request, { getCookie } from '@/utils/request';
+import { jwtDecode } from 'jwt-decode';
 
 const Editor = (props) => {
   const [contentPreview, setContentPreview] = useState('');
@@ -55,8 +53,9 @@ const Editor = (props) => {
     if(!validateNewChallege()) {
       return;
     }
-
-    const token = await auth.currentUser.accessToken;
+    const cookie = getCookie('idToken');
+    const data = jwtDecode(cookie);
+    const token = data.id;
     setIsCreating(true);
     let fileIds = [];
     let idsToDelete = [];