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.

Step 1: Create a Page for Authorized Users Only

On this page, add a Custom HTML block and insert the following code:

<script  async  crossorigin="anonymous" data-clerk-publishable-key="pk_test_d2VsbC1sYWR5YmlyZC05LmNsZXJrLmFjY291bnRzLmRldiQ"
  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>

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.

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="pk_test_d2VsbC1sYWR5YmlyZC05LmNsZXJrLmFjY291bnRzLmRldiQ"
  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>

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.

Updated on: 10/12/2024

Was this article helpful?

Thank you!