Theo's Typesafe Cult

TTC

Theo's Typesafe Cult

Join the community to ask questions about Theo's Typesafe Cult and get answers from other members.

Join

I'm trying and failing to set up iron-session + trpc in a T3 app. Anybody here ever do that?

I've been admiring T3 from afar and finally got a good reason to spin one up. NextAuth with all its convenience is fun, but not exactly fitting my needs for authentication and session management. Been trying to switch gears and use iron-session + my own DB solution, but I'm getting hung up on trying to integrate that into the trpc context as well as pass headers around to get access to the cookie ID to load. Found a pretty good github example of that (git::parkgang/trpc-iron-session), but it's using nextJS directly and including @trpc/next in the flow, which is not baked into T3 app... and trying to move to it is making TS lose its mind (or maybe me). Any ideas?...

Discord login page for T3 stack app not working on Firebase App Hosting

I'm having issues getting the Discord login page working on Firebase App Hosting (https://firebase.google.com/docs/app-hosting). I was able to get Firebase App Hosting to recognize my T3 app from GitHub and it used it for a build. I did have to creating an apphosting.yaml file with contents similar to what I have in my .env - and I also created some Google Cloud Secrets Manager secrets. It deployed fine and the web page did come up. I also added the app URL appended with /api/auth/callback/discord to the Discord OAuth2 redirect URL list like I did originally with the localhost:3000 URL. However, when I click on the Sign In button, then click on the Sign in with Discord button, nothing happens in the browser. The F12 console doesn't show any network errors. The App Hosting Cloud Run logs don't show any errors either. What am I doing wrong or missing? I know the T3 app is really meant to work with Vercel, but I was hoping to get this working on Firebase App Hosting. FYI, I deployed the t3 app to Vercel with no issues. I also added the Vercel app URL appended with /api/auth/callback/discord to the Discord OAuth2 redirect URL list. And when I click on the Sign in button then click on the Sign in with Discord button, it does take me to the Discord login page. So there's something different required with the Firebase App Hosting setup. I tried looking for info on this, but couldn't find anything. Or do I have to use Firebase auth instead?...

Supermaven vs Copilot

Why is Theo back to using copilot after recommending supermaven a couple of months ago?

React Error

'React' refers to a UMD global, but the current file is a module. Consider adding an import instead.ts(2686)
'React' refers to a UMD global, but the current file is a module. Consider adding an import instead.ts(2686)
I am getting this error in an extremely simple page (using pages router)...
Solution:
Solved it, I guess typescript was just being stupid with that file (I had to delete it and recreate it for anyone who runs into this issue).

Need help in TipTap

Need Help I am building a Notion-like text editor using TipTap (React). This editor is designed for both creating and updating content. One of the key requirements is to allow text and images to be flexibly positioned—images on the left with text on the right, and vice versa—with the option to create multiple columns. I've attempted to solve this problem multiple times, but I can't seem to find a solution. The official documentation doesn't appear to cover creating columns: https://tiptap.dev/docs....
No description

building content heavy SEO-compatible websites

Been wondering about the way I should go for these projects, should I use something like wordpress or continue with nextJS and sanity.io? Recently I've gotten a new client recently and they want me to build a website like https://scafwest.com.au/projects, which will obv need some content editing and a cms...

clerk auth default metadata

hello, to start this of some basic info: i am currently working on a learning project which is a sass using react, next.js and clerk auth with the t3 stack i currently am implementing a sort of token system (and basic role system but thats not very important) utilizing clerks user metadata feature for that as i currently am not using a stand alone db. i was wondering is there was a simple way to add default metadata when a user is created for example when a user is created the start with 100 tokens? ...
Solution:
after some messing around came up with a much simpler solution to use at least for the time being basically when retrieving the tokens in the navbar if it returns as undefined i run a nonblocking function to create the metadata and temporarily show the default amount ```export async function GetTokenAmount(userId: string) { const user = await clerkClient().users.getUser(userId); const data = user.privateMetadata; const tokenAmount = data.tokens as number; ...

Next.js Use localStorage For Rendering Without Flash?

Hello, I am trying to grab data from localStorage and use it to change the text in a button. This system should detect if a user has clicked the button before and say "continue" instead of "start." I made a useUserHistory hook to wrap this behaviour. ```ts...

