Merge pull request #13 from unkeyed/unkey-clerk-v2

working with v2 api

Author: chronark

.gitignore

@@ -1,2 +1,4 @@
 **/node_modules
 .vercel
+.env
+.next/

unkey-clerk/.env.example

@@ -0,0 +1,4 @@
+NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_xxxxxxxxxxxxxx
+CLERK_SECRET_KEY=sk_test_xxxxxxxxxxxxxx
+UNKEY_API_ID=api_xxxxxxxxxxxxxx
+UNKEY_ROOT_KEY=unkey_xxxxxxxxxxxxxx

unkey-clerk/README.md

@@ -1,5 +1,7 @@
 # Unkey with Clerk
 
+This example demonstrates how to use Unkey v2 API with Clerk authentication.
+
 ## Getting Started
 
 First, make sure you have a Clerk and Unkey account, and add them to the `.env` you can see an example in the `.env.example`.
@@ -13,7 +15,7 @@ UNKEY_ROOT_KEY=unkey_xxxxxxxxxxxxxx
 
 Then you can run the server locally
 ```bash
-npm run dev
+pnpm run dev
 ```
 
 Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
@@ -22,3 +24,4 @@ Open [http://localhost:3000](http://localhost:3000) with your browser to see the
 
 - [Blog Post](https://unkey.dev/blog/using-unkey-with-auth) - learn about how this project works
 - [Getting Started](https://unkey.dev/docs/quickstart) - A quickstart guide to Unkey
+- [Unkey v2 API Documentation](https://unkey.dev/docs) - Documentation for the v2 API

unkey-clerk/app/api/secret/route.ts

@@ -1,23 +1,30 @@
-import { verifyKey } from "@unkey/api";
+import { Unkey } from "@unkey/api";
 import { NextResponse } from "next/server";
+
 export async function GET(request: Request) {
   const header = request.headers.get("Authorization");
   if (!header) {
     return new Response("No Authorization header", { status: 401 });
   }
   const token = header.replace("Bearer ", "");
-  const { result, error } = await verifyKey(token);
+  
+  const unkey = new Unkey({ rootKey: process.env.UNKEY_ROOT_KEY! });
+  
+  try {
+    const response = await unkey.keys.verifyKey({
+      key: token,
+    });
 
-  if (error) {
-    console.error(error.message);
-    return new Response("Internal Server Error", { status: 500 });
-  }
+    // In v2, the response structure is different
+    if (!response.data.valid) {
+      // do not grant access
+      return new Response("Unauthorized", { status: 401 });
+    }
 
-  if (!result.valid) {
-    // do not grant access
-    return new Response("Unauthorized", { status: 401 });
+    // process request
+    return NextResponse.json({ result: response });
+  } catch (error) {
+    console.error(error);
+    return new Response("Internal Server Error", { status: 500 });
   }
-
-  // process request
-  return NextResponse.json({ result });
 }

unkey-clerk/app/keys/client.tsx

@@ -17,10 +17,12 @@ import { create } from "./create";
 const UnkeyElements = () => {
   const [key, setKey] = useState<string>("");
   const [secret, setSecret] = useState<string>("");
+  const [meta, setMeta] = useState<any>(null);
+  const [data, setData] = useState<any>(null);
   async function onCreate(formData: FormData) {
     const res = await create(formData);
-    if (res) {
-      setKey(res.key?.key ?? "");
+    if (res && res.data) {
+      setKey(res.data.key ?? "");
     }
   }
   const getData = async () => {
@@ -30,7 +32,9 @@ const UnkeyElements = () => {
       },
     });
     const data = await res.json();
-    setSecret(data.result);
+    setSecret(data.result.data.keyId);
+    setMeta(data.result.meta);
+    setData(data.result.data);
   };
   return (
     <div className="mt-8">
@@ -44,7 +48,7 @@ const UnkeyElements = () => {
             <div className="grid items-center w-full gap-4">
               <div className="flex flex-col space-y-1.5">
                 <Label htmlFor="name">API Key Name</Label>
-                <Input name="name" placeholder="My Awesome API " />
+                <Input name="name" placeholder="My Awesome API" />
               </div>
             </div>
           </CardContent>
@@ -79,11 +83,17 @@ const UnkeyElements = () => {
                 Get Data
               </Button>
               <div className="grid items-center w-full gap-4">
-                <div className="flex flex-col space-y-1.5">
+                <div className="flex flex-col space-y-1.5 py-2">
                   <Label htmlFor="name">Secret Data</Label>
                   <Input name="name" value={JSON.stringify(secret)} />
                 </div>
               </div>
+              <div className="mt-4 border p-4 rounded-md bg-muted">
+                <Label htmlFor="name">Meta Data</Label>
+                <pre className="text-xs">{JSON.stringify(meta, null, 2)}</pre>
+                <Label htmlFor="name">Key Data</Label>
+                <pre className="text-xs">{JSON.stringify(data, null, 2)}</pre>
+              </div>
             </CardContent>
           </Card>
         </>

unkey-clerk/app/keys/create.ts

@@ -14,12 +14,14 @@ export async function create(formData: FormData) {
     return null;
   }
 
-  const name = (formData.get("name") as string) ?? "My Awesome API";
-  const unkey = new Unkey({ token });
-  const key = await unkey.keys.create({
-    name: name,
-    ownerId: userId,
+  const name = formData.get("name") as string;
+  // Ensure name is never empty - use default if empty or null
+  const keyName = name && name.trim().length > 0 ? name.trim() : "My Awesome API";
+  
+  const unkey = new Unkey({ rootKey: token });
+  const res = await unkey.keys.createKey({
+    name: keyName,
     apiId,
   });
-  return { key: key.result };
+  return { data: res.data, meta: res.meta };
 }

unkey-clerk/package.json

@@ -16,7 +16,7 @@
     "@types/node": "20.8.5",
     "@types/react": "18.2.28",
     "@types/react-dom": "18.2.13",
-    "@unkey/api": "^0.22.1",
+    "@unkey/api": "^2.0.1",
     "autoprefixer": "10.4.16",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",