Back to Templates

Next.js Example with Temporary API Keys

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

Written by
ethan-stone
Framework
Next.js
Language
Typescript
A simple Next.js app using Thinkroman to generate and verify API keys that expire after 60 seconds.

This example is a Next.js project bootstrapped with create-next-app. 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:

1npm run dev
2# or
3yarn dev
4# or
5pnpm dev
6# or
7bun 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.

Elevate your career with ThinkRoman USA

Stay ahead, stay informed, and stay connected with ThinkRoman USA!