Squirble Posts - Convex Community

Squirble

•Created by Squirble on 12/15/2024 in #support-community

Telegram Authentication

I'm writing a React app with Convex. I want to support Telegram's super simple Mini App authentication. Here's how it works: My telegram bot shares a special link. When a user clicks on the link, it opens a web view to my app, but with some additional information in the fragment identifier of the URL: it passes the telegram user's id, username, first and last name, photo url, a timestamp, and a hash of all that information with the bot's secret. I've put the bot's secret in my convex environment variables. I've also written a Convex action that verifies the user information against that secret. This action uses node, so I can't easily re-verify it in every query. How can I get Convex to see the user as authenticated? Perhaps I need to have my action return a JWT that Convex understands? How do I get the convex client in the web browser to use that JWT in subsequent requests so the user shows up as authenticated in later queries?

117 replies

CCConvex Community

•Created by Squirble on 12/15/2024 in #support-community

How to get `ctx` through indirection?

I'm writing a telegram bot that uses webhooks. I was able to set it up like this: convex/http.ts

import { httpRouter } from "convex/server";
import { webhook } from "./telegramWebhook";

const http = httpRouter();

http.route({
  path: "/telegram/bot/webhook",
  method: "POST",
  handler: webhook,
});

export default http;

import { httpRouter } from "convex/server";
import { webhook } from "./telegramWebhook";

const http = httpRouter();

http.route({
  path: "/telegram/bot/webhook",
  method: "POST",
  handler: webhook,
});

export default http;

convex/telegramWebhook.ts

import { httpAction } from "./_generated/server";
import { webhookCallback } from "grammy";
import bot from "./bot";

const handleUpdate = webhookCallback(bot, "std/http");

export const webhook = httpAction(async (ctx, req) => {
  try {
    const url = new URL(req.url);
    if (url.searchParams.get("token") !== bot.token) {
      return new Response("not allowed", { status: 405 });
    }
    return await handleUpdate(req);
  } catch (err) {
    console.error(err);
    return new Response();
  }
});

export default webhook;

import { httpAction } from "./_generated/server";
import { webhookCallback } from "grammy";
import bot from "./bot";

const handleUpdate = webhookCallback(bot, "std/http");

export const webhook = httpAction(async (ctx, req) => {
  try {
    const url = new URL(req.url);
    if (url.searchParams.get("token") !== bot.token) {
      return new Response("not allowed", { status: 405 });
    }
    return await handleUpdate(req);
  } catch (err) {
    console.error(err);
    return new Response();
  }
});

export default webhook;

Now, in the bot itself, how can I access the convex ctx? bot

import { Bot } from "grammy";
const bot = new Bot(process.env.TELEGRAM_BOT_SECRET!);

bot.command("start", (ctx) => ctx.reply("Welcome! Up and running."));

bot.command("getMessages", (ctx) => {
  // TODO: How do I get the convex ctx here?
  const poll = await messages.list(ctx); // not the same ctx!
  ctx.reply(`You have ${messages.length} messages.`)
});

export default bot

import { Bot } from "grammy";
const bot = new Bot(process.env.TELEGRAM_BOT_SECRET!);

bot.command("start", (ctx) => ctx.reply("Welcome! Up and running."));

bot.command("getMessages", (ctx) => {
  // TODO: How do I get the convex ctx here?
  const poll = await messages.list(ctx); // not the same ctx!
  ctx.reply(`You have ${messages.length} messages.`)
});

export default bot

Can I do some sort of global / thread-local trick to get access to the convex context at a distance? Or do I need to somehow pass it through indirection? Would it be safe to try to attach the convex context to my bot somehow in the webhook http handler? How unique is the convex context? Is it different in each request or is it really just the same thing? Is there a reason we can't just import it from somewhere?

10 replies

CCConvex Community

•Created by Squirble on 12/6/2024 in #support-community

React quickstart breaks on `npm run dev:frontend`

I ran npm create convex@latest and then npm run dev but I'm getting an error.

% npm run dev:frontend

> my-project@0.0.0 dev:frontend
> vite --open