TypeScript linting errors with turborepo

Is it normal for turborepo projects to produce TS linting errors in VS Code when refactoring? Seems like every time I rename a file or change a schema, I get red squigglies everywhere. Restarting the TS Server via the command palette doesn't help; I have to restart VS Code entirely. Does this sound familiar to anyone else? I'm using create-t3-turbo (https://github.com/t3-oss/create-t3-turbo), and I can repro the issue from a fresh clone of that repo without any major edits. I've opened an issue on that repo, but I wanted to check if this goes beyond that project....
Solution:
Ok, so after spinning up a fresh turborepo (not create-t3-turbo), it works fine. So it must be an issue with that particular project.

What’s the best way to host my Next.js project if I need to have a static IP address?

Hey everyone, I've built my startup project using the T3 stack and initially hosted it on Vercel, which has been working perfectly so far. However, as the project is gaining more users, I need to connect it to my Supabase database using a secure network. Specifically, I need to restrict IP access to the database, which requires hosting my project in a way that provides a static IP. Can anyone guide me on a good way to achieve this? I feel that using an EC2 instance on AWS might be overkill, and I haven't found a better alternative yet. I've looked into Netlify, Railway, and a few others but haven't decided on the best option....

how to fix images adjusting after loading

i am running into a problem where the images adjust their size after the page loads i don't know what is causing this to happen any help ?
No description

trying to have multiple tables for different projects in vercel postgres using drizzle

I followed Theo's react tutorial and had a t3-project_image table that I use with it on vercel storage. I am creating a new project that is an e-comm-site and it has the following tables e-comm-site_account e-comm-site_user e-comm-site_verification_token...

session callback are not being invoked?

when i try to implement t3stack to my existing app, i have a problem with the default discord authentication flow. everytime i try to log in to my application, only the signIn callback's console.log() values are shown in the console....
No description

How do I set the cookie in the procedure?

I am using the ‘npm create t3-app@latest’ app router. Here I do not want to use nextAuth for authentication, I want to use email address and password. However, Perhaps use NextResponse to implement the following? But how would I set the cookie in the procedure and let the requesting browser set it?...

Coding on Snapdragon X Elite

Anyone using the new Surface Laptop 7 for coding? I don't want to get a Mac because, for the same specs, it's over 50% more expensive, so it's not an option for me...

@t3-oss/env-nextjs with a custom Next.js server?

Hi, I'm trying to setup the @t3-oss/env-nextjs package with my Next.js app that uses a custom server and was wondering if anyone has had any luck with something similar?

Is there a built-in way to prevent ID duplicates using Zod?

Let's say that your data is an array of objects with "id" and "name" fields: ``` [ {...

Express-Like Auth Middleware Pattern For Server Actions?

Since all server actions should be authenticated, I have sprinkled clerk's auth() function at the top of every single action's function body. This seems silly. I liked how Express allows you to apply an auth middleware to collections of routes. For instance: ``` const authMiddleware = (req, res, next) => { const authToken = req.headers['authorization']; ...

switch function in drizzle

I'm following the "Add Clerk Authentication & Stripe Payments to your NextJS tRPC Application" tutorial. The tutorial uses T3 app + Prisma + Clerk. I've used drizzle for my T3 app and need help converting this switch function written in Prisma-speak to Drizzle-speak....
No description

Everyone help me, how to handle server component error?

Code: ``` import { api, HydrateClient } from "@/trpc/server"; import { columns } from "./columns"; import { DataTable } from "./data-table";...