search

Elderjs / elderjs

Elder.js is an opinionated static site generator and web framework for Svelte built with SEO in mind.
https://elderguide.com/tech/elderjs/
MIT License
2.11k stars 53 forks source link

Authentication & selective interactivity for hydratable components in ElderJS #192

Closed jerriclynsjohn closed 3 years ago

jerriclynsjohn commented 3 years ago

Have anyone tried authenticated pages in ElderJS, I'm thinking out loud here:

My requirement is to show a certain part of the page to only authenticated users and give them the ability to comment, like, and even take courses.

Example - Comment Component A blog page where a comment component is read-only and shows a CTA for login for non-authenticated users and for authenticated users it gives the user ability to comment and like/dislike other comments.

What I'm thinking could be a solution

  1. Hydrate the comment feature as a svelte component.
  2. On load, the svelte component checks for JWT token in localStorage/cookie and verifies if the token is valid and gives them the following features
  3. If there is no JWT token/ not valid token then we show the user a "log in" button, when the user clicks on "log in" the comment component opens a popup for them to log in.
  4. Save the JWT token in localStorage/cookie
  5. If the user is authenticated then show the comment input box and the like/dislike button.

I'm hoping that we can make use of the "hydration" feature of Elder to build SEO-friendly & static websites that can highly be interactive. I wanted to know what the community has learned about any such implementations in the past, learn from them, and then implement them for my project.

nickreese commented 3 years ago

@jerriclynsjohn I see 0 reason why this wouldn't be possible in both SSG and SSR mode if all of the data fetching is done with a JWT on the client for the logged in components.

If you want to make the experience dynamic in a SSR context, you could also achieve what you are looking for but with a different flow.