Skip to content

eidam/chatgpt-plugin-clerk-auth

Repository files navigation

ChatGPT plugin with Clerk OAuth2 backend

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

Features

  • Authenticate users with Clerk during plugin installation
  • Authenticated plugin API calls
  • OpenAPI schema generation (using cloudflare/itty-router-openapi)

Plugin routes

  • /user Get user's details
  • /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
  2. Create Clerk application

Create OAuth application

  1. Get API Key (Developers -> API Keys -> Secret keys), you will need it later
  2. Create OAuth application, 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
  3. 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 and set following
    • clerkBaseUrl to the base URL you got from previous steps
  2. npm install
  3. npm run deploy
  4. Note the URL of your Workers application, you will need it later

Configure ChatGPT plugin

  1. Install new ChatGPT plugin
  2. Fill in Client ID and Client Secret you got from previous steps
  3. Get the verification token and set it as pluginVerificationToken in src/index.ts
  4. Redeploy Workers application (npm run deploy)
  5. Click Verify tokens
  6. Install the plugin
  7. Click Log in with Plugin with Clerk
  8. 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
    • Edit (PATCH) OAuth application 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 and add your own route handlers
  2. Redeploy Workers application (npm run deploy)