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
Josh2y 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
Ammar Pasha2y 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
Josh2y ago
Hm, this verifies what I was wondering. Is the repo open source
Ammar Pasha
Ammar Pasha2y ago
I ended up copying each file one by one to a new project and that fixed the issue 🤷‍♂️ thanks for the help!
Want results from more Discord servers?
Add your server