Port 5173 is in use, trying another one...
Port 5174 is in use, trying another one...

  VITE v5.4.11  ready in 138 ms

  ➜  Local:   http://localhost:5175/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help
file:///Users/me/Documents/Code/my-project/tailwind.config.js:77
  plugins: [require("tailwindcss-animate")],
           ^

ReferenceError: require is not defined
    at file:///Users/me/Documents/Code/my-project/tailwind.config.js:77:12
    at ModuleJobSync.runSync (node:internal/modules/esm/module_job:395:35)
    at ModuleLoader.importSyncForRequire (node:internal/modules/esm/loader:329:47)
    at loadESMFromCJS (node:internal/modules/cjs/loader:1414:24)
    at Module._compile (node:internal/modules/cjs/loader:1547:5)
    at Object..js (node:internal/modules/cjs/loader:1677:16)
    at Module.load (node:internal/modules/cjs/loader:1318:32)
    at Function._load (node:internal/modules/cjs/loader:1128:12)
    at TracingChannel.traceSync (node:diagnostics_channel:322:14)
    at wrapModuleLoad (node:internal/modules/cjs/loader:219:24)
    at Module.require (node:internal/modules/cjs/loader:1340:12)
    at require (node:internal/modules/helpers:138:16)
    at /Users/me/Documents/Code/my-project/node_modules/tailwindcss/lib/lib/load-config.js:54:27
    at loadConfig (/Users/me/Documents/Code/my-project/node_modules/tailwindcss/lib/lib/load-config.js:58:6)
    at getTailwindConfig (/Users/me/Documents/Code/my-project/node_modules/tailwindcss/lib/lib/setupTrackingContext.js:71:116)
    at /Users/me/Documents/Code/my-project/node_modules/tailwindcss/lib/lib/setupTrackingContext.js:100:92
    at /Users/me/Documents/Code/my-project/node_modules/tailwindcss/lib/processTailwindFeatures.js:46:11
    at plugins (/Users/me/Documents/Code/my-project/node_modules/tailwindcss/lib/plugin.js:38:69)
    at LazyResult.runOnRoot (/Users/me/Documents/Code/my-project/node_modules/postcss/lib/lazy-result.js:329:16)
    at LazyResult.runAsync (/Users/me/Documents/Code/my-project/node_modules/postcss/lib/lazy-result.js:258:26)
    at LazyResult.async (/Users/me/Documents/Code/my-project/node_modules/postcss/lib/lazy-result.js:160:30)
    at LazyResult.then (/Users/me/Documents/Code/my-project/node_modules/postcss/lib/lazy-result.js:404:17)

Node.js v22.12.0

% npm run dev:frontend

> my-project@0.0.0 dev:frontend
> vite --open

Port 5173 is in use, trying another one...
Port 5174 is in use, trying another one...

  VITE v5.4.11  ready in 138 ms

  ➜  Local:   http://localhost:5175/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help
file:///Users/me/Documents/Code/my-project/tailwind.config.js:77
  plugins: [require("tailwindcss-animate")],
           ^

