1

Screenshot / Code Snippet

Login with Stack Overflow - Eleventy Serverless OAuth Demo

Secure page - Eleventy Serverless OAuth Demo

About

Eleventy is a static website generator. On version 1 it added support for severless functions. During the beta, the Eleventy maintainer created a demo for using serverles functions to add OAuth support to a static site including Netlify, GitHub and others but not Stack Exchange / Stack Overflow as OAuth providers. This is about a fork of the demo repo to add Stack Exchange / Stack Overflow as a proof of concept.

License

TBD

Download

Website: https://serene-bonbon-b699e0.netlify.app/

Platform

Web browsers: Chrome, Firefox, Safari. Other browsers like Brave and Edge might work to.

Contact

I created this website / repo from the main branch of https://github.com/11ty/demo-eleventy-serverless-oauth.

Code

  • Node.js
  • GitHub
  • Netlify
  • Eleventy
  • Nunjucks
  • JavaScript
  • HTML
  • CSS

Highlights

  • The Stack Exchange Authentication uses https://stackoverflow.com as the token host.
  • To get the user data, use https://api.stackexchange.com, including the access token taken from the OAuth flow and the key from the app registration.
  • To get the access token, I'm using https://stackoverflow.com/oauth/access_token/json.
  • I added the client id and client secret to the Netlify environment variables as instructed on the referred demo's README.md and the key above. I added several if statements to handle using Stack Exchange as an OAuth provider and adapted secure.njk to handle the Stack Exchange user profile data.

My Learning Outcomes

The demo uses the simple-outh2 Node.js package to authenticate and retrieve the user profile data. There is no need to use this library to get the Stack Exchange user profile. The built-in fetch method introduced in Node.js version 18 can handle this request.

Related Stack Exchange Questions

Now

I paused the work on this repo to focus on my jardín digital.

I will keep this post here for a while.

Roadmap

  1. Clean the code.
  2. Make a PR into the depo repo owned by 11ty (GitHub user).

Related

0

You must log in to answer this question.

Browse other questions tagged .