T3 Stack Tutorial - FROM 0 TO PROD FOR $0 (Next.js, tRPC, TypeScript, Tailwind, Prisma & More)

Theo - t3․gg · 541K views · 2023 · 2:59:03

Open on YouTube

Web developmentSoftware architecture & designtutorialdated

Why Stack Overflow recommends it

Stack Overflow users link it as the tutorial they were following when they hit problems with Clerk auth, tRPC context and middleware setup, and as a source for how Clerk is wired into a T3 app.

Recommended by 0 people across 0 different months, 2023 to 2023.

What it is

A nearly three-hour build-along by Theo (t3.gg) that takes a Twitter-style app called Chirp from zero to a deployed production site using the T3 stack: Next.js, tRPC, TypeScript, Tailwind and Prisma. It also covers Clerk auth, PlanetScale, Vercel, Upstash rate limiting, Zod validation and server-side helpers.

What people said

Cites Sujio · 2023-05 · Stack Overflow · on “Clerk redirecting to localhost after authentication”

On my production site hosted on vercel, after authentication with clerk, it redirects me to localhost. This only happens on the laptop I'm using for development. If I connect to the production site on another device, it correctly redirects me back to the production site hosted on vercel after authentication. I'm following a tutorial for the t3 stack here: [this video] I'm new to this stack and using nextJS + vercel + clerk so I'm not sure where to even begin. I'll upload any needed code. Thank you.

Cites crevulus · 2023-06 · Stack Overflow · on “How can I get supabase auth user data on my tRPC context?”

I'm making an application using the t3 [LINK] stack: next, prisma, tRPC. I'm following along with a certain tutorial [this video] that uses Clerk for auth and I'm using Supabase Auth instead. In the file where I define my tRPC procedure (i.e. setting up createTRPCContext ) I need to get access to session data in my tRPC context which I can then pass through into my tRPC router. The author of the tutorial does this with Clerk's getAuth , but it's unclear how to do this with supabase. The docs recommend using await supabase.auth.getSession(); to get session data. But in order to create an instance of supabase I figured I can either use the provided hooks or createServerSupabaseClient method. Hooks

Cites Moe · 2023-07 · Stack Overflow · on “NextJs with Clerk Auth. Uncaught (in promise) Error: Clerk: Failed to load Clerk”

I am not sure if this might be of any help but I'm working on a next.js project and I got clerk set up correctly and this is the content of my middleware.ts file that lives in the root directory: import { withClerkMiddleware } from "@clerk/nextjs/server"; import { NextResponse } from "next/server"; export default withClerkMiddleware(() => { //console.log("middleware running..."); return NextResponse.next(); }); export const config = { matcher: ["/(.*?trpc.*?|(?!static|.*\\..*|_next|favicon.ico).*)", "/"], }; My little knowledge about Clerk comes from Theo's video here ( [this video] ) and I think his version of the code from that video wouldn't run and I had to use this version of the middleware

Cites Ebenezer Zergabachew · 2023-10 · Stack Overflow · on “Clerk authMiddleware throwing errors with publicRoutes when signed out”

I began learning the T3 stack following this tutorial: [this video] I have middleware thats supposed to send users to a sign in page when they're logged out. I'm using Clerk for this. I wanted to have the index be a public route so that it doesnt require a sign in. I was following the Clerk documentation for this in my middleware.ts file. Here's the code for that. import { authMiddleware } from "@clerk/nextjs"; export default authMiddleware({ // "/" will be accessible to all users publicRoutes: ["/"] }); export const config = { matcher: ['/((?!.+\\.[\\w]+$|_next).*)', '/', '/(api|trpc)(.*)'], }; Screenshot of error message [LINK] This problem only exists when the user is signed out. If I'm signed