Zach’s ugly mug (his face)

Zach Leatherman

How to add Authentication to your Eleventy Site

November 08, 2021 Watch in 7 minutes

A demo project and walkthrough showing how to secure some of your Eleventy Serverless pages behind OAuth authentication providers.

  • Login with GitHub, Netlify, or GitLab (and easily extensible to add more!)
  • This demo uses zero clientside JavaScript.
  • Serverless templates can be secured with a simple addition to the template front matter.

Walk-through

Demo

Screenshot image for https://v1.screenshot.11ty.dev/https%3A%2F%2Fdemo-eleventy-serverless-oauth.netlify.app%2F/opengraph/_x202205_0/https://demo-eleventy-serverless-oauth.netlify.app/

Source Code

Screenshot image for https://v1.screenshot.11ty.dev/https%3A%2F%2Fgithub.com%2F11ty%2Fdemo-eleventy-serverless-oauth/opengraph/_x202205_0/https://github.com/11ty/demo-eleventy-serverless-oauth

Zach’s ugly mug (his face)

Zach is a builder for the web with IndieWeb Avatar for https://www.netlify.comNetlify. He created the IndieWeb Avatar for https://www.11ty.devEleventy site generator and is still fixated on web fonts. His public speaking résumé includes talks in eight different countries at events like Jamstack Conf, Beyond Tellerrand, Smashing Conference, CSSConf, and The White House. He is an emeritus of Filament Group, NEJS CONF, and still helps out with nebraskajs’s AvatarNebraskaJS. Read more about Zach »

Previous
Mix and Match Template Syntax in Eleventy using the Render Plugin
Next
Recycling Open Graph Images for display on my Web Site

7 Retweets

Matthias Andrasch ♻️HiddeSean C DavisJamstackTORONTO aka Jamstack U.N. 🇺🇳MWDelaneyEleventy (1.0.0-beta.4)Matt Biilmann

41 Likes

Tiger Abrodi ⚡ 🦊 💪Sean C DavisNothing Personal, but #dirumahajaZeeshanJake GinnivanNick SollecitoTodd MoreyMagnusMatt Tunney ☕️John MeyerhoferMWDelaneyRhian van EschCloudCannonEric WallaceKong Yang/Koob Moov YaajCoco MarzMatt BiilmannJens GeilingÁngel GuerrajlcaAleksandr HovhannisyanBrett EvansMarcus TallbergCody Peterson #BLM💻 Christian Sharaf ⚙️Gerrit HalfmannSia KaramalegosEric ☕️ 🐟 💻 🍍Ara AbcariansStephanie EcklesBen DelarrerossPeter WiegandTanner DolbyCharlie GDan KlammerAppSeedMark BoultonOfer ShaalBenilltron
4 Comments
  1. Zach Leatherman

    @zachleat

    Thanks for sharing!

  2. Zach Leatherman

    @zachleat

    Yay!

  3. Dave ♦️

    @DavidDarnes

    Paging @SaraSoueidan 👀

  4. Ooooh serverless routes for that... that makes so much sense!

    Social Card Image Preview

    This is what will show up when you share this post on Social Media:

    How did you do this? I automated my Open Graph images. (Peer behind the curtain at the test page)