search

stepzen-dev / stepzen-nuxt

2 stars 7 forks source link

Create a serverless function to protect StepZen keys from exposure on the client #2

Closed ajcwebdev closed 2 years ago

ajcwebdev commented 3 years ago

See How to Secure API Routes for Jamstack Sites.

codiini commented 3 years ago

Hi, I'd like to take this but I'm not so sure where to start

ajcwebdev commented 3 years ago

Sure, there's a couple pieces to this. Feel free to break this up into multiple PR's.

Create Netlify Function

First you will need to figure out how to create a serverless function. There are many ways to do this but I'd recommend starting with just creating a serverless function on Netlify Functions that returns hello world. I outlined instructions for doing this in Nuxt 3 here. You can also find more examples in the Netlify docs.

Access Environment Variables and Perform Fetch Request

After that you will need to have the ability to share environment variables with the function. Normally this would be done with a library like dotenv, but I believe Netlify will automatically give your function access to environment variables, so you may not need to do that. Once you have access to your environment variables you can perform the fetch request within the serverless function.

Modify Frontend to Fetch Data from New Serverless Function

Finally, you'll need to change the API request on the frontend to fetch from the new serverless endpoint that has been created instead of directly from the StepZen endpoint.