> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.unicornplatform.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# 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](https://clerk.com/) - 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:

![](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/image_1gjxjv6.png)

```
<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.

1. In the Clerk Dashboard, navigate to the [**API keys**⁠](https://dashboard.clerk.com/last-active?path=api-keys&_gl=1*1wnu1qz*_gcl_au*Nzk3MDYwMjA5LjE3MzUxMjUyODQ.*_ga*NDgwMTM1NzQxLjE3MzUxMjUyODU.*_ga_1WMF5X234K*MTczNTEyOTc3MC4yLjEuMTczNTEzMDAwOC4wLjAuMA..) page.
2. 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"`

![](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/image_1al1eb4.png)
### Step 3: Integrate Clerk into Your Website

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

![](https://storage.crisp.chat/users/helpdesk/website/-/7/e/7/8/7e782a40c0560c00/acdseeultimate2024y33mito0qt_1nk404z.png)

```
<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.

1. In the Clerk Dashboard, navigate to the [**API keys**⁠](https://dashboard.clerk.com/last-active?path=api-keys&_gl=1*1wnu1qz*_gcl_au*Nzk3MDYwMjA5LjE3MzUxMjUyODQ.*_ga*NDgwMTM1NzQxLjE3MzUxMjUyODU.*_ga_1WMF5X234K*MTczNTEyOTc3MC4yLjEuMTczNTEzMDAwOC4wLjAuMA..) page.
2. In the **Quick Copy** section, copy your Clerk Publishable Key.

### Step 4: Configure the Authorization Button
![](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/image_wgmk0k.png)
Set the button's properties as shown in the screenshot:

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

![](https://storage.crisp.chat/users/helpdesk/website/7e782a40c0560c00/image_1mk6avk.png)
* 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.