craftzcode Posts - Answer Overflow

craftzcode

Explore posts from servers

TtRPC TTCTheo's Typesafe Cult HHono BABetter Auth

Posts Comments

TtRPC

•Created by craftzcode on 4/13/2025 in #❓-help

Throwing error in trpc route, continuously sending a request

1 replies

TTCTheo's Typesafe Cult

•Created by craftzcode on 4/12/2025 in #questions

Always failed to fetch the image url

1 replies

BABetter Auth

•Created by craftzcode on 4/11/2025 in #help

Problem When Updating the User in the Session

8 replies

BABetter Auth

•Created by craftzcode on 4/8/2025 in #help

Is there an expiration of the email verification token?

I need to determine whether the email verification token expires. If it does, I plan to create a dedicated "Account Confirmation" page that indicates when the token has expired and displays a "Resend activation link" button. Additionally, I want to know the duration (in hours) for which the token is valid and how to capture an error if the token has expired.

38 replies

BABetter Auth

•Created by craftzcode on 4/7/2025 in #help

Issues with Skeleton Loading Not Displaying for Session-Based Components

6 replies

BABetter Auth

•Created by craftzcode on 4/6/2025 in #help

What is the best approach when handling the protected and unprotected routes

I designed a layout for the sign in and sign up pages with the goal of redirecting any authenticated user straight to the home page (/). However, when I navigate to either the sign in or sign up page while already having an active session, the page content briefly renders before the redirect occurs. Additionally, I encounter the following error:

Cannot update a component (`Router`) while rendering a different component (`AuthLayout`). To locate the bad setState() call inside `AuthLayout`, follow the stack trace as described in https://react.dev/link/setstate-in-render

Cannot update a component (`Router`) while rendering a different component (`AuthLayout`). To locate the bad setState() call inside `AuthLayout`, follow the stack trace as described in https://react.dev/link/setstate-in-render

Here is the relevant code:

'use client'

import Link from 'next/link'
import { usePathname, useRouter } from 'next/navigation'

import { authClient } from '@/auth/auth-client'

import { Logo } from '@/components/navigation-bar/logo'
import { Button } from '@/components/ui/button'

export const AuthLayout = ({ children }: { children: React.ReactNode }) => {
  const { data: session } = authClient.useSession()

  const router = useRouter()
  const pathname = usePathname()
  const isSignIn = pathname === '/sign-in'

  if (session) {
    router.push('/')
  }

  return (
    <div className='flex min-h-screen flex-col'>
      <header>
        <nav className='flex h-13 items-center justify-between px-4'>
          <Logo />

          {isSignIn ? (
            <Button variant='outline' asChild>
              <Link href='/sign-up'>Sign Up</Link>
            </Button>
          ) : (
            <Button variant='outline' asChild>
              <Link href='/sign-in'>Sign In</Link>
            </Button>
          )}
        </nav>
      </header>
      <div className='flex flex-1 flex-col items-center justify-center'>{children}</div>
    </div>
  )
}

'use client'

import Link from 'next/link'
import { usePathname, useRouter } from 'next/navigation'

import { authClient } from '@/auth/auth-client'

import { Logo } from '@/components/navigation-bar/logo'
import { Button } from '@/components/ui/button'

export const AuthLayout = ({ children }: { children: React.ReactNode }) => {
  const { data: session } = authClient.useSession()

  const router = useRouter()
  const pathname = usePathname()
  const isSignIn = pathname === '/sign-in'

  if (session) {
    router.push('/')
  }

  return (
    <div className='flex min-h-screen flex-col'>
      <header>
        <nav className='flex h-13 items-center justify-between px-4'>
          <Logo />

          {isSignIn ? (
            <Button variant='outline' asChild>
              <Link href='/sign-up'>Sign Up</Link>
            </Button>
          ) : (
            <Button variant='outline' asChild>
              <Link href='/sign-in'>Sign In</Link>
            </Button>
          )}
        </nav>
      </header>
      <div className='flex flex-1 flex-col items-center justify-center'>{children}</div>
    </div>
  )
}

8 replies

BABetter Auth

•Created by craftzcode on 4/6/2025 in #help

Better Auth Error Session data is too large to store in the cookie

I'm always getting this error whenever I tried to sign up.

# SERVER_ERROR:  [Error [BetterAuthError]: Session data is too large to store in the cookie. Please disable session cookie caching or reduce the size of the session data] {
  cause: undefined
}

# SERVER_ERROR:  [Error [BetterAuthError]: Session data is too large to store in the cookie. Please disable session cookie caching or reduce the size of the session data] {
  cause: undefined
}

Here's my auth instance

import { db } from '@/db' // your drizzle instance
import { account, session, user, verification } from '@/db/schema/auth'

import { betterAuth } from 'better-auth'
import { drizzleAdapter } from 'better-auth/adapters/drizzle'

