work on HF login

src/app/interface/hf-login/index.tsx

@@ -2,21 +2,15 @@
 
 import { useCurrentUser } from "@/app/state/userCurrentUser"
 import { Button } from "@/components/ui/button"
-import { useHuggingFaceLogin } from "@/lib/useHuggingFaceLogin"
 
 export function HuggingFaceLogin() {
 
-  const user = useCurrentUser()
-  const hf = useHuggingFaceLogin()
+  const { user, login } = useCurrentUser()
 
   // feature is not finished yet
   if (!user?.userName || user?.userName !== "jbilcke-hf") { return }
 
-  console.log("user:", user)
-  console.log("hf.isLoggedIn:", hf.isLoggedIn)
-  console.log("hf.oauthResult:", hf.oauthResult)
-
   return (
-    <div><Button onClick={hf.login}>test</Button></div>
+    <div><Button onClick={login}>Sign in with Hugging Face</Button></div>
   )
 }

src/app/main.tsx

@@ -16,8 +16,6 @@ import { PublicMusicVideosView } from "./views/public-music-videos-view"
 import { getCollectionKey } from "@/lib/getCollectionKey"
 import { PublicVideoEmbedView } from "./views/public-video-embed-view"
 
-import { HuggingFaceLogin } from "./interface/hf-login"
-
 // this is where we transition from the server-side space
 // and the client-side space
 // basically, all the views are generated in client-side space
