A demo project using OAuth to secure some of your Eleventy Serverless routes.

• Demo
• Deploy your own to Netlify

• Blog post on zachleat.com
• Walk-through on YouTube

npm install
npm run dev

Navigate to http:https://localhost:8888

The full login flow is supported on localhost, assuming the Redirect URI set in your OAuth Application is configured correctly.

This example includes Netlify, GitHub, and GitLab providers. If you only want a subset of these providers, just remove the Login buttons that you don’t want and don’t worry about the relevant environment variables for that provider.

1. Create one or more OAuth applications:
   • Netlify OAuth
   • GitHub OAuth
   • GitLab
   • Slack
2. Add the appropriate environment variables to your .env file:
   • Netlify: NETLIFY_OAUTH_CLIENT_ID and NETLIFY_OAUTH_CLIENT_SECRET
   • GitHub: GITHUB_OAUTH_CLIENT_ID and GITHUB_OAUTH_CLIENT_SECRET
   • GitLab: GITLAB_OAUTH_CLIENT_ID and GITLAB_OAUTH_CLIENT_SECRET
   • Slack: SLACK_OAUTH_CLIENT_ID and SLACK_OAUTH_CLIENT_SECRET

Tip: I like to set up two OAuth applications, one for production and one for local development so that I don’t have to worry about juggling the different Redirect URIs in the provider’s web interface. e.g. this will need to be http:https://localhost:8888/.netlify/functions/auth-callback for local development.

You will need a:

• static login form
• a secure serverless template

Does not have to be in a serverless template. Put it in a shared header on your site!

<form action="/.netlify/functions/auth-before">
  <input type="hidden" name="securePath" value="/YOUR_PATH_HERE/">
  <button type="submit" name="provider" value="netlify">Login with Netlify</button>
  <button type="submit" name="provider" value="github">Login with GitHub</button>
  <button type="submit" name="provider" value="slack">Login with Slack</button>
</form>

securePath should contain the URL to the secured serverless template (see next section).

Serverless templates can be secured with the following front matter (this example is YAML):

---
permalink:
  dynamic: "/YOUR_PATH_HERE/"
secure:
  unauthenticatedRedirect: "/"
---

The above will secure the path and redirect any unauthenticated requests to the URL of your choosing.

You can also conditionally render content inside of an insecure serverless template. Just check for the user global (you can rename this in netlify/functions/dynamic/index.js). Here’s an example of that:

---
permalink:
  dynamic: "/YOUR_PATH_HERE/"
---
{% if user %}
You are logged in!
<!-- Show Logout form -->
{% else %}
<!-- Show Login form -->
{% endif %} 

You can see an example of this in the everything-serverless branch.

You may need to familiarize yourself with Eleventy Serverless templates.

Relevant files:

• .eleventy.js adds the Elventy Serverless bundler plugin for the dynamic permalink.
• Eleventy Serverless .gitignore additions: netlify/functions/dynamic/** and !netlify/functions/dynamic/index.js
• Copy to your project:
  • netlify/functions/dynamic/index.js
  • netlify/functions/util/*
  • netlify/functions/auth-before.js
  • netlify/functions/auth-callback.js