export const auth = betterAuth({
  database: drizzleAdapter(db, {
    provider: 'pg', // or "mysql", "sqlite"
    schema: {
      user,
      account,
      session,
      verification
    }
  }),
  emailAndPassword: {
    enabled: true,
    async sendResetPassword(data, request) {
      // Send an email to the user with a link to reset their password
    }
  },
  advanced: {
    generateId: false // Disable default id generation
  }
  session: {
    cookieCache: {
      enabled: true,
      maxAge: 5 * 60 // Cache duration in seconds
    }
  }
})

import { db } from '@/db' // your drizzle instance
import { account, session, user, verification } from '@/db/schema/auth'

import { betterAuth } from 'better-auth'
import { drizzleAdapter } from 'better-auth/adapters/drizzle'

export const auth = betterAuth({
  database: drizzleAdapter(db, {
    provider: 'pg', // or "mysql", "sqlite"
    schema: {
      user,
      account,
      session,
      verification
    }
  }),
  emailAndPassword: {
    enabled: true,
    async sendResetPassword(data, request) {
      // Send an email to the user with a link to reset their password
    }
  },
  advanced: {
    generateId: false // Disable default id generation
  }
  session: {
    cookieCache: {
      enabled: true,
      maxAge: 5 * 60 // Cache duration in seconds
    }
  }
})

5 replies

TtRPC

•Created by craftzcode on 4/1/2025 in #❓-help

Prefetching with tRPC: Using hono.js/Express adapter and Next.js

If I use Hono.js or Express as the adapter for tRPC and my frontend is Next.js, will I be able to utilize the prefetch features referenced in Set up with React Server Components

1 replies

TtRPC

•Created by craftzcode on 3/31/2025 in #❓-help

What is the best approach when using monorepo with tTPC

What is the best approach when configuring tRPC inside of monorepo? I would like it to be used in Next.js, I create an internal library for tRPC example packages/api so I can call it anywhere in monorepo, now I would like to know where exactly is the best place for the client.tsx and for the tRPC caller for Server Components which is the server.tsx can I place it also inside of the internal library of tRPC or I will place it inside of Next.js which is on apps/web.

1 replies

TtRPC

•Created by craftzcode on 3/31/2025 in #❓-help

Troubleshooting createTRPCOptionsProxy with Server Components and Context Passing

1 replies

HHono

•Created by craftzcode on 3/30/2025 in #help

Integrating Hono.js with tRPC in Next.js: Routing and Context Considerations

I want to combine Hono.js with tRPC. I followed the guide on the 3rd party middleware made by hono for a tRPC server, and now I have set up the hono tRPC server 3rd party middleware similar to the code below:

import { Hono } from 'hono'
import { trpcServer } from '@hono/trpc-server' // Deno 'npm:@hono/trpc-server'
import { appRouter } from './router'

const app = new Hono()

app.use(
  '/trpc/*',
  trpcServer({
    router: appRouter,
  })
)

export default app

import { Hono } from 'hono'
import { trpcServer } from '@hono/trpc-server' // Deno 'npm:@hono/trpc-server'
import { appRouter } from './router'

const app = new Hono()

app.use(
  '/trpc/*',
  trpcServer({
    router: appRouter,
  })
)

export default app

I used Hono.js as a web server because I wanted to achieve the light and ultrafast web server capabilities of Hono.js. I got confused with the documentation for tRPC and Hono.js because, with tRPC, they also have their own API route setup in Next.js specifically, the route at src/app/api/trpc/[trpc]/route, and Hono.js also has its own API route setup in Next.js namely, the route at src/app/api/[[...route]]/route.ts. So, I don’t know which one I should follow to use the 3rd party library created by Hono.js, which is @hono/trpc-server. Now, where should I place this code in Next.js? Should it go in app/api/[[...route]]/route.ts or in app/api/trpc/[trpc]/route.ts? Also, what is the best approach regarding context—should I use the tRPC context or the Hono.js context?

2 replies

TtRPC

•Created by craftzcode on 3/30/2025 in #❓-help

Integrating hono.js with tRPC in Next.js: Routing and Context Considerations

import { Hono } from 'hono'
import { trpcServer } from '@hono/trpc-server' // Deno 'npm:@hono/trpc-server'
import { appRouter } from './router'

const app = new Hono()

app.use(
  '/trpc/*',
  trpcServer({
    router: appRouter,
  })
)

export default app

import { Hono } from 'hono'
import { trpcServer } from '@hono/trpc-server' // Deno 'npm:@hono/trpc-server'
import { appRouter } from './router'

const app = new Hono()

app.use(
  '/trpc/*',
  trpcServer({
    router: appRouter,
  })
)

export default app

Now, where should I place this code in Next.js? Should it go in app/api/[[...route]]/route.ts or in app/api/trpc/[trpc]/route.ts? Also, what is the best approach regarding context—should I use the tRPC context or the Hono.js context?

21 replies

Gaming

Programming