<!-- thumbnail: https://example.com/some-image.png --> <!-- version: 1.0 --> <!-- tag: website --> <!-- excerpt: Demo of Obsidian Digital Garden plus Eleventy Serverless OAuth --> ## Screenshot / Code Snippet [![Stack Overflow user infortion displayed on Obisidian Digital Garden plugin plus Eleventy Serverless generated webpage][1]][1] ## About This is a *proof of concept* / "minimal, complete, verifiable example" of adding the Eleventy Serverless plugin to an instance of Obisidian Digital Garden's (ODG) template repo for using a Stack Overflow account to **log in**. ODG is a community plugin for [Obsidian](https://obsidian.md), a cross-platform note-taking app that uses markdown for note files. ### License TBD ### Download - Website: https://demo-dg-oauth.netlify.app - GitHub Repository: https://github.com/rubenrivera/demo-dg-oauth ### Platform Web Browsers: Chrome, Firefox, Safari. Other web browsers like Brave and Edge might work too. ## Contact I created this app using several tools. ## Code - GitHub - Netlify - Eleventy - Node.js - Nunjucks - JavaScript - HTML - SCSS - CSS - SVG ## Highlights The repository https://github.com/rubenrivera/demo-dg-oauth could be forked, but if you want to do "from scratch", below are the "not so broad" steps: 1. Deploy a site using the **Deploy to Netlify** button from the **Obsidian Digital Garden** community plugin documentation. If you want to run this from anywhwere, grab the site URL. 2. Register the app on stackapps.com. Get the **client ID**, **client secret**, and **key**. For local development/testing, set **localhost** as the OAuth domain. 3. Add the **client id**, **client secret** and **key** from the previous step as environment variables to the site settings on Netlify. 4. Add the Eleventy Serverless plugin to `userSetup.js` 5. Add the authentication files from the Eleventy Serverless OAuth demo (`Netlify/functions/dynamic/index.js`, `Netlify/functions/Utils/*`, `Netlify/functions/auth-before.js` and `Netlify/functions/auth-callback.js`) 6. Add `index.njk` and `secure.njk` from the Eleventy Serverless OAuth demo to `/src/site/`. 7. Edit the files from the previous steps. 8. Edit `.gitignore` and `netlify.toml`. 9. Install the modules required by the Eleventy Serverles OAuth demo (`cookie`, `simple-outh2` and `node-fetch`). Tip use `npm ci` instead of `npm install` / `npm i`. 10. To run locally, install `netlify-cli`, then run `netlify link` once to run the serverless functions on Netlify servers. Then run `netlify dev` on the project root directory to build and run a local web hosting server. Wait for the **Netlify CLI** to give a message including the URL to be used, i.e., `http://localhost:8888`. - I used Chrome for testing locally. Safari blocks third-party cookies. Safari works fine when opening the website from the Netlify servers. 11. [Workaround] An error occurs when the Serverless function tries to write the favicon using the ODG `src/site/_includes/layouts/index.njk` / `src/site/_includes/layouts/note.njk` templates for `src/site/index.njk` and `src/site/secure.njk`. Edit `/src/site/_includes/components/pageheader.njk` to add a condition to "favicons" run only on the build phase (not when generating pages by the Serverless functions). # Related ## Other posts from me - https://stackapps.com/q/10533/105187 - https://stackapps.com/q/10534/105187 ## Other websites that use Stack Overflow / Stack Exchange OAuth - https://stackapps.com/q/7661/105187 [1]: https://i.sstatic.net/O4QXL.png