clerk.html

<div id="app" style="display: flex; align-items: center; justify-content: center; height: 80vh; font-family: system-ui, Inter, sans-serif;"></div>

<!-- Initialize Clerk with your
Clerk Publishable key and Frontend API URL -->
<script
  async
  crossorigin="anonymous"
  data-clerk-publishable-key="pk_test_bW9yZS1uZXd0LTc3LmNsZXJrLmFjY291bnRzLmRldiQ"
  src="https://more-newt-77.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.getElementById('app').innerHTML = `
        <div id="user-button"></div>
      `

      const userButtonDiv = document.getElementById('user-button')

      Clerk.mountUserButton(userButtonDiv)
    } else {
      document.getElementById('app').innerHTML = `
        <div id="sign-in"></div>
      `

      const signInDiv = document.getElementById('sign-in')

      Clerk.mountSignIn(signInDiv)
    }
  })
</script>