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

Next Auth With username and password

Im trying to set up a simple username and password auth on a website for my portfolio. I have google auth working but I just want a test@test.com user that I can fill with dummy data to display. I tired playing around and following this tutorial https://www.youtube.com/watch?v=im8o328q6EI&t=361s to set it up to no avail. Not sure what im doing wrong auth.ts ``` ...

Stripe Webhooks (NextJS App Router)

Is it possible to create a stripe webhook endpoint using nextjs app router? If yes, how?

Migrating Full Stack App, Piecemeal or create-t3-app?

Looking to migrate my current work project over to the t3 stack. My current stack is MySQL, Express, Socket.io, React, Node. I'm trying to figure out if I should just merge in each tech from t3 individually on their own or create a new app and just start bringing over legacy code from that into the newly scaffolded project? I've never done a stack migration but from what I've research so far this should be very doable, I already have Prisma working in my project, I'm mildly concerned about migra...

React Hook Form Type Instantiation is Excessively Deep and Possibly Infinite

Hey! I'm using React Hook Form, Zod, and tRPC in a T3 stack project, and I keep getting an error on the {...register("name_here")}, here's an example of what one of the code blocks looks like with this error: ``` const ToggleActive = (props: { id: string; activeFlag: boolean }) => { const ctx = api.useContext();...

How to make prettier run before ESLint on save?

I just saw Theo's latest video where he recommended we configure prettier/eslint so that prettier runs first on save for style corrections, then afterwards ESLint does another pass for code quality. How do I ensure that this order occurs upon save? Is it enough to just have the following settings? ```json "editor.formatOnSave": true,...

Client Component Hydration Layout Shift

Next.js 13 with appDir. I have a page that have a client component on the top and a server component on the bottom. The client component is an image, and the reason it is a client component is because it displays a different image based on the light/dark mode. The problem is that, when the page initially loads, the server rendered components first appears on the top, and then the client component hydrates, which causes the server component to shift down, causing an annoying flicker. How can I fix this? Thanks....

how to use getServerSession inside onclick server action

I am trying to call getServerSession inside onClick and it's not working can anyone have answer to this how can we call getServerSession inside server action which is used inside onClick ```js export async function Example() { const session = await getServerSession(authOption); console.log(session);...

NextAuth.

If i run this i get all sorts of different sessions errors. Where do i go wrong in this auth?

Server Action With getServerSession

hi i am trying to use getServerSession from server action it giving me error in terminal ``` error Error: Invariant: Method expects to have requestAsyncStorage, none available at BuyProSubscription (pricing/buyNowAction.ts:15:86)...

Should you avoid having the queries inside Components?

Kind of a silly question, but if I don't do that, when I have a frailly complex page with lots of queries, the file looks pretty convoluted. And I'm not sure if I should be tying my components to queries, that kind of makes them less generic?...

Any plugins/extensions to make SQLite, PostgreSQL or MySQL immutable/append only

Howdy folks, Title says it all. And if not, would you have any suggestions of a database that is immutable/append only? Looking for something that is sort of like AWS’s Quantum Ledger but that you can run locally....

Updating data

This is my server component: ```tsx export default async function Collection() { const session = await getAuthSession();...

Theo and Dan Abramov useEffect Interview Question

I know its old but I am reviewing Theo's practice interview with Dan Abramov (https://www.youtube.com/watch?v=uqII0AOW1NM) and had a question about the autoscroll section. Dan says most people would want to do this in an effect (my first instinct), but Dan said he wouldnt want to do this and you're "not supposed to do things that are disruptive there". Can anyone please explain what the reason for this/link the react docs that explain why this is?
Solution:
In that specific case, using an effect isn't great since the autoscroll should be happening in response to a event coming through, not some state changing - hence it should be done in the handler of the event. There's a lot of cases like that which are documented here: https://react.dev/learn/you-might-not-need-an-effect

NextAuth & AWS Cognito SignOut issues

I'm currently facing an issue with Next.JS and NextAuth when signing a user out. Also to note I'm using AWS Cognito as the provider with AWS Cognito's hosted UI for the user to input their credentials. The issue happens when a user is logged in, and chooses to signOut using NextAuth's signOut method, but when they sign back in it automatically signs the user with the same account. E.g. Account A is signed in and they want to login to Account B, but when logging out, and logging back in it automatically signs back into Account A without asking for credentials....

use a skeleton when rendering a component

was wondering if i could add a skeleton for my navbar client component that is in my layout.tsx not sure how to do this...

Vercel Postgres Backup (pg_dump)

Hey all, looking to use vercel's postgres storage in production, but need to be able to backup the tables on a schedule somehow. First I'm unsure how to pg_dump from a serverless function, looks like ill have to use a process, then stream it to an s3. This looks promising but it's built specifically for aws lambda. https://github.com/jameshy/pgdump-aws-lambda...

When using Zustand in a mono

How should i set it up , should i have a separate store for every project?

NextJS build Fails Only In CI - Can't find module

I've spent hours trying to find the cause, any ideas? Note, it's only happening for imports from the public directory. My folder structure:...

t3 stack with react-native

Hi guys I have experience working with react-native and was curious if it would be possible to build some sort of all in one web-client, server and expo or bare workflow react-native app with tRPC etc. has anyone experience in doing that/can recommend some tutorial or docs on it and maybe would like to build some project with me to production?

skeleton for rendering client component

was wondering if i could add a skeleton for my navbar client component that is in my layout.tsx not sure how to do this...