StaticShield + SvelteKit

Protect a single page

You should just paste a snippet in that page that you want to password protect and add a staticshield-div to the top level div. That's it. Really!

💡

If your page is very lightweight, includes no heavy javascript, and you are sure that javascript runs before the HTML renders as shown in the demo video below, the staticshield-div is not required!

You can find the snippet in the dashbaord under the Svelte Kit section

And also don't forget to add staticshield-div class to the top level div of the page.

Finally a password protected SvelteKit web page looks like

// src/routes/protected.svelte
<script>
  console.log('Hello world')
</script>
<svelte:head>
  <script
    data-cap="<CAPTION>"
    data-site-id="<DATA-SITE-ID>"
    src="https://staticshield.vercel.app/script.js"
  />
  <style>
    .staticshield-div {
      display: none;
    }
  </style>
  <noscript>
    <meta
      http-equiv="refresh"
      content="0; url=https://staticshield.vercel.app/errors/noscript"
    />
  </noscript>
</svelte:head>
<main class="staticshield-div">
  <!-- ... -->
</main>
<style>
  /* ... */
</style>

The highlighted part of code snippet is provided by StaticShield and all you have to do is just add that staticshield-div class name to the top level div.

⚠️

If staticshield-div class is not assigned to the top level div, the user will see a flash of password protected content while the page loads initially.

Password protect a whole app

Password protecting a whole app is just as easy as protecting a single page.

You will have to add the same script on the <head> of public/index.html of the Svelte app after removing the <svelte:head>s.

A password protected Svelte app's public/index.html looks like

// src/app.html
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <link rel="icon" href="/favicon.png" />
        <script
        data-cap="<CAPTION>"
        data-site-id="<DATA-SITE-ID>"
        src="https://staticshield.vercel.app/script.js"/>
        <style>
            .staticshield-div {
                display: none;
            }
        </style>
        <noscript>
            <meta
                http-equiv="refresh"
                content="0; url=https://staticshield.vercel.app/errors/noscript"
            />
        </noscript>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        %svelte.head%
    </head>
    <body>
        <div id="svelte">%svelte.body%</div>
    </body>
</html>
💡

The <DATA-SITE-ID> and <CAPTION> fields will be prefilled in the dashbaord. You will just have to copy paste 😍