feat: allow for login user

components/sign-in-modal.tsx

@@ -12,6 +12,7 @@ import Modal from "~/components/shared/modal";
 import Image from "next/image";
 import { BASE_DOMAIN, LOGIN_LIMIT_COUNT } from "~/utils/constants";
 import Link from "next/link";
+import { isDev } from "~/utils/env";
 
 const SignInModal = ({
   showSignInModal,
@@ -42,6 +43,7 @@ const SignInModal = ({
         <div className="flex flex-col space-y-4 bg-gray-50 px-4 py-8 md:px-16">
           <Auth
             supabaseClient={supabaseClient}
+            // redirectTo={isDev ? window?.location?.origin : BASE_DOMAIN}
             localization={{
               variables: {
                 sign_up: {

hooks/use-toast.ts

@@ -138,7 +138,7 @@ function dispatch(action: Action) {
 interface Toast extends Omit<ToasterToast, "id"> {}
 
 function toast({ ...props }: Toast) {
-  console.log('========toast props========', props)
+  // console.log('========toast props========', props)
   const id = genId()
 
   const update = (props: ToasterToast) =>

hooks/useSummarize.ts

@@ -42,8 +42,21 @@ export function useSummarize() {
             title: `网站访问量过大`,
             description: `每日限额使用 ${RATE_LIMIT_COUNT} 次哦！`,
           });
+        } else if (response.status === 401) {
+          toast({
+            variant: "destructive",
+            title: `${response.statusText} 请登录哦！`,
+            // ReadableStream can't get error message
+            // description: response.body
+            description: "每天的免费次数已经用完啦，🆓",
+          });
         } else {
-          toast({ variant: "destructive", title: response.statusText });
+          toast({
+            variant: "destructive",
+            title: response.statusText,
+            // ReadableStream can't get error message
+            // description: response.body
+          });
         }
         setLoading(false);
         return;

lib/openai/OpenAIResult.ts

@@ -1,5 +1,10 @@
-import { createParser, ParsedEvent, ReconnectInterval } from "eventsource-parser";
+import {
+  createParser,
+  ParsedEvent,
+  ReconnectInterval,
+} from "eventsource-parser";
 import { formatResult } from "~/lib/openai/formatResult";
+import { isDev } from "~/utils/env";
 
 // TODO: maybe chat with video?
 export type ChatGPTAgent = "user" | "system" | "assistant";
@@ -28,6 +33,7 @@ export async function OpenAIResult(
   const encoder = new TextEncoder();
   const decoder = new TextDecoder();
 
+  isDev && console.log({ apiKey });
   const res = await fetch("https://api.openai.com/v1/chat/completions", {
     headers: {
       "Content-Type": "application/json",

middleware.ts

@@ -1,3 +1,4 @@
+import { createMiddlewareSupabaseClient } from "@supabase/auth-helpers-nextjs";
 import { Redis } from "@upstash/redis";
 import type { NextFetchEvent, NextRequest } from "next/server";
 import { NextResponse } from "next/server";
@@ -11,6 +12,16 @@ const redis = Redis.fromEnv();
 export async function middleware(req: NextRequest, context: NextFetchEvent) {
   const { apiKey, bvId } = await req.json();
 
+  function redirectAuth() {
+    // return NextResponse.redirect(new URL("/shop", req.url));
+    // Respond with JSON indicating an error message
+    console.error("Authentication Failed");
+    return new NextResponse(
+      JSON.stringify({ success: false, message: "Authentication Failed" }),
+      { status: 401, headers: { "content-type": "application/json" } }
+    );
+  }
+
   // licenseKeys
   if (apiKey) {
     if (checkOpenaiApiKeys(apiKey)) {
@@ -19,15 +30,44 @@ export async function middleware(req: NextRequest, context: NextFetchEvent) {
 
     // 3. something-invalid-sdalkjfasncs-key
     if (!(await validateLicenseKey(apiKey, bvId))) {
-      return NextResponse.redirect(new URL("/shop", req.url));
+      return redirectAuth();
     }
   }
-  // TODO: unique to a user (userid, email etc) instead of IP
-  const identifier = req.ip ?? "127.0.0.7";
-  const { success, remaining } = await ratelimit.limit(identifier);
-  console.log(`======== ip ${identifier}, remaining: ${remaining} ========`);
-  if (!apiKey && !success) {
-    return NextResponse.redirect(new URL("/shop", req.url));
+
+  if (!apiKey) {
+    const identifier = req.ip ?? "127.0.0.7";
+    const { success, remaining } = await ratelimit.limit(identifier);
+    console.log(`======== ip ${identifier}, remaining: ${remaining} ========`);
+    if (!success) {
+      // We need to create a response and hand it to the supabase client to be able to modify the response headers.
+      const res = NextResponse.next();
+      // TODO: unique to a user (userid, email etc) instead of IP
+      // Create authenticated Supabase Client.
+      const supabase = createMiddlewareSupabaseClient({ req, res });
+      // Check if we have a session
+      const {
+        data: { session },
+      } = await supabase.auth.getSession();
+      // Check auth condition
+      const userEmail = session?.user.email;
+      if (userEmail) {
+        // Authentication successful, forward request to protected route.
+        const { success, remaining } = await ratelimit.limit(userEmail + "2");
+        console.log(
+          `======== user ${userEmail}, remaining: ${remaining} ========`
+        );
+        if (!success) {
+          return redirectAuth();
+        }
+
+        return res;
+      }
+
+      // todo: throw error to trigger a modal, rather than redirect a page
+      return redirectAuth();
+    }
+
+    return redirectAuth();
   }
 
   const result = await redis.get<string>(bvId);

pages/[...slug].tsx

@@ -25,7 +25,8 @@ export const Home: NextPage = () => {
   const licenseKey = searchParams.get("license_key");
   const [curVideo, setCurVideo] = useState<string>("");
   const [currentBvId, setCurrentBvId] = useState<string>("");
-  const [userKey, setUserKey] = useLocalStorage<string>("user-openai-apikey");
+  const [userKey, setUserKey, remove] =
+    useLocalStorage<string>("user-openai-apikey");
   const { loading, summary, resetSummary, summarize } = useSummarize();
   const { toast } = useToast();
 
@@ -120,6 +121,13 @@ export const Home: NextPage = () => {
     toast({ description: "复制成功 ✂️" });
   };
 
+  const handleApiKeyChange = (e: any) => {
+    if (!e.target.value) {
+      remove();
+    }
+    setUserKey(e.target.value);
+  };
+
   return (
     <div className="mt-10 w-full sm:mt-40">
       <a
@@ -221,7 +229,7 @@ export const Home: NextPage = () => {
         <div className="text-lg text-slate-700 dark:text-slate-400">
           <input
             value={userKey}
-            onChange={(e) => setUserKey(e.target.value)}
+            onChange={handleApiKeyChange}
             className="mx-auto my-4 w-full appearance-none rounded-lg rounded-md border bg-transparent py-2 pl-2 text-sm leading-6 text-slate-900 shadow-sm ring-1 ring-slate-200 placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500"
             placeholder={
               "填你的 OpenAI API Key: sk-xxxxxx 或者购买的 License Key: xxx-CCDE-xxx"

utils/extractTimestamp.ts

@@ -25,6 +25,6 @@ export function extractTimestamp(matchResult: RegExpMatchArray) {
   }catch(e){
     console.log('handle text after time error', e);
   }
-  console.log("========matchResult========", {matchResult, timestamp, formattedContent});
+  // console.log("========matchResult========", {matchResult, timestamp, formattedContent});
   return { timestamp, formattedContent };
 }