Password Protection

[vaishnavvprabhu]

Will it be possible to add a password protection before one can access the page? Even just barebones password auth?

[bkroggel]

Hi @vaishnavvprabhu — not really a build-in solution for fruitionsite here — but if you‘d like you can quite simply add a basic auth check to your fruitionsite worker on cloudflare.

The idea and the code are quite nicely laid out by Max Ivanov: https://www.maxivanov.io/how-to-password-protect-your-website-with-cloudflare-workers

All in all you should add the following lines right after the fruition configuration:

/* CONFIGURATION ENDS HERE */

  const USERNAME = '{{ here you should enter the username which visitors should need to make use of }}'
  const PASSWORD = '{{ similarly enter here the passphrase }}'
  const REALM = '{{ that's the name of the website/area users should be able to access }}'

  addEventListener('fetch', (event) => {
    event.respondWith(handleRequest(event.request))
  })

  async function handleRequest(request) {
    const authorization = request.headers.get('authorization')
    if(!request.headers.has('authorization')) {
      return getUnauthorizedResponse(
        'Provide User Name and Password to access this page',
      )
    }
    const credentials = parseCredentials(authorization)
    if (credentials[0] !== USERNAME || credentials[1] !== PASSWORD) {
      return getUnauthorizedResponse(
        'The User Name and Password combination you have entered is invalid.',
      )
    }
    return await fetchAndApply(request)
  }

  function parseCredentials(authorization) {
    const parts = authorization.split(' ')
    const plainAuth = atob(parts[1])
    const credentials = plainAuth.split(':')
    return credentials
  }

  function getUnauthorizedResponse(message) {
    let response = new Response(message, {
      status: 401,
    })
    response.headers.set('WWW-Authenticate', `Basic realm="${REALM}"`)
    return response
  }

If you deploy the worker and refresh the page you should be already unable to access the page unless you enter the credentials correctly.

Alternatively, you could also take a look at the official HTTP Basic Authentication example of Cloudflare which should allow you to build something comparable.

Keep in mind that this does not password protect your notion page by any means. While you do need to enter the password in order to take a look at the page that gets delivered through the Cloudflare Worker, visitors with knowledge about the actual notion page URL will always be able to just simply open up that one.

[paulnatemv]

Once i add password script to worker, its asking me to put username and password and once you click summit its timing out "Connection timed out Error code 522"

https://prnt.sc/nKbOngNgg4vR you can see here

any recommendation

[Vetrov0x]

It asks 3 times for credentials, how to fix it ?

[dpghazi]

Does this still work? Used the code and deployed it but it's not asking me for any credentials.