tRPCttRPC
Powered by
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>
// 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>
  );
// 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:
tRPCJoin
Move Fast & Break Nothing. End-to-end typesafe APIs made easy.
5,015Members
Resources

Similar Threads

Was this page helpful?
Recent Announcements

Similar Threads

nextjs middleware trpc authentication
chicoCchico / ❓-help
16mo ago
NextJs middleware broken by tRPC
MugetsuMMugetsu / ❓-help
4y ago
how to connect trpc server (t3 stack) from my external nextjs app?
gimbledevGgimbledev / ❓-help
3y ago