https://github.com/eidam/chatgpt-plugin-clerk-auth

ChatGPT plugin example using Cloudflare Workers and Clerk OAuth2 backend.
https://github.com/eidam/chatgpt-plugin-clerk-auth

chatgpt clerk clerkauth cloudflare cloudflare-workers oauth2 openai plugin workers

Last synced: 2 months ago
JSON representation

ChatGPT plugin example using Cloudflare Workers and Clerk OAuth2 backend.

• Host: GitHub
• URL: https://github.com/eidam/chatgpt-plugin-clerk-auth
• Owner: eidam
• License: mit
• Created: 2023-07-01T12:21:21.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2023-07-01T16:50:52.000Z (over 1 year ago)
• Last Synced: 2024-11-09T15:42:34.498Z (2 months ago)
• Topics: chatgpt, clerk, clerkauth, cloudflare, cloudflare-workers, oauth2, openai, plugin, workers
• Language: TypeScript
• Homepage: https://chatgpt-plugin-clerk.eidam.dev
• Size: 909 KB
• Stars: 18
• Watchers: 2
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-ChatGPT-repositories - chatgpt-plugin-clerk-auth - ChatGPT plugin example using Cloudflare Workers and Clerk OAuth2 backend. (Browser-extensions)

README

        
# ChatGPT plugin with Clerk OAuth2 backend

This is an example implementation of ChatGPT plugin running on Cloudflare Workers with Clerk OAuth2 backend.

![](./.github/docs/images/chatgpt-conversation.png)

## Features

- [x] Authenticate users with Clerk during plugin installation

- [x] Authenticated plugin API calls

- [x] OpenAPI schema generation _(using [cloudflare/itty-router-openapi](cloudflare/itty-router-openapi))_

### Plugin routes

- [x] `/user` Get user's details

- [x] `/user/send-email` Send email to signed in user _(using Sendgrid, additional config needed)_

## Setup

### Sign up for Clerk

1. Sign up for [Clerk account](https://dashboard.clerk.com/sign-up)

1. Create [Clerk application](https://dashboard.clerk.com/apps/new)

### Create OAuth application

1. Get **API Key** (Developers -> API Keys -> Secret keys), you will need it later

1. Create [OAuth application](https://clerk.com/docs/reference/backend-api/tag/OAuth-Applications#operation/CreateOAuthApplication), use API key you got from previous steps

   - Use any URL (e.g. `https://example.com`) as callback URL for now, you will change it later.

   - Set `public` to `false`

1. Note the response, you will need following later

   - `client_id`

   - `client_secret`

   - base URL of your OAuth2 Clerk instance (e.g. `https://fond-tuna-4.clerk.accounts.dev`)

### Deploy Workers application

1. Edit [src/index.ts](./src/index.ts) and set following

   - `clerkBaseUrl` to the base URL you got from previous steps

1. `npm install`

1. `npm run deploy`

1. Note the URL of your Workers application, you will need it later

### Configure ChatGPT plugin

1. Install [new ChatGPT plugin](https://chat.openai.com/?model=gpt-4-plugins)

1. Fill in Client ID and Client Secret you got from previous steps

1. Get the verification token and set it as `pluginVerificationToken` in [src/index.ts](./src/index.ts)

1. Redeploy Workers application (`npm run deploy`)

1. Click `Verify tokens`

1. Install the plugin

1. Click `Log in with Plugin with Clerk`

1. You will get 400 error, it's OK - you need to change callback URL in OAuth application

   - Grab the URL from the request URL, you can get decoded one from the network tab

     ![./.github/images/redirect_uri.png](./.github/docs/images/redirect_uri.png)

   - Edit (PATCH) [OAuth application](https://clerk.com/docs/reference/backend-api/tag/OAuth-Applications#operation/UpdateOAuthApplication) and set the URL as callback URL

   - Close the tab and try to log in again

### Write your own plugin routes

1. Edit [src/index.ts](./src/index.ts) and add your own route handlers

1. Redeploy Workers application (`npm run deploy`)