Articles on: Features

Sign up with Clerk

In this article, you will learn how to add authorization to your website and restrict the visibility of certain pages to authorized users only.
We will use Clerk - user management platform.

Step 1: Create a Page for Authorized Users Only

On authorized users only page, add a Custom HTML block and insert the following code:

<script  async  crossorigin="anonymous" data-clerk-publishable-key="YOUR_PUBLISHABLE_KEY"
  src="https://well-ladybird-9.clerk.accounts.dev/npm/@clerk/clerk-js@latest/dist/clerk.browser.js"
  type="text/javascript">
</script>

<script>
  window.addEventListener('load', async function () {
    await Clerk.load()

    if (Clerk.user) {
      document.querySelectorAll('.auth-button').forEach((b) => {
       b.innerHTML = `
        <div class="user-button"></div>
      ` 
      b.className = "";
      });
      document.querySelectorAll('.user-button').forEach((b) => {
        Clerk.mountUserButton(b)
      })
    }
  })
</script>

<style>
body {
visibility: hidden;
}
</style>
<script>
  window.addEventListener('load', async function () {
    await Clerk.load()

    if (!Clerk.user) {
      console.log("NOT LOGGED IN")
window.location.href="/no-access"
    } else {
document.body.style.visibility = "visible"
}
  })
</script>

Instead of "YOUR_PUBLISHABLE_KEY" use your key generated in Clerk.

In the Clerk Dashboard, navigate to the **API keys**⁠ page.
In the Quick Copy section, copy your Clerk Publishable Key.

Step 2: Create a Page for Unauthorized Users

Create a page at the address /no-access that was specified in the code in Step 1. You can change the URL to any other if desired. If the URL changes, it will also need to be replaced in the code in the line window.location.href="/no-access"

Step 3: Integrate Clerk into Your Website

Go to Settings -> General -> Global <body> HTML Code and insert the following script:

<script  async  crossorigin="anonymous" data-clerk-publishable-key="YOUR_PUBLISHABLE_KEY"
  src="https://well-ladybird-9.clerk.accounts.dev/npm/@clerk/clerk-js@latest/dist/clerk.browser.js"
  type="text/javascript"
></script>
<script>
  window.addEventListener('load', async function () {
    await Clerk.load()

    if (Clerk.user) {
      document.querySelectorAll('.auth-button').forEach((b) => {
       b.innerHTML = `
        <div class="user-button"></div>
      ` 
      b.className = "";
      });
      document.querySelectorAll('.user-button').forEach((b) => {
        Clerk.mountUserButton(b)
      })
    }
  })
</script>

Instead of "YOUR_PUBLISHABLE_KEY" use your key generated in Clerk.

In the Clerk Dashboard, navigate to the **API keys**⁠ page.
In the Quick Copy section, copy your Clerk Publishable Key.

Step 4: Configure the Authorization Button

Set the button's properties as shown in the screenshot:

Classes auth-button
onclick event.preventDefault(); Clerk.openSignIn();

Now you can create buttons with links to restricted pages, and only authorized users will have access to those pages.

Potential Weaknesses of Client-side Authorization:

This approach does not guarantee protection and has several vulnerabilities. However, for certain tasks, it may be sufficient—for example, for simple landing page or other similar projects that do not store sensitive user information.

Updated on: 08/01/2025

Was this article helpful?

Thank you!