[feature-flag-hypertune] Update @vercel/flags for Hypertune (#880)

### Description

Follow up to #871

Updates `@vercel/flags` for the Hypertune example

edge-middleware/feature-flag-hypertune/README.md

@@ -34,6 +34,8 @@ Deploy this example with Vercel in one click:
 
 You'll be guided through installing the [Hypertune Vercel integration](https://vercel.com/integrations/hypertune) and setting up the required environment variables.
 
+You will also need to provide a `FLAGS_SECRET` environment variable. You can generate one with `node -e "console.log(crypto.randomBytes(32).toString('base64url'))"`.
+
 ### Update your feature flag logic
 
 Once you've deployed your project, open the [Hypertune UI](https://app.hypertune.com/) to update your feature flag logic.

edge-middleware/feature-flag-hypertune/app/.well-known/vercel/flags/route.ts

@@ -1,9 +1,10 @@
-import { NextResponse } from 'next/server'
-import { encryptApiData } from '@vercel/flags'
-import { vercelFlagDefinitions } from '../../../../generated/generated'
+import { type NextRequest, NextResponse } from 'next/server';
+import { verifyAccess, type ApiData } from '@vercel/flags';
+import { vercelFlagDefinitions } from '../../../../generated/generated';
 
-export async function GET() {
-  const apiData = { definitions: vercelFlagDefinitions }
-  const encryptedApiData = await encryptApiData(apiData)
-  return NextResponse.json(encryptedApiData)
+export async function GET(request: NextRequest) {
+  const access = await verifyAccess(request.headers.get('Authorization'));
+  if (!access) return NextResponse.json(null, { status: 401 });
+
+  return NextResponse.json<ApiData>({ definitions: vercelFlagDefinitions });
 }

edge-middleware/feature-flag-hypertune/lib/VercelFlagValues.tsx

@@ -1,4 +1,4 @@
-import { encryptValues } from '@vercel/flags'
+import { encrypt } from '@vercel/flags'
 import { FlagValues } from '@vercel/flags/react'
 import { Root } from '../generated/generated'
 
@@ -12,6 +12,6 @@ export default async function VercelFlagValues({
       ([flagKey, flagValue]) => !flagKey.startsWith('__'),
     ),
   )
-  const encryptedFlagValues = await encryptValues(filteredFlagValues)
+  const encryptedFlagValues = await encrypt(filteredFlagValues)
   return <FlagValues values={encryptedFlagValues} />
 }

edge-middleware/feature-flag-hypertune/lib/getVercelFlagOverrides.ts

@@ -1,11 +1,11 @@
-import { decryptOverrides } from '@vercel/flags'
+import { type FlagOverridesType, decrypt } from '@vercel/flags'
 import { cookies } from 'next/headers'
 import { Root } from '../generated/generated'
 
 export default async function getVercelFlagOverrides(): Promise<Root | null> {
   const overridesCookieValue = cookies().get('vercel-flag-overrides')?.value
   const overrides = overridesCookieValue
-    ? ((await decryptOverrides(overridesCookieValue)) as Root)
+    ? ((await decrypt<FlagOverridesType>(overridesCookieValue)) as Root)
     : null
 
   return overrides

edge-middleware/feature-flag-hypertune/package.json

@@ -13,7 +13,7 @@
   "dependencies": {
     "@vercel/edge-config": "^0.2.1",
     "@vercel/examples-ui": "^2.0.3",
-    "@vercel/flags": "^1.0.0",
+    "@vercel/flags": "^2.2.1",
     "@vercel/toolbar": "^0.1.11",
     "autoprefixer": "^10.4.15",
     "eslint-config-next": "^13.4.19",
@@ -33,4 +33,4 @@
     "prettier": "^3.0.2",
     "tailwindcss": "^3.3.3"
   }
-}
+}