feat: middleware support for oauth

apps/web/components/Contexts/CourseContext.tsx

@@ -38,7 +38,7 @@ export function CourseProvider({
     }
   }, [courseStructureData,session])
 
-  if (!courseStructureData) return <PageLoading></PageLoading>
+  if (!courseStructureData) return 
 
   return (
     <CourseContext.Provider value={courseStructure}>

apps/web/components/Contexts/LHSessionContext.tsx

@@ -10,16 +10,17 @@ function LHSessionProvider({ children }: { children: React.ReactNode }) {
 
     useEffect(() => {
         console.log('useLHSession', session);
-    }, [session])
+    }, [])
 
 
-    if (session.status == 'loading') {
+    if (session && session.status == 'loading') {
         return <PageLoading />
     }
 
-    else {
+    else if (session) {
         return (
             <SessionContext.Provider value={session}>
+                {console.log('rendered')}
                 {children}
             </SessionContext.Provider>
         )

apps/web/components/Contexts/OrgContext.tsx

@@ -1,7 +1,7 @@
 'use client'
 import { getAPIUrl } from '@services/config/config'
 import { swrFetcher } from '@services/utils/ts/requests'
-import React, { useContext, useEffect } from 'react'
+import React, { useContext, useEffect, useState } from 'react'
 import useSWR from 'swr'
 import { createContext } from 'react'
 import { useRouter } from 'next/navigation'
@@ -20,24 +20,31 @@ export function OrgProvider({
   const session = useLHSession() as any;
   const access_token = session?.data?.tokens?.access_token;
   const { data: org } = useSWR(`${getAPIUrl()}orgs/slug/${orgslug}`, (url) => swrFetcher(url, access_token))
+  const [isLoading, setIsLoading] = useState(true);
+  const [isOrgActive, setIsOrgActive] = useState(true);
 
-  const router = useRouter()
   // Check if Org is Active 
   const verifyIfOrgIsActive = () => {
     if (org && org?.config.config.GeneralConfig.active === false) {
-      router.push('/404')
+      setIsOrgActive(false)
+    }
+    else {
+      setIsOrgActive(true)
     }
-
   }
-  useEffect(() => {
-    verifyIfOrgIsActive()
-  }, [org])
 
-  if (org) {
+  useEffect(() => {
+    if (org && session) {
+      verifyIfOrgIsActive()
+      setIsLoading(false)
+    }
+  }, [org, session])
+
+  if (!isLoading) {
     return <OrgContext.Provider value={org}>{children}</OrgContext.Provider>
   }
-  else {
-    return <ErrorUI />
+  if (!isOrgActive) {
+    return <ErrorUI message='This organization is no longer active' />
   }
 }
 

apps/web/components/Dashboard/UI/LeftMenu.tsx

@@ -11,12 +11,12 @@ import React, { useEffect } from 'react'
 import UserAvatar from '../../Objects/UserAvatar'
 import AdminAuthorization from '@components/Security/AdminAuthorization'
 import { useLHSession } from '@components/Contexts/LHSessionContext'
+import { getUriWithOrg, getUriWithoutOrg } from '@services/config/config'
 
 function LeftMenu() {
   const org = useOrg() as any
   const session = useLHSession() as any
   const [loading, setLoading] = React.useState(true)
-  const route = useRouter()
 
   function waitForEverythingToLoad() {
     if (org && session) {
@@ -26,9 +26,9 @@ function LeftMenu() {
   }
 
   async function logOutUI() {
-    const res = await signOut()
+    const res = await signOut({ redirect: true, callbackUrl: getUriWithoutOrg('/login?orgslug=' + org.slug) })
     if (res) {
-      route.push('/login')
+      getUriWithOrg(org.slug, '/')
     }
   }
 

apps/web/components/Security/HeaderProfileBox.tsx

@@ -6,13 +6,16 @@ import { Settings } from 'lucide-react'
 import UserAvatar from '@components/Objects/UserAvatar'
 import useAdminStatus from '@components/Hooks/useAdminStatus'
 import { useLHSession } from '@components/Contexts/LHSessionContext'
+import { useOrg } from '@components/Contexts/OrgContext'
+import { getUriWithOrg, getUriWithoutOrg } from '@services/config/config'
 
 export const HeaderProfileBox = () => {
   const session = useLHSession() as any
   const isUserAdmin = useAdminStatus() as any
+  const org = useOrg() as any
 
-  useEffect(() => {}
-  , [session])
+  useEffect(() => { }
+    , [session])
 
   return (
     <ProfileArea>
@@ -20,10 +23,11 @@ export const HeaderProfileBox = () => {
         <UnidentifiedArea className="flex text-sm text-gray-700 font-bold p-1.5 px-2 rounded-lg">
           <ul className="flex space-x-3 items-center">
             <li>
-              <Link href="/login">Login</Link>
+              <Link
+                href={{ pathname: getUriWithoutOrg('/login'), query: org ? { orgslug: org.slug } : null }} >Login</Link>
             </li>
             <li className="bg-black rounded-lg shadow-md p-2 px-3 text-white">
-              <Link href="/signup">Sign up</Link>
+              <Link href={{ pathname: getUriWithoutOrg('/signup'), query: org ? { orgslug: org.slug } : null }}>Sign up</Link>
             </li>
           </ul>
         </UnidentifiedArea>

apps/web/components/StyledElements/Error/Error.tsx

@@ -3,7 +3,7 @@ import { AlertTriangle, RefreshCcw } from 'lucide-react'
 import { useRouter } from 'next/navigation'
 import React from 'react'
 
-function ErrorUI() {
+function ErrorUI(params: { message?: string }) {
   const router = useRouter()
 
   function reloadPage() {
@@ -15,7 +15,7 @@ function ErrorUI() {
     <div className="flex flex-col py-10 mx-auto antialiased items-center space-y-6 bg-gradient-to-b from-rose-100 to-rose-100/5 ">
       <div className="flex flex-row  items-center space-x-5  rounded-xl ">
         <AlertTriangle className="text-rose-700" size={45} />
-        <p className="text-3xl font-bold text-rose-700">Something went wrong</p>
+        <p className="text-3xl font-bold text-rose-700">{params.message ? params.message : 'Something went wrong'}</p>
       </div>
       <div>
         <button