ReferenceError: require is not defined
    at file:///Users/me/Documents/Code/my-project/tailwind.config.js:77:12
    at ModuleJobSync.runSync (node:internal/modules/esm/module_job:395:35)
    at ModuleLoader.importSyncForRequire (node:internal/modules/esm/loader:329:47)
    at loadESMFromCJS (node:internal/modules/cjs/loader:1414:24)
    at Module._compile (node:internal/modules/cjs/loader:1547:5)
    at Object..js (node:internal/modules/cjs/loader:1677:16)
    at Module.load (node:internal/modules/cjs/loader:1318:32)
    at Function._load (node:internal/modules/cjs/loader:1128:12)
    at TracingChannel.traceSync (node:diagnostics_channel:322:14)
    at wrapModuleLoad (node:internal/modules/cjs/loader:219:24)
    at Module.require (node:internal/modules/cjs/loader:1340:12)
    at require (node:internal/modules/helpers:138:16)
    at /Users/me/Documents/Code/my-project/node_modules/tailwindcss/lib/lib/load-config.js:54:27
    at loadConfig (/Users/me/Documents/Code/my-project/node_modules/tailwindcss/lib/lib/load-config.js:58:6)
    at getTailwindConfig (/Users/me/Documents/Code/my-project/node_modules/tailwindcss/lib/lib/setupTrackingContext.js:71:116)
    at /Users/me/Documents/Code/my-project/node_modules/tailwindcss/lib/lib/setupTrackingContext.js:100:92
    at /Users/me/Documents/Code/my-project/node_modules/tailwindcss/lib/processTailwindFeatures.js:46:11
    at plugins (/Users/me/Documents/Code/my-project/node_modules/tailwindcss/lib/plugin.js:38:69)
    at LazyResult.runOnRoot (/Users/me/Documents/Code/my-project/node_modules/postcss/lib/lazy-result.js:329:16)
    at LazyResult.runAsync (/Users/me/Documents/Code/my-project/node_modules/postcss/lib/lazy-result.js:258:26)
    at LazyResult.async (/Users/me/Documents/Code/my-project/node_modules/postcss/lib/lazy-result.js:160:30)
    at LazyResult.then (/Users/me/Documents/Code/my-project/node_modules/postcss/lib/lazy-result.js:404:17)

Node.js v22.12.0

32 replies

CCConvex Community

•Created by Squirble on 12/6/2024 in #support-community

I just finished the tutorial and I have some questions

* Can Convex do local-first? Work offline and sync later? * Is it possible to run your own convex reactor? (Like github co-location) * Do companies need to worry about Convex having access to their data? * This is vendor lock-in, right? * What happens if you exceed the maximum quotas? * What happens if Convex raises their prices? * Can Convex afford to host all this? What if they run out of money? * How granular are “ready-sets”? Down to the record? Down to the xpath within a record? * How do queries that use randomness or the date decide when to be updated? * This “likes” example looks like an N+1 query problem. * Is it going to cause performance issues or not? * Will we ultimately want to write it a different way? * How does its performance compare to postgres? * This would be a good opportunity to introduce uniqueness constraints so you can’t double-like the same document. Can we do that? * can the scheduler debounce things? * Specifically, I’d like to schedule something to occur immediately, but if it is scheduled again within 5 seconds it should wait until the end of that period before executing again, no matter how many times it is called in between. * access control * how do you configure which actions/mutations/etc are available on the client side vs the server side? * how do you configure what’s available to a specific user? * can I use bun and not use node?

14 replies

CCConvex Community

•Created by Squirble on 12/5/2024 in #support-community

Tutorial doesn't actually work with Node 16

If you do the tutorial steps to start developing with Convex with Node v16.10.0, you'll get an error:

npm run dev

> convex-tour-chat-0@0.0.0 predev
> convex dev --run init --until-success

/convex-tour-chat/node_modules/convex/dist/cli.bundle.cjs:129136
var retryingFetch = (0, import_fetch_retry.default)(fetch);
                                                    ^

ReferenceError: fetch is not defined
    at Object.<anonymous> (/convex-tour-chat/node_modules/convex/dist/cli.bundle.cjs:129136:53)
    at Module._compile (node:internal/modules/cjs/loader:1101:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:196:29)
    at ModuleJob.run (node:internal/modules/esm/module_job:183:25)
    at async Loader.import (node:internal/modules/esm/loader:178:24)

npm run dev

> convex-tour-chat-0@0.0.0 predev
> convex dev --run init --until-success

/convex-tour-chat/node_modules/convex/dist/cli.bundle.cjs:129136
var retryingFetch = (0, import_fetch_retry.default)(fetch);
                                                    ^

ReferenceError: fetch is not defined
    at Object.<anonymous> (/convex-tour-chat/node_modules/convex/dist/cli.bundle.cjs:129136:53)
    at Module._compile (node:internal/modules/cjs/loader:1101:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:196:29)
    at ModuleJob.run (node:internal/modules/esm/module_job:183:25)
    at async Loader.import (node:internal/modules/esm/loader:178:24)

This error can be fixed by upgrading to a newer version of Node. It works fine with v22.12.0.

5 replies