emergency fix

src/app/server/aitube/types.ts

@@ -2,3 +2,4 @@
   // well, lol
   // https://www.youtube.com/watch?v=CDZg3maL9q0
   export type Workaround<T> = Promise<{ promise: Promise<T> }>
+

src/app/server/config/getDynamicConfig.ts

@@ -0,0 +1,17 @@
+"use server"
+
+import { DynamicConfig } from "@/lib/config/config"
+import { getValidBoolean } from "@/lib/utils/getValidBoolean"
+
+export async function getDynamicConfig(): Promise<DynamicConfig> {
+  const config = {
+    //oauthClientId: getValidString(process.env.HUGGING_FACE_OAUTH_CLIENT_ID, ""),
+    oauthClientId: `${process.env.NEXT_PUBLIC_HUGGING_FACE_OAUTH_CLIENT_ID || ""}`,
+
+    oauthScopes: "openid profile inference-api",
+    enableHuggingFaceOAuth: getValidBoolean(process.env.NEXT_PUBLIC_ENABLE_HUGGING_FACE_OAUTH, false),
+    enableHuggingFaceOAuthWall: getValidBoolean(process.env.NEXT_PUBLIC_ENABLE_HUGGING_FACE_OAUTH_WALL, false),
+  }
+
+  return config
+}

src/lib/config/config.ts

@@ -0,0 +1,6 @@
+export type DynamicConfig = {
+  oauthClientId: string
+  oauthScopes: string
+  enableHuggingFaceOAuth: boolean
+  enableHuggingFaceOAuthWall: boolean
+}

src/lib/config/getDefaultDynamicConfig.ts

@@ -0,0 +1,8 @@
+import { DynamicConfig } from "./config"
+
+export const getDefaultDynamicConfig = (): DynamicConfig => ({
+  oauthClientId: "",
+  oauthScopes: "openid profile inference-api",
+  enableHuggingFaceOAuth: false,
+  enableHuggingFaceOAuthWall: false,
+})

src/lib/config/useDynamicConfig.ts

@@ -0,0 +1,31 @@
+"use client"
+
+import { useEffect, useState, useTransition } from "react"
+
+import { getDynamicConfig } from "@/app/server/config/getDynamicConfig"
+
+import { getDefaultDynamicConfig } from "./getDefaultDynamicConfig"
+import { DynamicConfig } from "./config"
+
+export function useDynamicConfig(): {
+  config: DynamicConfig;
+  isConfigReady: boolean;
+} {
+  const [_isPending, startTransition] = useTransition()
+  const [config, setConfig] = useState<DynamicConfig>(getDefaultDynamicConfig())
+  const [isConfigReady, setConfigReady] = useState(false)
+
+  useEffect(() => {
+    startTransition(async () => {
+      if (isConfigReady) { return }
+      const newConfig = await getDynamicConfig()
+      setConfig(newConfig)
+      setConfigReady(true)
+    })
+  }, [isConfigReady])
+
+  return {
+    config,
+    isConfigReady
+  }
+}

src/lib/oauth/useOAuth.ts

@@ -4,12 +4,11 @@ import { useEffect } from "react"
 import { useSearchParams } from "next/navigation"
 import { OAuthResult, oauthHandleRedirectIfPresent, oauthLoginUrl } from "@huggingface/hub"
 
-import { enableHuggingFaceOAuth, oauthClientId, oauthScopes } from "@/app/config"
-
 import { usePersistedOAuth } from "./usePersistedOAuth"
 import { getValidOAuth } from "./getValidOAuth"
 import { useShouldDisplayLoginWall } from "./useShouldDisplayLoginWall"
 import { getOAuthRedirectUrl } from "./getOAuthRedirectUrl"
