Generate a Custom API Key to Secure an API Route in Next.js

Jon Meyers
InstructorJon Meyers

Share this video with your friends

Send Tweet
Published 3 months ago
Updated 2 weeks ago

Currently, our API route can be used by anyone navigating to its endpoint. To ensure that this function can only be executed by our application, we need to create a special secret value.

In this video, we generate a special key to secure our API route. This value must be provided as a query parameter on the request to our endpoint, or an error response will be sent back.

To confirm this is working correctly, we use the Thunder Client extension. When the API_ROUTE_SECRET is not provided we receive a 401 response. When the correct value is attached our serverless function executes, creating a stripe customer and updating our profile table in Supabase.

Instructor: [0:00] Currently, our API route is entirely open to the public. Someone could just sit here, sending this request to this URL over and over and over again and creating a whole bunch of customers in Stripe. Let's generate our own API key to ensure that the person making a request to this API route is indeed us and not just some stranger.

[0:15] I'm going to quit my development server and then run this snippet from the Auth0 docs to create a random string using the crypto library. Now, I'm going to copy this value and create a new environment variable, and I'm going to call this API_ROUTE_SECRET. We can start our development server again.

[0:33] Now, back in our serverless function, before we do any processing, we can check whether the user has passed us a query parameter for that API_ROUTE_SECRET. If it's not equal to our process.env.API_ROUTE_SECRET, then we want to return a response saying the status is 401 and say that this person is not authorized to call the API.

[0:54] Now, if we try to send this request again, we get a 401, saying that we are not authorized to call this API. If we attach a query parameter for API_ROUTE_SECRET and set it to our value, we can send this request again, and it successfully creates our Stripe customer for us.

~ a month ago

Quick question - I am able to "auth" in gihub, like you show - but the session/user is NOT being logged into the profile table. Always empty. Maybe know why?

Jon Meyers
Jon Meyersinstructor
~ a month ago

Very strange! This may be related to an issue someone asked about on the triggers lesson. Can you try deleting the postgres function from the "Use Postgres Functions to Implement Database Logic with Supabase" lesson and stepping through its creation again with the video - you may need to also delete the trigger that calls this function. Make sure you set the "Type of security" to "Security Definer". Failing this you could try doing it with pure SQL - similar to this solution:

Lastly, if it is still being weird, can you send me your project ref (part of your Supabase URL) and I can look into it 👍