feat: add hono example

.github/workflows/publish.yml

@@ -8,9 +8,6 @@ on:
     branches:
       - main
 
-env:
-  OIDC_ISSUER: "https://testid.cerberauth.com"
-
 jobs:
   deploy-nodejs-cloudflare:
     runs-on: ubuntu-latest
@@ -23,12 +20,15 @@ jobs:
     strategy:
       matrix:
         include:
-          - workingDirectory: ./examples/react-spa
-            projectName: cerberauth-react-spa-oidc
-            directory: ./dist
           - workingDirectory: ./examples/angular-spa
             projectName: cerberauth-angular-spa-oidc
             directory: ./dist/angular-spa/browser
+          - workingDirectory: ./examples/hono
+            projectName: cerberauth-hono-oidc
+            directory: ./dist
+          - workingDirectory: ./examples/react-spa
+            projectName: cerberauth-react-spa-oidc
+            directory: ./dist
           - workingDirectory: ./examples/nextjs-app
             projectName: cerberauth-nextjs-app-oidc
             directory: ./.vercel/output/static

README.md

@@ -9,6 +9,7 @@ You can use the examples as a starting point for your own project or as a refere
 - [Angular SPA](./examples/angular-spa/README.md)
 - [Next.js SPA](./examples/nextjs-spa/README.md)
 - [React SPA](./examples/react-spa/README.md)
+- [Hono](./examples/hono/README.md)
 
 ## License
 

examples/hono/.env.example

@@ -0,0 +1,4 @@
+AUTH_CLIENT_ID=
+AUTH_CLIENT_SECRET=
+AUTH_REDIRECT_URI=
+AUTH_POST_LOGOUT_REDIRECT_URI=

examples/hono/.gitignore

@@ -0,0 +1,33 @@
+# prod
+dist/
+
+# dev
+.yarn/
+!.yarn/releases
+.vscode/*
+!.vscode/launch.json
+!.vscode/*.code-snippets
+.idea/workspace.xml
+.idea/usage.statistics.xml
+.idea/shelf
+
+# deps
+node_modules/
+.wrangler
+
+# env
+.env
+.env.production
+.dev.vars
+
+# logs
+logs/
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+# misc
+.DS_Store

examples/hono/README.md

@@ -0,0 +1,74 @@
+# Hono using Authorization Code Flow with PKCE
+
+This project demonstrates how to implement the Authorization Code Flow with PKCE for an Hono application.
+
+Disclaimer: This project is for educational purposes only and should not be used in production without proper security review and testing.
+
+## Deployment
+
+This project is deployed on Cloudflare Pages. You can access the live demo [here](https://cerberauth-hono-oidc.pages.dev/).
+
+## Prerequisites
+
+Before getting started, make sure you have the following:
+
+- Node.js installed on your machine
+- An OpenID Connect provider that supports the Authorization Code Flow with PKCE
+
+## Getting Started
+
+1. Clone the repository:
+
+  ```bash
+  git clone https://github.com/cerberauth/openid-connect-examples.git
+  ```
+
+2. Install the dependencies:
+
+  ```bash
+  cd openid-connect-examples/hono
+  npm ci
+  ```
+
+3. Configure the OpenID Connect provider:
+
+If you don't have an OpenID Connect provider, you can use [TestID OpenID Connect Provider](https://testid.cerberauth.com/).
+
+  - Obtain the client ID and client secret from your OpenID Connect provider.
+  - Register the redirect URI for your Hono server in the provider's developer console.
+
+4. Update the configuration:
+
+  - Create a `.env.local` file in the root directory of your project or copy `.env` file.
+  - Add the necessary environment variables to the `.env.local` file. For example:
+
+    ```plaintext
+    VITE_CLIENT_ID=your-client-id
+    VITE_REDIRECT_URI=http://localhost:8788/callback
+    ```
+
+    Replace `your-client-id`, and `http://localhost:8788/callback` with the actual values provided by your OpenID Connect provider.
+
+  - Save the `.env.local` file.
+
+5. Start the development server:
+
+  ```bash
+  npm run dev
+  ```
+
+6. Open your browser and navigate to `http://localhost:8788/`.
+
+7. Click on the "Login" button to initiate the authorization code flow.
+
+8. After successful authentication, you will be redirected back to the Hono application and the user information will be displayed.
+
+## Additional Resources
+
+- [Hono](https://hono.dev/)
+- [oauth4webapi](https://github.com/panva/oauth4webapi)
+- [OpenID Connect](https://openid.net/)
+- [OAuth 2.0 Authorization Code Flow](https://oauth.net/2/grant-types/authorization-code/)
+- [PKCE](https://oauth.net/2/pkce/)
+- [Awesome OpenID Connect](https://github.com/cerberauth/awesome-openid-connect)
+- [React](https://reactjs.org/)