+import { useDynamicConfig } from "../config/useDynamicConfig"
 
 export function useOAuth({
   debug = false
@@ -28,15 +27,17 @@ export function useOAuth({
   enableOAuthWall: boolean
   oauthResult?: OAuthResult
  } {
+  const { config, isConfigReady } = useDynamicConfig()
+
   const [oauthResult, setOAuthResult] = usePersistedOAuth()
 
-  const clientId = oauthClientId
+  const clientId = config.oauthClientId
 
   // const redirectUrl = config.oauthRedirectUrl
   const redirectUrl = getOAuthRedirectUrl()
 
-  const scopes = oauthScopes
-  const enableOAuth = enableHuggingFaceOAuth
+  const scopes = config.oauthScopes
+  const enableOAuth = config.enableHuggingFaceOAuth
 
   const searchParams = useSearchParams()
   const code = searchParams?.get("code") || ""
@@ -46,11 +47,12 @@ export function useOAuth({
 
   // note: being able to log into hugging face using the popup
   // is different from seeing the "login wall"
-  const canLogin: boolean = Boolean(oauthClientId && enableOAuth)
+  const canLogin: boolean = Boolean(isConfigReady && clientId && enableOAuth)
   const isLoggedIn = Boolean(oauthResult)
 
   const enableOAuthWall = useShouldDisplayLoginWall() 
 
+  /*
   if (debug) {
     console.log("useOAuth debug:", {
       oauthResult,
@@ -65,22 +67,8 @@ export function useOAuth({
       canLogin,
       isLoggedIn,
     })
-
-    /*
-    useOAuth debug: {
-      oauthResult: '',
-      clientId: '........',
-      redirectUrl: 'http://localhost:3000',
-      scopes: 'openid profile inference-api',
-      isOAuthEnabled: true,
-      code: '...........',
-      state: '{"nonce":".........","redirectUri":"http://localhost:3000"}',
-      hasReceivedFreshOAuth: true,
-      canLogin: false,
-      isLoggedIn: false
-    }
-    */
   }
+  */
 
   useEffect(() => {
     // no need to perfor the rest if the operation is there is nothing in the url
@@ -93,11 +81,11 @@ export function useOAuth({
 
         if (!newOAuth) {
           if (debug) {
-            console.log("useOAuth::useEffect 1: got something in the url but no valid oauth data to show.. something went terribly wrong")
+            // console.log("useOAuth::useEffect 1: got something in the url but no valid oauth data to show.. something went terribly wrong")
           }
         } else {
           if (debug) {
-            console.log("useOAuth::useEffect 1: correctly received the new oauth result, saving it to local storage:", newOAuth)
+            // console.log("useOAuth::useEffect 1: correctly received the new oauth result, saving it to local storage:", newOAuth)
           }
           setOAuthResult(newOAuth)
 

src/lib/oauth/useShouldDisplayLoginWall.ts

@@ -1,16 +1,21 @@
+import { useDynamicConfig } from "../config/useDynamicConfig"
 
-// we don't want to display the login wall to people forking the project,
-
-import { enableHuggingFaceOAuth, enableHuggingFaceOAuthWall, oauthClientId } from "@/app/config"
-
-// or to people who selected no hugging face server at all
 export function useShouldDisplayLoginWall() {
+  const { config, isConfigReady } = useDynamicConfig()
 
-  const shouldDisplayLoginWall = Boolean(
-    oauthClientId &&
-    enableHuggingFaceOAuth &&
-    enableHuggingFaceOAuthWall
+  const clientId = config.oauthClientId
+  const enableOAuth = config.enableHuggingFaceOAuth
+  const enableOAuthWall = config.enableHuggingFaceOAuthWall
+
+  const isConfigEnablingOAuthWall = Boolean(
+    clientId &&
+    enableOAuth &&
+    enableOAuthWall
   )
 
+  const shouldDisplayLoginWall =
+  isConfigReady &&
+  isConfigEnablingOAuthWall
+
   return shouldDisplayLoginWall
 }

src/lib/utils/getValidBoolean.ts

@@ -0,0 +1,9 @@
+export const getValidBoolean = (something: any, defaultValue: boolean) => {
+  if (typeof something === "boolean") {
+    return something
+  }
+
+  const strValue = `${something || defaultValue}`.toLowerCase()
+  
+  return strValue === "true" || strValue === "1" || strValue === "on"
+}