[docs] first update to the docs

Author: Amiralizim

docs/README.md

@@ -1,7 +1,7 @@
 ---
 sidebar_position: 1
 ---
-# Getting Started 1
+# Getting Started
 
 To get started, choose which frontend you need and go from there:
 

docs/asset/image-1.png

@@ -0,0 +1,35 @@
+---
+sidebar_position: 6
+---
+# Email (Loops)
+
+## Setup
+
+1. Buy a domain, I recommend [Cloudflare](https://developers.cloudflare.com/registrar/get-started/register-domain/)
+2. Create a loops account and follow these [instructions](https://postmarkapp.com/support/article/1002-getting-started-with-postmark)
+3. On [loops](https://loops.so/docs/smtp/supabase) go to settings under integrations and choose supabase: 
+![alt text](asset/image.png)
+4. Then when you come back to the loops page select Setup SMTP
+5. This should automatically setup your authentication service, you should be able to go to Supabase > Authentication > Email > SMTP Settings.
+6. You need to setup your domain settings before being able to send emails through loops, navigate to [https://app.loops.so/sending-domain](https://app.loops.so/sending-domain) add the required records in your DNS settings of your personal domain. 
+7. Now its time for creating a template, navigate to [https://app.loops.so/templates](https://app.loops.so/templates) and select the account verification template.
+8. Design the template to match your website’s branding.
+9. After your design is done you can press publish. Note that you have to setup your domain before this stage, if you don’t the Publish button is gonna remain inactive. 
+10. At this step you connect your email template in supabase. Navigate to your supabase project, then click the Authentication Section on the left side, after that select Confirm Sign up button.
+11. In the body you need to fill the following vairables
+```
+{
+  "transactionalId": "cmkh7o6lp09kx0iyv7cee6nhd",
+  "email": "{{ .Email }}",
+  "addToAudience": true,
+  "dataVariables": {
+    "confirmationUrl": "{{ .ConfirmationURL }}"
+  }
+}
+```
+Note: you can get the email template id from the url of the specific transaction on loops, for example: [https://app.loops.so/transactional/cmkh7o6lp09kx0iyv7cee6nhd](https://app.loops.so/transactional/cmkh7o6lp09kx0iyv7cee6nhd) 
+12. Inside the email template on loop click on the button, then press the data variable field next to Link and add confirmationURL there, this is the confirmationURL that will be sent from the supabase url.
+![alt text](asset/image-1.png)
+13. Next go to [https://app.loops.so/settings](https://app.loops.so/settings) and to the API Keys section, then select the key and paste the key inside the root .env file’s LOOPS_API_KEY file. 
+
+You are all done now.

docs/asset/image.png

@@ -21,10 +21,10 @@ cp .env.example .env
 
 4. Install the required libraries
 ```
-npm install
+pnpm install
 ```
 5. Run the local development server
 
 ```
-npm run dev
+pnpm run dev
 ```

docs/loops.md

@@ -4,16 +4,19 @@ sidebar_position: 2
 # Setup Supabase
 ## Setup backend
 1. Setup [NextJS](quickstart.md) and [Supabase](../supabase/README.md)
-2. Go to Project Settings > API. Then copy the project url and anon key into the variables `NEXT_PUBLIC_SUPABASE_URL` and `NEXT_PUBLIC_SUPABASE_ANON_KEY` respectively in the `nextjs/.env` file.
+2. To connect your project to the supabase deployed environment, navigate to Project Settings > Data API, copy the project url and put it in `NEXT_PUBLIC_SUPABASE_URL`. Then navigate to Project Settings > API Keys, create a Publishable and secret Key api. Finally copy the default key's value from the Publishable key in `NEXT_PUBLIC_SUPABASE_ANON_KEY`.
 ```
 NEXT_PUBLIC_SUPABASE_URL="https://crnytzptlghehxsarjxm.supabase.co"
-NEXT_PUBLIC_SUPABASE_ANON_KEY="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImNybnl0enB0bGdoZWh4c2FyanhtIiwicm9sZSI6ImFub24iLCJpYXQiOjE3MDkyMjQxNjgsImV4cCI6MjAyNDgwMDE2OH0.UW1dHRt4hGF6uCdPXimxv0Ggwq5uJ1WoQuCZ1_ixmCU"
+NEXT_PUBLIC_SUPABASE_ANON_KEY="sb_publishable_5kkxiPW8Oq6dAbn4qeF4Cw_iUZBqmSf"
 ```
 3. Now running the local development server will connect to your Supabase backend
 ```
 cd nextjs
 npm run
 ```
+:::info 
+Supabase used to have a Legacy anon key, and service_role API key which could only be created once. This key was not rollable. Having a service role key that is generated once during project creation and cannot be changed, has consequence. Specifically, if your key gets exposed, its gonna create a lot of headaches for you. Having a rollable key allows you to switch the keys if anything happens. I recommend using the publishable and secret API keys. If you have an old project using Legacy keys, please switch the keys.
+:::
 
 
 ## Local Setup (Optional)
@@ -25,7 +28,7 @@ cp .env.local.example .env.local
 ```
 3. Run the local development server
 ```bash
-npm run
+pnpm run
 ```
 :::note
 `.env.local` variables will override the `.env` variables when running nextjs locally. [Click here for more info](https://nextjs.org/docs/pages/building-your-application/configuring/environment-variables#default-environment-variables)