The .env file
Setting up your environment variables to use within your application.
Now that we have all the required setup, it is time to really open the code editor.
Setup environment variables
Before we can see if the setup was correctly, we must add our environment variables. Remember the information we had to store earlier? This is the moment we will start using it!
Rename file
To be able to share the content with you, I had to create a different file called example.env.local. Rename this file
From
example.env.local
To
.env.local
After this, you will not be able to download your .env.local file on another computer as this will be stored locally only.
Never publish your environment variables online. You will risk losing access to your accounts, your API's or lose a lot of money by having your information stolen.
Add your stored variables
In Supabase and in Lemon Squeezy we have stored our variables. We will now be implementing these variables, to be able to connect to both Supabase and Lemon Squeezy!
*** Supabase Setup ***
NEXT_PUBLIC_SUPABASE_URL=<Add your Supabase URL>
NEXT_PUBLIC_SUPABASE_ANON_KEY=<Add your Supabase Anon key>
SUPABASE_SERVICE_KEY=<Add your Supabase Service Key>
-----
*** Lemon Squeezy Setup ***
LEMON_SQUEEZY_API_KEY=<Add your Lemon Squeezy API Key>
LEMON_SQUEEZY_WEBHOOK_SECRET=<Add your Webhook secret>
PRODUCT_ID=<Add your product id>
STORE_ID=<Add your store name> --- Just the store name in the url,
not the part that includes lemonsqueezy
Where do I find the information?
If you are unsure where to find your information, please see below.
Supabase
In your Supabase project, navigate to Dashboard > All projects > Project for the template > Project settings > API If you know your project information, you can also navigate to the following URL:
https://supabase.com/dashboard/project/<PROJECT_ID>/settings/api
- URL
- Anon Key
- Service Key
Lemon Squeezy
For Lemon Squeezy, we will need to navigate to three different area's.
If you lost your API key, you will need to create a new one. It is advised to delete the old one as well!
- API Key
- Navigate to API
- Click on the plus (+) icons
- Enter API name
- Copy the code
- Webhook Secret
- Navigate to Webhooks
- On the webhook URL, click the three dots
- Copy the Webhook secret
- Product id
- Navigate to Products
- For the product you want the ID, click the three dots
- Select 'Copy ID'