working on the Hugging Face Sign-In

.env

@@ -23,6 +23,11 @@ NEXT_PUBLIC_CAN_REDRAW="false"
 # Set to "true" to create artificial delays and smooth out traffic
 NEXT_PUBLIC_ENABLE_RATE_LIMITER="false"
 
+# ------------- HUGGING FACE OAUTH -------------
+NEXT_PUBLIC_ENABLE_HUGGING_FACE_OAUTH="false"
+NEXT_PUBLIC_HUGGING_FACE_OAUTH_CLIENT_ID=""
+HUGGING_FACE_OAUTH_SECRET=""
+
 # ------------- PROVIDER AUTH ------------
 # You only need to configure the access token(s) for the provider(s) you want to use
 

package-lock.json

@@ -8,6 +8,7 @@
       "name": "@jbilcke/comic-factory",
       "version": "0.0.0",
       "dependencies": {
+        "@huggingface/hub": "^0.14.2",
         "@huggingface/inference": "^2.6.1",
         "@radix-ui/react-accordion": "^1.1.2",
         "@radix-ui/react-avatar": "^1.0.3",
@@ -208,6 +209,17 @@
       "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.1.tgz",
       "integrity": "sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q=="
     },
+    "node_modules/@huggingface/hub": {
+      "version": "0.14.2",
+      "resolved": "https://registry.npmjs.org/@huggingface/hub/-/hub-0.14.2.tgz",
+      "integrity": "sha512-OwOzr/p92ToK0ATdyVEqfecoAO0Ab037Up4V3IHbJLpS3KjI4p1kkjSXJ+bml0Ngq+n0094poxIRYoK+pv1b+w==",
+      "dependencies": {
+        "hash-wasm": "^4.9.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/@huggingface/inference": {
       "version": "2.6.4",
       "resolved": "https://registry.npmjs.org/@huggingface/inference/-/inference-2.6.4.tgz",
@@ -4217,6 +4229,11 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/hash-wasm": {
+      "version": "4.11.0",
+      "resolved": "https://registry.npmjs.org/hash-wasm/-/hash-wasm-4.11.0.tgz",
+      "integrity": "sha512-HVusNXlVqHe0fzIzdQOGolnFN6mX/fqcrSAOcTBXdvzrXVHwTz11vXeKRmkR5gTuwVpvHZEIyKoePDvuAR+XwQ=="
+    },
     "node_modules/hasown": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.1.tgz",

package.json

@@ -9,6 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@huggingface/hub": "^0.14.2",
     "@huggingface/inference": "^2.6.1",
     "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-avatar": "^1.0.3",

src/app/interface/bottom-bar/index.tsx

@@ -8,6 +8,7 @@ import { sleep } from "@/lib/sleep"
 import { AIClipFactory } from "../ai-clip-factory"
 import { Share } from "../share"
 import { SettingsDialog } from "../settings-dialog"
+import { Login } from "../login"
 
 export function BottomBar() {
   const download = useStore(state => state.download)
@@ -79,6 +80,7 @@ export function BottomBar() {
         `scale-[0.9]`
       )}>
         <About />
+        <Login />
        {/* 
        Thank you clip factory for your service 🫡
        <AIClipFactory />

src/app/interface/login/index.tsx

@@ -0,0 +1,30 @@
+"use client"
+
+import { useEffect } from "react"
+
+import { Button } from "@/components/ui/button"
+import { useOAuth } from "@/lib/useOAuth"
+
+export function Login() {
+  const { canLogin, login, isLoggedIn, oauthResult } = useOAuth({ debug: true })
+  
+  useEffect(() => {
+    if (!oauthResult) {
+      return
+    }
+
+    const { userInfo } = oauthResult
+
+    // TODO use the Inference API
+
+    if (userInfo.isPro) {
+      // TODO we could do something with the fact the user is PRO versus other types of users
+    }
+  }, [canLogin, isLoggedIn, oauthResult])
+
+  if (isLoggedIn || canLogin) {
+   return <Button onClick={login}>Sign-in with Hugging Face</Button>
+  } else {
+    return null
+  }
+}

src/app/interface/settings-dialog/defaultSettings.ts

@@ -3,6 +3,7 @@ import { RenderingModelVendor, Settings } from "@/types"
 export const defaultSettings: Settings = {
   renderingModelVendor: "SERVER" as RenderingModelVendor,
   renderingUseTurbo: false,
+  huggingFaceOAuth: "",
   huggingfaceApiKey: "",
   huggingfaceInferenceApiModel: "stabilityai/stable-diffusion-xl-base-1.0",
   huggingfaceInferenceApiModelTrigger: "",

src/app/interface/settings-dialog/getSettings.ts

@@ -10,6 +10,7 @@ export function getSettings(): Settings {
     return {
       renderingModelVendor: getValidString(localStorage?.getItem?.(localStorageKeys.renderingModelVendor), defaultSettings.renderingModelVendor) as RenderingModelVendor,
       renderingUseTurbo: getValidBoolean(localStorage?.getItem?.(localStorageKeys.renderingUseTurbo), defaultSettings.renderingUseTurbo),
+      huggingFaceOAuth: getValidString(localStorage?.getItem?.(localStorageKeys.huggingFaceOAuth), defaultSettings.huggingFaceOAuth),
       huggingfaceApiKey: getValidString(localStorage?.getItem?.(localStorageKeys.huggingfaceApiKey), defaultSettings.huggingfaceApiKey),
       huggingfaceInferenceApiModel: getValidString(localStorage?.getItem?.(localStorageKeys.huggingfaceInferenceApiModel), defaultSettings.huggingfaceInferenceApiModel),
       huggingfaceInferenceApiModelTrigger: getValidString(localStorage?.getItem?.(localStorageKeys.huggingfaceInferenceApiModelTrigger), defaultSettings.huggingfaceInferenceApiModelTrigger),

src/app/interface/settings-dialog/localStorageKeys.ts

@@ -3,6 +3,7 @@ import { Settings } from "@/types"
 export const localStorageKeys: Record<keyof Settings, string> = {
   renderingModelVendor: "CONF_RENDERING_MODEL_VENDOR",
   renderingUseTurbo: "CONF_RENDERING_USE_TURBO",
+  huggingFaceOAuth: "CONF_AUTH_HF_OAUTH",
   huggingfaceApiKey: "CONF_AUTH_HF_API_TOKEN",
   huggingfaceInferenceApiModel: "CONF_RENDERING_HF_INFERENCE_API_BASE_MODEL",
   huggingfaceInferenceApiModelTrigger: "CONF_RENDERING_HF_INFERENCE_API_BASE_MODEL_TRIGGER",

src/lib/getValidOAuth.ts

@@ -0,0 +1,30 @@
+import { OAuthResult } from "@huggingface/hub"
+
+// return a valid OAuthResult, or else undefined
+export function getValidOAuth(rawInput?: any): OAuthResult | undefined {
+  try {
+    let untypedOAuthResult: any
+    try {
+      untypedOAuthResult = JSON.parse(rawInput)
+      if (!untypedOAuthResult) { throw new Error("no valid serialized oauth result") }
+    } catch (err) {
+      untypedOAuthResult = rawInput
+    }
+
+    const maybeValidOAuth = untypedOAuthResult as OAuthResult
+
+    const accessTokenExpiresAt = new Date(maybeValidOAuth.accessTokenExpiresAt)
+
+    // Get the current date
+    const currentDate = new Date()
+
+    if (accessTokenExpiresAt.getTime() < currentDate.getTime()) {
+      throw new Error("the serialized oauth result has expired")
+    }
+
+    return maybeValidOAuth
+  } catch (err) {
+    // console.error(err)
+    return undefined
+  }
+}

src/lib/useBetaEnabled.ts

@@ -0,0 +1,9 @@
+"use client"
+
+import { useSearchParams } from "next/navigation"
+
+export function useBetaEnabled(): boolean {
+  const searchParams = useSearchParams()
+  const isBetaEnabled = searchParams.get("beta") === "true"
+  return isBetaEnabled
+}

src/lib/useOAuth.ts

@@ -0,0 +1,116 @@
+"use client"
+
+import { OAuthResult, oauthHandleRedirectIfPresent, oauthLoginUrl } from "@huggingface/hub"
+import { useSearchParams } from "next/navigation"
+import { useEffect, useState } from "react"
+import { useOAuthClientId } from "./useOAuthClientId"
+import { useOAuthEnabled } from "./useOAuthEnabled"
+import { useBetaEnabled } from "./useBetaEnabled"
+import { usePersistedOAuth } from "./usePersistedOAuth"
+import { getValidOAuth } from "./getValidOAuth"
+
+export function useOAuth({
+  debug = false
+}: {
+  debug?: boolean
+} = {
+  debug: false
+}): {
+  clientId: string
+  redirectUrl: string
+  scopes: string
+  canLogin: boolean
+  login: () => Promise<void>
+  isLoggedIn: boolean
+  oauthResult?: OAuthResult
+ } {
+  const [oauthResult, setOAuthResult] = usePersistedOAuth()
+
+  const clientId = useOAuthClientId()
+  const redirectUrl = "http://localhost:3000"
+  const scopes = "openid profile inference-api"
+
+  const isOAuthEnabled = useOAuthEnabled()
+  const isBetaEnabled = useBetaEnabled()
+
+  const searchParams = useSearchParams()
+  const code = searchParams.get("code")
+  const state = searchParams.get("state")
+
+  const hasReceivedFreshOAuth = Boolean(code && state)
+
+  const canLogin: boolean = Boolean(clientId && isOAuthEnabled && isBetaEnabled)
+  const isLoggedIn = Boolean(oauthResult)
+
+  if (debug) {
+    console.log("useOAuth debug:", {
+      oauthResult,
+      clientId,
+      redirectUrl,
+      scopes,
+      isOAuthEnabled,
+      isBetaEnabled,
+      code,
+      state,
+      hasReceivedFreshOAuth,
+      canLogin,
+      isLoggedIn,
+    })
+  }
+
+  useEffect(() => {
+    // no need to perfor the rest if the operation is there is nothing in the url
+    if (hasReceivedFreshOAuth) {
+      (async () => {
+        const maybeValidOAuth = await oauthHandleRedirectIfPresent()
+
+        const newOAuth = getValidOAuth(maybeValidOAuth)
+
+        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")
+          }
+        } else {
+          if (debug) {
+            console.log("useOAuth::useEffect 1: correctly received the new oauth result, saving it to local storage:", newOAuth)
+          }
+          setOAuthResult(newOAuth)
+        }
+      })()
+    }
+  }, [debug, hasReceivedFreshOAuth])
+
+  // for debugging purpose
+  useEffect(() => {
+    if (!debug) {
+      return
+    }
+    console.log(`useOAuth::useEffect 2: canLogin? ${canLogin}`)
+    if (!canLogin) {
+      return
+    }
+    console.log(`useOAuth::useEffect2: isLoggedIn? ${isLoggedIn}`)
+    if (!isLoggedIn) {
+      return
+    }
+    console.log(`useOAuth::useEffect 2: oauthResult:`, oauthResult)
+  }, [debug, canLogin, isLoggedIn, oauthResult])
+
+  const login = async () => {
+    window.location.href = await oauthLoginUrl({
+      clientId,
+      redirectUrl,
+      scopes,
+    })
+  }
+
+  return {
+    clientId,
+    redirectUrl,
+    scopes,
+    canLogin,
+    login,
+    isLoggedIn,
+    oauthResult
+  }
+}

src/lib/useOAuthClientId.ts

@@ -0,0 +1,6 @@
+"use client"
+
+export function useOAuthClientId(): string {
+  const oauthClientId = `${process.env.NEXT_PUBLIC_HUGGING_FACE_OAUTH_CLIENT_ID || ""}`
+  return oauthClientId
+}

src/lib/useOAuthEnabled.ts

@@ -0,0 +1,6 @@
+"use client"
+
+export function useOAuthEnabled(): boolean {
+  const isOAuthEnabled = `${process.env.NEXT_PUBLIC_ENABLE_HUGGING_FACE_OAUTH || "false"}` === "true"
+  return isOAuthEnabled
+}

src/lib/usePersistedOAuth.ts

@@ -0,0 +1,23 @@
+"use client"
+
+import { useLocalStorage } from "usehooks-ts"
+import { OAuthResult } from "@huggingface/hub"
+
+import { defaultSettings } from "@/app/interface/settings-dialog/defaultSettings"
+import { localStorageKeys } from "@/app/interface/settings-dialog/localStorageKeys"
+import { getValidOAuth } from "./getValidOAuth"
+
+export function usePersistedOAuth(): [OAuthResult | undefined, (oauthResult: OAuthResult) => void] {
+  const [serializedHuggingFaceOAuth, setSerializedHuggingFaceOAuth] = useLocalStorage<string>(
+    localStorageKeys.huggingFaceOAuth,
+    defaultSettings.huggingFaceOAuth
+  )
+
+  const oauthResult = getValidOAuth(serializedHuggingFaceOAuth)
+
+  const setOAuthResult = (oauthResult: OAuthResult) => {
+    setSerializedHuggingFaceOAuth(JSON.stringify(oauthResult))
+  }
+
+  return [oauthResult, setOAuthResult]
+}

src/types.ts

@@ -157,6 +157,7 @@ export type LayoutProps = {
 export type Settings = {
   renderingModelVendor: RenderingModelVendor
   renderingUseTurbo: boolean
+  huggingFaceOAuth: string
   huggingfaceApiKey: string
   huggingfaceInferenceApiModel: string
   huggingfaceInferenceApiModelTrigger: string