Basic Authentication using the platform, Layer0

What is basic authentication?

In the context of an HTTP transaction, basic access authentication is a method for an HTTP user agent (e.g. a web browser) to provide a user name and password when making a request. In basic HTTP authentication, a request contains a header field in the form of Authorization: Basic , where credentials is the Base64 encoding of ID and password joined by a single colon : Wikipedia

Read more on: https://developer.mozilla.org/en-US/docs/Web/HTTP/Authentication

Basic Authentication Example with Layer0

1-Click Deploy with Layer0, Website, GitHub

Creating a Basic Authentication App with Layer0

The following 3 steps will walk you through implementation of basic authentication with Layer0, which is agnostic to the tech stack of your website.

In the example below, we'll be redirecting authenticated users to https://google.com.

Step 1: Create a new Layer0 app

To create a new Layer0 app, execute:

npx @layer0/cli@latest init

🚀 Let's get started with Layer0!

✔ Enter a name for your app … basic-auth-example 
✔ What is the hostname or IP address of the origin site that you will host on Layer0? … google.com
✔ Should we create a new directory for your Layer0 app or use the current directory? › Create a new directory
✔ Which package manager would you like to use? › npm
✔ installing @layer0/core, @layer0/cli, @layer0/prefetch, @layer0/devtools... done.
> layer0.config.js not found, creating...
> routes.js not found, creating...

To change directories to your new Layer0 app:

    cd basic-auth-example

To run your app locally:

    0 dev

To deploy your app:

    0 deploy

Step 2: Add requireBasicAuth inside routes.js

• Currently, routes.js contains the following:

// This file was added by layer0 init.
// You should commit this file to source control.

import { Router } from '@layer0/core/router'

// const ONE_HOUR = 60 * 60
// const ONE_DAY = 24 * ONE_HOUR

export default new Router()

  // Here is an example where we cache api/* at the edge but prevent caching in the browser
  // .match('/api/:path*', ({ proxy, cache }) => {
  //   cache({
  //     edge: {
  //       maxAgeSeconds: ONE_DAY,
  //       staleWhileRevalidateSeconds: ONE_HOUR,
  //     },
  //     browser: {
  //       maxAgeSeconds: 0,
  //       serviceWorkerSeconds: ONE_DAY,
  //     },
  //   })
  //   proxy('origin')
  // })

  // send any unmatched request to origin
  .fallback(({ proxy }) => proxy('origin'))

• Update the router to include the requireBasicAuth function:

// This file was added by layer0 init.
// You should commit this file to source control.

import { Router } from '@layer0/core/router'

// const ONE_HOUR = 60 * 60
// const ONE_DAY = 24 * ONE_HOUR

export default new Router()

// BASIC_AUTH_USERNAME= [e-mail], BASIC_AUTH_PASSWORD= Layer0 by Limelight
// Authorization: Basic cmlzaGkxODMwNEBpaWl0ZC5hYy5pbjpMYXllcjAgYnkgTGltZWxpZ2h0
// Add environment variables: https://docs.layer0.co/guides/environments#environment-variables
+  .requireBasicAuth({
+    username: process.env.BASIC_AUTH_USERNAME || '[e-mail]',
+    password: process.env.BASIC_AUTH_PASSWORD || 'Layer0 by Limelight',
+  })

  // Here is an example where we cache api/* at the edge but prevent caching in the browser
  // .match('/api/:path*', ({ proxy, cache }) => {
  //   cache({
  //     edge: {
  //       maxAgeSeconds: ONE_DAY,
  //       staleWhileRevalidateSeconds: ONE_HOUR,
  //     },
  //     browser: {
  //       maxAgeSeconds: 0,
  //       serviceWorkerSeconds: ONE_DAY,
  //     },
  //   })
  //   proxy('origin')
  // })

  // send any unmatched request to origin
  .fallback(({ proxy }) => proxy('origin'))

NOTE: The example relies on environment variables. With Layer0, you can follow this guide to add .env variables. In case of no environment variables, the username is considered as [e-mail] and password as Layer0 by Limelight.

Step 3: Deploy to Layer0

To deploy from CLI, execute the following:

npx @layer0/cli@latest deploy

OR

[Optional] Testing

To test the example step by step, follow the mentioned steps:

• Open the website in a new tab
• Enter the right credentials (username: [e-mail] and password: Layer0 by Limelight) and observe that you are redirected to https://google.com
• Open the website again, but in an incognito tab
• Enter any wrong credentials and see that you You don't have authorisation to view this page.

Resources

• Deploying to Layer0
• Layer0 Docs: Basic Authentication