Theo's Typesafe Cult•13mo ago

tRPC API calls log user out automatically

Whenever I call a tRPC API route (protected or public), I immediately get logged out. I have no idea what I'm doing wrong. Here's my code:

// [...nextauth].ts
import NextAuth from "next-auth";
import { NextAuthOptions } from "next-auth";
import GoogleProvider from "next-auth/providers/google";

export const authOptions: NextAuthOptions = {
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID!,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET!,
    }),
  ],
  secret: process.env.NEXTAUTH_SECRET!,
};

export default NextAuth(authOptions);

// [...nextauth].ts
import NextAuth from "next-auth";
import { NextAuthOptions } from "next-auth";
import GoogleProvider from "next-auth/providers/google";

export const authOptions: NextAuthOptions = {
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID!,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET!,
    }),
  ],
  secret: process.env.NEXTAUTH_SECRET!,
};

export default NextAuth(authOptions);

// post.ts (in server/api/routers)
import { z } from "zod";
import { createTRPCRouter, protectedProcedure } from "~/server/api/trpc";

export const postRouter = createTRPCRouter({
  create: protectedProcedure
    .input(z.object({ content: z.string() }))
    .mutation(async ({ input: { content }, ctx }) => {
      const post = await ctx.prisma.post.create({
        data: {
          content,
          userId: ctx.session.user.id,
        },
      });

      return post;
    }),
});

// post.ts (in server/api/routers)
import { z } from "zod";
import { createTRPCRouter, protectedProcedure } from "~/server/api/trpc";

export const postRouter = createTRPCRouter({
  create: protectedProcedure
    .input(z.object({ content: z.string() }))
    .mutation(async ({ input: { content }, ctx }) => {
      const post = await ctx.prisma.post.create({
        data: {
          content,
          userId: ctx.session.user.id,
        },
      });

      return post;
    }),
});

// NewPost.tsx (in components)
const createPost = api.post.create.useMutation({
  onSuccess: (newPost) => {
    setInputValue("");
  },
});

function handleSubmit(e: FormEvent) {
  e.preventDefault();
  createPost.mutate({ content: inputValue });
}

// NewPost.tsx (in components)
const createPost = api.post.create.useMutation({
  onSuccess: (newPost) => {
    setInputValue("");
  },
});

function handleSubmit(e: FormEvent) {
  e.preventDefault();
  createPost.mutate({ content: inputValue });
}

Solution:

Hm, this verifies what I was wondering. Is the repo open source

Jump to solution

4 Replies

Josh•13mo ago

Do you have some weird middleware somewhere doing some sort of side effect? This code looks fine from what I can tell Do you also have the right context providers set up in the root of your component tree for next auth?

Ammar Pasha•13mo ago

I don't have any middleware (unless it came with create-t3-app) Could you elaborate? I'm fairly new to web development Here's my _app.tsx if this is what you mean:

const MyApp: AppType<{ session: Session | null }> = ({
  Component,
  pageProps: { session, ...pageProps },
}) => {
  return (
    <SessionProvider session={session}>
      <Layout session={session}>
        <Component {...pageProps} />
      </Layout>
    </SessionProvider>
  );
};

export default api.withTRPC(MyApp);

const MyApp: AppType<{ session: Session | null }> = ({
  Component,
  pageProps: { session, ...pageProps },
}) => {
  return (
    <SessionProvider session={session}>
      <Layout session={session}>
        <Component {...pageProps} />
      </Layout>
    </SessionProvider>
  );
};

export default api.withTRPC(MyApp);

I have tried removing the layout but I still get the same outcome.

Solution

Josh•13mo ago

Hm, this verifies what I was wondering. Is the repo open source

Ammar Pasha•13mo ago

I ended up copying each file one by one to a new project and that fixed the issue 🤷‍♂️ thanks for the help!

Gaming

Programming

tRPC API calls log user out automatically