CODEWITHSUNDEEP
sveltesveltekit
Edward
Edward

Reputation: 41

How can I hide staff-only frontend code from users?

I'm planning to use SvelteKit for a private control panel application. It will include functions for logged-in users, plus separate functions only for moderators and administrators.

Authentication for the backend API routes is straightforward. There will be no issues ensuring clients can only access the routes they are authorised to.

But I'm not clear on how I can protect the frontend routes. Ideally, I need for there to be no trace of the staff functionality in the frontend code that a user-level client has access to.

How can I accomplish this?

In the past I have used adapter-static with full static rendering (no node backend) and I don't think that will be suitable in this situation.

Upvotes: 4

Views: 265

Answers (1)

Bob Fanger
Bob Fanger

Reputation: 29897

Ideally I need for there to be no trace of any of the staff functionality in the frontend code

You could create two separate SvelteKit projects: one for staff and one for users and host them on separate domains. Plus a third project which contains all the shared components and logic.

But that's a lot of work. So if this is not a hard requirement, I'd use a single SvelteKit project which includes the code for both users and staff.

How I can protect the frontend routes.

In the page load functions you have the opportunity to throw an error like a 401 Forbidden or throw a login redirect.

using adapter-static

Still possible, but the "full static rendering" shouldn't render html pages that are behind authentication, so there'll be a lot more clientside-only routes.

Upvotes: 1

Related Questions