Back to Templates

Next.js Example with Temporary API Keys

A simple Next.js app using Unkey to generate and verify API keys that expire after 60 seconds.

Written by ethan-stone
Framework
Next.js
Language
Typescript

This example is a Next.js project bootstrapped with

. The example has a single page at the root to generate api keys that expire in one minute and an api route at
/api/forecast
to retrieve a fake 7 day weather forecast.

Environment Variables

The examples only requires two environment variables.

  • UNKEY_ROOT_KEY
    - One can be created at here.
  • UNKEY_API_ID
    - One can be created at here. After selecting the api the id can be found in the top right.

Configure these environments variables in a

.env
file.

Walkthrough

First, run the development server:

npm run dev # or yarn dev # or pnpm dev # or bun dev

Then navigate to http://localhost:3000 to generate an api key. The key will expire in one minute. The key will appear underneath the

Create Key
button.

Then using your favorite http client make a GET request to http://localhost:3000/api/forecast with the Authorization header set to

Bearer <NEW_API_KEY>
. Continue making requests. After a minute you should see a 401 response due to the key expiring.

Code

The code for creating apis keys is in

src/server/unkey-client.ts
. There is a function called
createApiKey
that accepts a name and expiration time in milliseconds. It uses the unkey client to create a new key and returns the key.

The verification happens in the route handler at

/app/api/forecast/route.ts
. It simple checks for the Authorization header and checks if the key is valid using
verifyKey
. All the logic of checking the expiration time is handled by unkey.

Protect your API.
Start today.

2500 verifications FREE per month.

No CC required.