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

Supabase auth with Nextjs13, need to persist cookie past session

So I have a nextjs app using supabase auth and my users sign up/in using a magic link which adds a session cookie to their browser. And to authenticate a user on a page I just call the supabase server client and pass it the cookies from next/headers and call the getUser() function. No where do I have access to edit these cookies (or do I?). So my problem is that cookie that supabase creates has an expiry/max age of "session" so my user gets signed out everytime they close the browser (ie end a session). How do I edit that and make it never expire?...

Best way to fetch a range of items

So I’m creating a game using T3+Planetscale where players get a score, I’m currently working on the leaderboard component, where after a player gets a Score, their score is displayed something like: person 1: 3.456 person 2: 3.768 Person 3 :4.523...

Get image size using UploadThing

Hey all, trying to get the image size of a file when a client uploads. Any recommendations? I'm thinking it could be done client size, before the file gets uploaded then meta info passed to uploadthing. Not sure how to do this 'before' the upload when using the UploadThing API. Theres onUploadProgress onClientUploadComplete and onUploadError, but no sort of preflight callback where I can read the file's buffer. Another option could be server side, once the file is uploaded, call a server function which gets passed the uploadthing url and does a HTTP get to work out the size....

Creating logout as next-auth?

Hey, so I was wondering how I could achieve something like next-auth logout/signout? I have a simple project that just stores a jwt token as a cookie. And I want it to be just like in next-auth, where you log out in one chrome tab, then it automatically logs out in any other open chrome tab. Could anyone explain to me how they achieve this?...

Next-Auth

If you use T3 stack with the default auth settings and Oauth providers. does it auto refresh ? Or do you have to implement things for it?

Struggling to Integrate Stripe for Payments in TypeScript Next.js E-Commerce App

Hello everyone, I've been working on a T3 app and I'm having trouble integrating Stripe for payments. Despite trying different approaches, I haven't been able to get it to work properly. Here's a breakdown of what I've tried and the issues I'm facing: - Stripe Quickstart: I initially followed the Stripe Quickstart guide, but it's written in JavaScript, and trying to add TypeScript types caused a lot of errors. Unfortunately, I'm not confident in my ability to add types correctly without causing more issues....

containerization

Im thinking about implementing multiple techs/languages in a monolith. Does the containerization makes it possible

Issue with UploadThing

I'll start saying that uploadThing is 🔥 I'm trying to add a cron job to delete all unlinked images. I'm using utapi.listFiles() and I see more images than what I see on the dashboard. I'm trying to use those fileKeys to delete the unlinked ones, i get a success:true answer but I can still see those files on the dashboard. Are you aware of a problem or do you think i'm doing something wrong?...

Adding roles to Next Auth when using Discord or Facebook providee

How can I add a role to a user. I have 2 admins and the rest are normal users.

How to make a lists of multiple data types with overlapping IDs

I have types Foo and Bar and I want to show a list containing elements of both. The problem is that both Foo and Bar begin incrementing IDs from 0, so I can't set key={foobar.id} . I would like each key to be foo-${foobar.id} if the object is of type Foo OR bar-${foobar.id} if the object is of type Bar. I tried Googling this and I tried instanceof and is in a ternary, but I still couldn't get it to work....

Hydration Failed Error in Next.js: Mismatch Between Server and Client Rendered HTML

Hello fellow developers, I've been working on a Next.js application, and I've encountered a "Hydration Failed" error that I'm struggling to resolve. The issue arises when the initial UI rendered on the server doesn't match what's rendered on the client, particularly when dealing with small screen sizes. This Code is to render some Initial items on the left that you can click on and see a detailed view on the right(not implemented yet). On small screens I want to just redirect to the details page for that particular item instead....

How to implement session-based auth in NextJS13 without services like Nextauth/clerk/supabase etc

I want to have session based authentication for my small SaaS prototype side projects, and I want to just make it without having to worry about inescapable tradeoffs or breaking updates of auth services.
The thing is, I don't know enough about security/networking practices to understand exactly all the bases I need to cover. Like cross-site-request-forgery etc I have no idea about how to take precaution against. I also don't know the go-to libraries for creating cookies and storing cookies on the client or how any of that works. Does anyone have any resources or experience making auth from scratch in next13 that they could share on how to do something like this? Or is this path even recommended if my goal is to just quickly build, iterate, and market SaaS applications as a solo developer?...

Fetching data from API endpoints

Is there a way to fetch data from client Component without exposing API endpoints on frontend?

Database Table Design/Layout for Analytics type data?

I am looking to store views and clicks, with the possibility of other types of data moving into the future. I understand a rough idea, but can't quiet comprehend the best way to layout this data. There are lots of ways to do it, but whats the right way? Googling hasn't helped me find much of any use. ...

Typescript errors with `cloneElement`

Hi all 👋 So while building my app I faced an issue that really put my UI at test. As I am sure many of you already experienced, the design of our application (even if we're the ones creating it) is able to account only for a small amount of cases. For example, I designed a card where the text can grow quite a lot and am figuring out the best approach....

Performance of Prisma

is using Prisma in production save ? I have heard so much negativity regarding ORM . One argument with which they come up is if you really want to use ORM use raw query instead of ORM native function ? Is there a really performance lacking in native ORM functions.

error passing props to client component?

What’s wrong with the way I’m trying to pass in two strings as props to this client component?
No description

TrPC + Express + Next 13

src/app/api/trpc/[trpc]/route.ts ```ts import { FetchCreateContextFnOptions, fetchRequestHandler,...

Authenicating API routes to be only be request by same-origin Nextjs 13

So i am looking to lock down some of my API routes to be only requested by my domain and any subdomains but not any other person that might try to do the same. How would i do something like this in Nextjs 13 app router?...

How To Reduce Bundle Size For Edge?

Error: The Edge Function "index" size is 1.08 MB and your plan size limit is 1 MB. What function is "index"? Does that mean my route "/" is too big? But none of my route is even close to 1mb. Does it just add every route together?...
No description