Retrieving data from an API route.

[johnny-kc-wu]

Hi all,
I'm learning SvelteKit and Supabase together. Here is my project structure:

src
│  app.css
│  app.html
└─lib
│    └─server
│         │supabase.js # supabase client
│
└─routes
    │  +page.js # a load function to fetch data from my API route `/api/main-content`
    │  +page.svelte
    └─api
       │ +layout.server.js # redirect helper that redirect users to the root '/'
       │ +page.svelte # empty
       └─main-content
              │+server.js  # GET method to grab data from supabase
              │+page.svelte # empty

I aim to display a substantial amount of data on the frontpage with pagination, preloading the initial pages before rendering. Also, I want to ensure that users cannot access my database or API routes directly (e.g. typing /api/xxx in the browser will redirect to the frontpage).

My app works well so far, but I am unsure about a few things:

1. I am uncertain if the method I am using to obtain data (retrieving data from the database in +server.js and using the load function in +page.js ) is the appropriate pattern to follow in SvelteKit.
2. I am unsure if redirecting users is a reliable way to secure my API routes. Also, I am unsure why I need an empty +page.svelte file for each nested API route in order for the redirect helper to function correctly.

[eltigerchino]

I am uncertain if the method I am using to obtain data (retrieving data from the database in +server.js and using the load function in +page.js ) is the appropriate pattern to follow in SvelteKit.

This is completely fine. Alternatively, you can just do it in one +page.server.js file.

I am unsure why I need an empty +page.svelte file for each nested API route in order for the redirect helper to function correctly.

You shouldn't need one. The +server.js endpoints should work fine without one. Similarly for the load functions(? I'm not sure myself).

I am unsure if redirecting users is a reliable way to secure my API routes.

I don't think it is, although I'm definitely not an expert myself. You could try using the Authorization header / cookie and a JWT, etc. to authenticate the request.
See https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Authorization and https://jwt.io