Zach’s ugly mug (his face)

Zach Leatherman

How to add Authentication to your Eleventy Site

November 08, 2021 #11 Popular 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/_202111_1/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/_202111_1/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 IndieWeb Avatar for https://jamstackconf.com/Jamstack Conf,btconf’s AvatarBeyond Tellerrand, IndieWeb Avatar for https://smashingconf.com/Smashing Conference,CSSConf’s AvatarCSSConf, and IndieWeb Avatar for https://www.whitehouse.govThe White House. He is an emeritus of IndieWeb Avatar for https://www.filamentgroup.comFilament Group, nejsconf’s AvatarNEJS 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

4 Retweets

JamstackTORONTO aka Jamstack U.N. 🇺🇳MWDelaneyEleventy (1.0.0-beta.4)Matt Biilmann
41 Likes
Tiger Abrodi ⚡ 🦊 💪Sean C DavisZeeshanNothing Personal, but #dirumahajaJake GinnivanNick SollecitoTodd MoreyMagnusMatt Tunney ☕️MWDelaneyJohn MeyerhoferCloudCannonRhian van EschKong Yang/Koob Moov YaajEric WallaceMatt BiilmannCoco MarzÁngel GuerraJens GeilingjlcaBrett EvansAleksandr HovhannisyanCody Peterson #BLMMarcus Tallberg💻 Christian Sharaf ⚙️Gerrit HalfmannSia KaramalegosAra AbcariansEric ☕️ 🐟 💻 🍍Stephanie EcklesBen DelarrePeter WiegandrossTanner DolbyCharlie GDan KlammerMark BoultonAppSeedBenOfer Shaalilltron
4 Replies
  1. Zach Leatherman

    Zach Leatherman @zachleat #

    Thanks for sharing!

  2. Zach Leatherman

    Zach Leatherman @zachleat #

    Yay!

  3. Dave ♦️

    Dave ♦️ @DavidDarnes #

    Paging @SaraSoueidan 👀

  4. Bryan Robinson

    Bryan Robinson @brob #

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

    3 Mentions
    1. Matthias Andrasch ♻️

      Matthias Andrasch ♻️ @m_andrasch #

      FunnY tHiNG aBoUt #seRVERlESS iS,that It aCTualLy ONlY RUnS oN SErvER, theReFORe yOU can HANDlE SEcrET ACTionS thEre (AnD not IN YOUr cLiEnt SIdE JS,WhiCh iS GReAT FOR SecUring agaINSt cROSs-SITE-scriPtiNG/xSs as FAR as I uNdErSTaND). NiCe exAmple 🥰👇1/ zacHlEAt.cOM/wEb/ELeven… Truncated

    2. Hidde

      Hidde @hdv #

      Nice, in this video @zachleat shows how the OAuth dance can be performed with our favourite programming language, HTML, and some Netlify function magic (no client-side JavaScript 🕺) zachleat.com/web/eleventy-l…

    3. Sean C Davis

      Sean C Davis @seancdavis29 #

      Authentication on @eleven_ty from @zachleat. This is great! 11ty is great because it's built for the simplest use cases out of the box. But that can give it the appearance of being limited. Examples like this really showcase just how powerful it can be. zachleat.com/web/eleven… Truncated

    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)