LaunchThat.AppL
tRPC•2y ago•
3 replies
LaunchThat.App

Thoughts on how to integrate t3 app, connectkit web3 auth, nextjs middleware, and trpc

I am prototyping an application using t3 app with trpc, connectkit web3 auth.

I am wanting to use nextjs middleware to protect routes server side.

As part of the connectkit auth flow, I have my application wrapped in a ClientProvider:
// layout.tsx
 <body
        className={`font-sans ${inter.variable} flex min-h-screen flex-1 items-center justify-center bg-gradient-to-b from-[#2e026d] to-[#15162c] text-white`}
      >
        <TRPCReactProvider headers={headers()}>
          <ClientProvider>{children}</ClientProvider>
        </TRPCReactProvider>
      </body>


Inside ClientProvider I have the web3 providers:

// ClientProvider.tsx
...
return (
    <WagmiConfig config={config}>
      <SIWEProvider {...siweConfig} onSignIn={() => router.push("/")}>
        <ConnectKitProvider>{children}</ConnectKitProvider>
      </SIWEProvider>
    </WagmiConfig>
  );


and here is const siwiConfig. It calls the /siwe route on initial load and sets a cookie using iron-session with the nonce inside, then updates that same cookie after authentiucation with wallet address and chain:
Was this page helpful?