@@ -140,7 +138,6 @@ export function Main({
   const view = useStore(s => s.view)
   return (
     <TubeLayout>
-      <HuggingFaceLogin />
       {view === "home" && <HomeView />}
       {view === "public_video_embed" && <PublicVideoEmbedView />}
       {view === "public_video" && <PublicVideoView />}

src/app/state/defaultSettings.ts

@@ -2,4 +2,5 @@ import { Settings } from "@/types/general"
 
 export const defaultSettings: Settings = {
   huggingfaceApiKey: "",
+  huggingfaceTemporaryApiKey: "",
 }

src/app/state/localStorageKeys.ts

@@ -3,4 +3,5 @@ import { Settings } from "@/types/general"
 export const localStorageKeys: Record<keyof Settings, string> = {
   // important: prefix with AI_TUBE to avoid collisions when running the app on localhost
   huggingfaceApiKey: "AI_TUBE_CONF_AUTH_HF_API_TOKEN",
+  huggingfaceTemporaryApiKey: "AI_TUBE_CONF_AUTH_TEMPORARY_HF_API_TOKEN"
 }

src/app/state/userCurrentUser.ts

@@ -1,48 +1,213 @@
-import { useEffect, useTransition } from "react"
+import { useEffect, useState, useTransition } from "react"
+import { OAuthResult, oauthHandleRedirectIfPresent, oauthLoginUrl } from "@huggingface/hub"
+
+import { useLocalStorage } from "usehooks-ts"
 
 import { UserInfo } from "@/types/general"
 
 import { useStore } from "./useStore"
-import { useLocalStorage } from "usehooks-ts"
+
 import { localStorageKeys } from "./localStorageKeys"
 import { defaultSettings } from "./defaultSettings"
 import { getCurrentUser } from "../server/actions/users"
 
-export function useCurrentUser(): UserInfo | undefined {
+export function useCurrentUser({
+  isLoginRequired = false
+}: {
+  // set this to true, and the page will automatically redirect to the
+  // HF login page if the session is expired
+  isLoginRequired?: boolean
+} = {}): {
+  user?: UserInfo
+  login: () => void
+  checkSession: (isLoginRequired: boolean) => Promise<UserInfo | undefined>
+  apiKey: string
+  oauthResult?: OAuthResult
+
+  // the long standing API is a temporary solution for "PRO" users of AI Tube
+  // (users who use Clap files using external tools,
+  // or want ot use their own HF account to generate videos)
+  longStandingApiKey: string
+  setLongStandingApiKey: (apiKey: string, loginOnFailure: boolean) => void
+ } {
   const [_pending, startTransition] = useTransition()
 
-  const currentUser = useStore(s => s.currentUser)
+  const user = useStore(s => s.currentUser)
   const setCurrentUser = useStore(s => s.setCurrentUser)
+  const [oauthResult, setOauthResult] = useState<OAuthResult>()
+
+  const userId = `${user?.id || ""}`
 
-  const [huggingfaceApiKey] = useLocalStorage<string>(
+  // this is the legacy, long-standing API key
+  // which is still required for long generation of Clap files
+  const [huggingfaceApiKey, setHuggingfaceApiKey] = useLocalStorage<string>(
     localStorageKeys.huggingfaceApiKey,
     defaultSettings.huggingfaceApiKey
   )
-  useEffect(() => {
-    startTransition(async () => {
 
-      // no key
-      if (!huggingfaceApiKey) {
+  // this is the new recommended API to use, with short expiration rates
+  // in the future this API key will be enough for all our use cases
+  const [huggingfaceTemporaryApiKey, setHuggingfaceTemporaryApiKey] = useLocalStorage<string>(
+    localStorageKeys.huggingfaceTemporaryApiKey,
+    defaultSettings.huggingfaceTemporaryApiKey
+  )
+
+  // force the API call
+  const checkSession = async (isLoginRequired: boolean = false): Promise<UserInfo | undefined> => {
+
+    console.log("useCurrentUser.checkSession()")
+    // new way: try to use the safer temporary key whenever possible
+    if (huggingfaceTemporaryApiKey) {
+      try {
+
+        const user = await getCurrentUser(huggingfaceTemporaryApiKey)
+
+        setCurrentUser(user)
+
+        return user // we stop there, no need to try the legacy key
+
+      } catch (err) {
+        console.error("failed to log in using the temporary key:", err)
         setCurrentUser(undefined)
-        return
       }
+    }
 
-      // already logged-in
-      if (currentUser?.id) {
-        return
-      }
+    // deprecated: the old static key which is harder to renew
+    if (huggingfaceApiKey) {
       try {
 
         const user = await getCurrentUser(huggingfaceApiKey)
 
         setCurrentUser(user)
+
+        return user
       } catch (err) {
-        console.error("failed to log in:", err)
+        console.error("failed to log in using the static key:", err)
         setCurrentUser(undefined)
       }
+    }
+
+    // when we reach this stage, we know that none of the API tokens were valid
+    // we are given the choice to request a login or not
+    // (depending on if it's a secret page or not)
+
+    if (isLoginRequired) {
+      await login()
+    }
+
+    return undefined
+  }
+
+  // can be called many times, but won't do the API call if not necessary
+  const main = async (isLoginRequired: boolean) => {
+
+    console.log("useCurrentUser()")
+
+    try {
+      const res = await oauthHandleRedirectIfPresent()
+      if (res) {
+        console.log("useCurrentUser(): we just received an oauth login!")
+        setOauthResult(res)
+        setHuggingfaceTemporaryApiKey(res.accessToken)
+        await checkSession(isLoginRequired)
+        return
+      }
+    } catch (err) {
+    }
+    
+    // already logged-in, no need to spend an API call
+    // although it is worth noting that the API token might be expired at this stage
+    if (userId) {
+      return
+    }
+
+    console.log("useCurrentUser(): yes, we need to call synchronizeSession()")
+    await checkSession(isLoginRequired)
+  }
+
+  useEffect(() => {
+    startTransition(async () => { await main(isLoginRequired) })
+  }, [isLoginRequired, huggingfaceApiKey, huggingfaceTemporaryApiKey, userId])
+
+
+  const login = async () => {
+    const oauthUrl = await oauthLoginUrl({
+      /**
+       * OAuth client ID.
+       *
+       * For static Spaces, you can omit this and it will be loaded from the Space config, as long as `hf_oauth: true` is present in the README.md's metadata.
+       * For other Spaces, it is available to the backend in the OAUTH_CLIENT_ID environment variable, as long as `hf_oauth: true` is present in the README.md's metadata.
+       *
+       * You can also create a Developer Application at https://huggingface.co/settings/connected-applications and use its client ID.
+       */
+      clientId: process.env.NEXT_PUBLIC_AI_TUBE_OAUTH_CLIENT_ID,
+
+      // hubUrl?: string;
+
+      /**
+       * OAuth scope, a list of space separate scopes.
+       *
+       * For static Spaces, you can omit this and it will be loaded from the Space config, as long as `hf_oauth: true` is present in the README.md's metadata.
+       * For other Spaces, it is available to the backend in the OAUTH_SCOPES environment variable, as long as `hf_oauth: true` is present in the README.md's metadata.
+       *
+       * Defaults to "openid profile".
+       *
+       * You can also create a Developer Application at https://huggingface.co/settings/connected-applications and use its scopes.
+       *
+       * See https://huggingface.co/docs/hub/oauth for a list of available scopes.
+       */
+      scopes: "openid profile",
+
+      /**
+       * Redirect URI, defaults to the current URL.
+       *
+       * For Spaces, any URL within the Space is allowed.
+       *
+       * For Developer Applications, you can add any URL you want to the list of allowed redirect URIs at https://huggingface.co/settings/connected-applications.
+       */
+      redirectUrl: "https://jbilcke-hf-ai-tube.hf.space",
+
+      /**
+       * State to pass to the OAuth provider, which will be returned in the call to `oauthLogin` after the redirect.
+       */
+      // state: ""
     })
-  
-  }, [huggingfaceApiKey, currentUser?.id])
 
-  return currentUser
+    window.location.href = oauthUrl
+  }
+
+  const setLongStandingApiKey = (apiKey: string, loginOnFailure: boolean) => {
+    (async () => {
+      try {
+        const user = await getCurrentUser(apiKey)
+        setHuggingfaceApiKey(apiKey)
+        setCurrentUser(user)
+      } catch (err) {
+        console.error("failed to log in using the long standing key:", err)
+        setHuggingfaceApiKey("")
+        setCurrentUser(undefined)
+        if (loginOnFailure) {
+          login()
+        }
+      }
+    })()
+  }
+
+  // this may correspond to either a short or a long standing api key
+  // in the future it may always be a short api key with auto renewal
+  const apiKey = user?.hfApiToken || ""
+
+
+  // for now, we still need to keep track of a logn api, but this is purely optional
+  const longStandingApiKey = huggingfaceApiKey
+
+  return {
+    user,
+    login,
+    checkSession,
+    oauthResult,
+    apiKey,
+    longStandingApiKey,
+    setLongStandingApiKey,
+  }
 }

src/app/views/public-video-view/index.tsx

@@ -43,14 +43,14 @@ export function PublicVideoView() {
   // EDIT: you know what, let's do this the dirty way for now
   // const [desiredCurrentTime, setDesiredCurrentTime] = useState()
 
-  const currentUser = useCurrentUser()
+  const { user } = useCurrentUser()
 
   const [userThumbnail, setUserThumbnail] = useState("")
   
   useEffect(() => {
-    setUserThumbnail(currentUser?.thumbnail || "")
+    setUserThumbnail(user?.thumbnail || "")
   
-  }, [currentUser?.thumbnail])
+  }, [user?.thumbnail])
 
   const handleBadUserThumbnail = () => {
     if (userThumbnail) {
@@ -388,7 +388,7 @@ export function PublicVideoView() {
           </div>
           
           {/* COMMENT INPUT BLOCK - HORIZONTAL */}
-          {currentUser && <div className="flex flex-row w-full">
+          {user && <div className="flex flex-row w-full">
             
             {/* AVATAR */}
             <div 
@@ -403,7 +403,7 @@ export function PublicVideoView() {
                   />
               </div>
               : <DefaultAvatar
-                  username={currentUser?.userName}
+                  username={user?.userName}
                   bgColor="#fde047"
                   textColor="#1c1917"
                   width={36}

src/app/views/user-account-view/index.tsx

@@ -1,23 +1,20 @@
 "use client"
 
 import { useEffect, useState, useTransition } from "react"
-import { useLocalStorage } from "usehooks-ts"
 
 import { useStore } from "@/app/state/useStore"
 import { cn } from "@/lib/utils"
 import { ChannelList } from "@/app/interface/channel-list"
-import { localStorageKeys } from "@/app/state/localStorageKeys"
-import { defaultSettings } from "@/app/state/defaultSettings"
-import { Input } from "@/components/ui/input"
 
 import { getPrivateChannels } from "@/app/server/actions/ai-tube-hf/getPrivateChannels"
+import { useCurrentUser } from "@/app/state/userCurrentUser"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
 
 export function UserAccountView() {
   const [_isPending, startTransition] = useTransition()
-  const [huggingfaceApiKey, setHuggingfaceApiKey] = useLocalStorage<string>(
-    localStorageKeys.huggingfaceApiKey,
-    defaultSettings.huggingfaceApiKey
-  )
+
+  const { user, login, apiKey, longStandingApiKey, setLongStandingApiKey } = useCurrentUser({ isLoginRequired: true })
   const setView = useStore(s => s.setView)
   const userChannel = useStore(s => s.userChannel)
   const setUserChannel = useStore(s => s.setUserChannel)
@@ -28,10 +25,10 @@ export function UserAccountView() {
 
   useEffect(() => {
       startTransition(async () => {
-        if (!isLoaded && huggingfaceApiKey) {
+        if (!isLoaded && apiKey) {
           try {
             const newUserChannels = await getPrivateChannels({
-              apiKey: huggingfaceApiKey,
+              apiKey,
               renewCache: true,
             })
             setUserChannels(newUserChannels)
@@ -43,36 +40,32 @@ export function UserAccountView() {
           }
         }
       })
-  }, [isLoaded, huggingfaceApiKey, userChannels.map(c => c.id).join(","), setUserChannels, setLoaded])
-
+  }, [isLoaded, apiKey, userChannels.map(c => c.id).join(","), setUserChannels, setLoaded])
+ 
   return (
     <div className={cn(`flex flex-col space-y-4`)}>
-      <h2 className="text-3xl font-bold">Want your own channels? Setup your account!</h2>
-        
-      <div className="flex flex-col space-y-4 max-w-2xl">
-        <div className="flex flex-row space-x-2 items-center">
-          <label className="flex w-64">Hugging Face token:</label>
-          <Input
-            placeholder="Hugging Face token (with WRITE access)"
-            type="password"
-            className="font-mono"
-            onChange={(x) => {
-              setHuggingfaceApiKey(x.target.value)
-            }}
-            value={huggingfaceApiKey}
-          />
-        </div>
-        <p className="text-neutral-100/70">
-          Note: your Hugging Face token must be a <span className="font-bold font-mono text-yellow-300">WRITE</span> access token.
-        </p>
-        {huggingfaceApiKey
-        ? <p className="">Nice, looks like you are ready to go!</p>
-        : <p>Please setup your account (see above) to get started</p>}
-      </div>
 
-      {huggingfaceApiKey ? 
+      {
+      // this is a beta feature, only necessary for users who use Clap files
+      user?.userName.startsWith("jbilcke")
+        ? <div className="flex flex-row space-x-2 items-center">
+        <label className="flex w-64">Save videos to my HF account</label>
+        <Input
+          placeholder="Hugging Face token (with WRITE access)"
+          type="password"
+          className="font-mono"
+          onChange={(x) => {
+            setLongStandingApiKey(x.target.value, false)
+          }}
+          value={longStandingApiKey}
+        />
+      </div> : null}
+
+      {apiKey ? 
       <div className="flex flex-col space-y-4">
-        <h2 className="text-3xl font-bold">Your custom channels:</h2>
+        <h2 className="text-3xl font-bold">@{user?.userName} channels</h2>
+        <p>Don&apos;t see your channel? try to <Button onClick={login}>synchronize</Button> again.</p>
+     
         {userChannels?.length ? <ChannelList
           layout="grid"
           channels={[
@@ -88,9 +81,8 @@ export function UserAccountView() {
             setView("user_channel")
           }}
         />
-        : isLoaded ? <p>You don&apos;t seem to have any channel yet. See @flngr on X to learn more about how to do this!</p> : <p>Loading channels..</p>}
-      </div> : null}
-
+        : isLoaded ? null : <p>Loading channels owned by @{user?.userName}..</p>}
+      </div> : <p>To create a channel, comment or like a video please <Button onClick={login}>Login with Hugging Face</Button>.</p>}
     </div>
   )
 }

src/lib/useHuggingFaceLogin.ts

@@ -1,75 +0,0 @@
-import { useEffect, useState } from "react"
-
-import { oauthHandleRedirectIfPresent, oauthLoginUrl } from "@huggingface/hub"
-
-export function useHuggingFaceLogin(onLogin?: (data: any) => void) {
-  const [isLoggedIn, setLoggedIn] = useState(false)
-  const [oauthResult, setOauthResult] = useState<any>({})
-
-  useEffect(() => {
-    const fn = async () => {
-      const res = await oauthHandleRedirectIfPresent()
-      if (res) {
-        setOauthResult(res)
-        setLoggedIn(true)
-        onLogin?.(res)
-      }
-    }
-    fn()
-  }, [])
-
-  const login = async () => {
-    const oauthUrl = await oauthLoginUrl({
-      /**
-       * OAuth client ID.
-       *
-       * For static Spaces, you can omit this and it will be loaded from the Space config, as long as `hf_oauth: true` is present in the README.md's metadata.
-       * For other Spaces, it is available to the backend in the OAUTH_CLIENT_ID environment variable, as long as `hf_oauth: true` is present in the README.md's metadata.
-       *
-       * You can also create a Developer Application at https://huggingface.co/settings/connected-applications and use its client ID.
-       */
-      clientId: process.env.NEXT_PUBLIC_AI_TUBE_OAUTH_CLIENT_ID,
-
-      // hubUrl?: string;
-
-      /**
-       * OAuth scope, a list of space separate scopes.
-       *
-       * For static Spaces, you can omit this and it will be loaded from the Space config, as long as `hf_oauth: true` is present in the README.md's metadata.
-       * For other Spaces, it is available to the backend in the OAUTH_SCOPES environment variable, as long as `hf_oauth: true` is present in the README.md's metadata.
-       *
-       * Defaults to "openid profile".
-       *
-       * You can also create a Developer Application at https://huggingface.co/settings/connected-applications and use its scopes.
-       *
-       * See https://huggingface.co/docs/hub/oauth for a list of available scopes.
-       */
-      scopes: "openid profile",
-
-      /**
-       * Redirect URI, defaults to the current URL.
-       *
-       * For Spaces, any URL within the Space is allowed.
-       *
-       * For Developer Applications, you can add any URL you want to the list of allowed redirect URIs at https://huggingface.co/settings/connected-applications.
-       */
-      redirectUrl: "https://jbilcke-hf-ai-tube.hf.space",
-
-      /**
-       * State to pass to the OAuth provider, which will be returned in the call to `oauthLogin` after the redirect.
-       */
-      // state: ""
-    })
-
-    console.log("oauthUrl:", oauthUrl)
-    window.location.href = oauthUrl
-  }
-
-  console.log(JSON.stringify(oauthResult, null, 2))
-
-  return {
-    isLoggedIn,
-    login,
-    oauthResult,
-  }
-}

src/types/general.ts

@@ -635,6 +635,7 @@ export type InterfaceView =
 
 export type Settings = {
   huggingfaceApiKey: string
+  huggingfaceTemporaryApiKey: string
 }
 
 export type ParsedDatasetReadme = {