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.jscontains 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= rishi18304@iiitd.ac.in, 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 || 'rishi18304@iiitd.ac.in',
+ 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
rishi18304@iiitd.ac.inand password asLayer0 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:
rishi18304@iiitd.ac.inand 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.
Top comments (0)