Thoo Posts - Answer Overflow

Thoo

•Created by Thoo on 4/2/2024 in #questions

Extending next-auth user

I'm trying to extend the next-auth user but somehow It's not returning new fields, and I only have this with drizzle with prisma It's working fine.

declare module "next-auth" {
  interface Session extends DefaultSession {
    user: {
      id: string;
      // ...other properties
      displayName: string;
    } & DefaultSession["user"];
  }

  interface User {
    // ...other properties
    displayName: string;
  }
}

  callbacks: {
    session: ({ session, user }) => {
      console.log(user);
      console.log(user.displayName);

      return {
        ...session,
        user: {
          ...session.user,
          displayName: user.displayName,
          id: user.id,
        },
      };
    },
  },

declare module "next-auth" {
  interface Session extends DefaultSession {
    user: {
      id: string;
      // ...other properties
      displayName: string;
    } & DefaultSession["user"];
  }

  interface User {
    // ...other properties
    displayName: string;
  }
}

  callbacks: {
    session: ({ session, user }) => {
      console.log(user);
      console.log(user.displayName);

      return {
        ...session,
        user: {
          ...session.user,
          displayName: user.displayName,
          id: user.id,
        },
      };
    },
  },

Output:

{
  id: '965a6ae9-375f-40df-a527-af2e5a31db83',
  name: 'thoo0224',
  email: 'xxx@gmail.com',
  emailVerified: 2024-04-02T14:34:00.000Z,
  image: 'https://cdn.discordapp.com/xxx'
}
undefined

{
  id: '965a6ae9-375f-40df-a527-af2e5a31db83',
  name: 'thoo0224',
  email: 'xxx@gmail.com',
  emailVerified: 2024-04-02T14:34:00.000Z,
  image: 'https://cdn.discordapp.com/xxx'
}
undefined

6 replies

TTCTheo's Typesafe Cult

•Created by Thoo on 11/12/2023 in #questions

Can't use edge with create-t3-turbo

When I'm trying to use edge with create-t3-turbo I'm getting this error:

⨯ Internal error: TypeError: Cannot read properties of undefined (reading '')
    at resolveClientReference (../../node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.development.js:53:55)
    at resolveModule (../../node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.development.js:1588:35)
    at processFullRow (../../node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.development.js:1648:25)
    at processBinaryChunk (../../node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.development.js:1751:21)
    at progress (../../node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.development.js:1819:17)
[TypeError: Cannot read properties of undefined (reading '')]
 ⨯ [TypeError: Cannot read properties of undefined (reading '')]
 ⨯ [TypeError: Cannot read properties of null (reading 'default')]

⨯ Internal error: TypeError: Cannot read properties of undefined (reading '')
    at resolveClientReference (../../node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.development.js:53:55)
    at resolveModule (../../node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.development.js:1588:35)
    at processFullRow (../../node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.development.js:1648:25)
    at processBinaryChunk (../../node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.development.js:1751:21)
    at progress (../../node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-client.edge.development.js:1819:17)
[TypeError: Cannot read properties of undefined (reading '')]
 ⨯ [TypeError: Cannot read properties of undefined (reading '')]
 ⨯ [TypeError: Cannot read properties of null (reading 'default')]

I'm not using any libraries, I removed everything It's just a blank layout and page but I'm still getting this error. (And somehow it works fine on Vercel)

2 replies

TTCTheo's Typesafe Cult

•Created by Thoo on 11/8/2023 in #questions

Next-Auth extending user

When I try to extend the user interface of next-auth I'm getting this error on the adapter in NextAuthOptions:

Property 'credits' is missing in type 'import("C:/Users/Thoma/Desktop/iconmasterai/node_modules/.pnpm/@auth+core@0.12.0/node_modules/@auth/core/adapters").AdapterUser' but required in type 'import("C:/Users/Thoma/Desktop/iconmasterai/node_modules/.pnpm/next-auth@4.23.0_next@14.0.0_react-dom@18.2.0_react@18.2.0/node_modules/next-auth/adapters").AdapterUser'.

Property 'credits' is missing in type 'import("C:/Users/Thoma/Desktop/iconmasterai/node_modules/.pnpm/@auth+core@0.12.0/node_modules/@auth/core/adapters").AdapterUser' but required in type 'import("C:/Users/Thoma/Desktop/iconmasterai/node_modules/.pnpm/next-auth@4.23.0_next@14.0.0_react-dom@18.2.0_react@18.2.0/node_modules/next-auth/adapters").AdapterUser'.

code:

declare module "next-auth" {
  interface Session extends DefaultSession {
    user: {
      id: string;
      credits: number;
    } & DefaultSession["user"];
  }

  interface User {
    credits: number;
  }
}

export const authOptions: NextAuthOptions = {
  callbacks: {
    session: ({ session, user }) => ({
      ...session,
      user: {
        ...session.user,
        id: user.id,
      },
    }),
  },
  adapter: DrizzleAdapter(db),
  providers: [
    DiscordProvider({
      clientId: env.DISCORD_CLIENT_ID,
      clientSecret: env.DISCORD_CLIENT_SECRET,
    }),
  ],
};

declare module "next-auth" {
  interface Session extends DefaultSession {
    user: {
      id: string;
      credits: number;
    } & DefaultSession["user"];
  }

  interface User {
    credits: number;
  }
}

export const authOptions: NextAuthOptions = {
  callbacks: {
    session: ({ session, user }) => ({
      ...session,
      user: {
        ...session.user,
        id: user.id,
      },
    }),
  },
  adapter: DrizzleAdapter(db),
  providers: [
    DiscordProvider({
      clientId: env.DISCORD_CLIENT_ID,
      clientSecret: env.DISCORD_CLIENT_SECRET,
    }),
  ],
};

2 replies

TTCTheo's Typesafe Cult

•Created by Thoo on 10/22/2023 in #questions

Revalidation

When I visit my pages, it fetches data and when I navigate back it doesn't fetch or rerender it. However after like 30 seconds every time I navigate to my page it rerenders, it shouldnt do that right? Also, when using revalidatePath it doesn't matter what I pass with it, It just revalidates every single page.

6 replies

TTCTheo's Typesafe Cult

•Created by Thoo on 8/30/2023 in #questions

trpc nextjs

anyone knows how to get nextauth session in trcp context in a caller? trying to get trpc working on server components but getting headers() expects to have requestAsyncStorage, none available

2 replies

TTCTheo's Typesafe Cult

•Created by Thoo on 6/6/2023 in #questions

Updating data

This is my server component:

export default async function Collection() {
  const session = await getAuthSession();
  const icons = await prisma.icon
    .findMany({
      where: {
        userId: session?.user?.id!,
      },
      select: {
        id: true,
        prompt: true,
        finalPrompt: true,
        createdAt: true,
      },
    })
    .then((x) =>
      x.sort((a, b) => b.createdAt.getTime() - a.createdAt.getTime())
    );

  return (
    <div className="flex justify-center">
      <div className="max-w-xl w-full text-center">
        <h1 className="text-4xl font-extrabold mb-10">Your Collection</h1>
        <IconList initialIcons={icons} />
      </div>
    </div>
  );
}

export default async function Collection() {
  const session = await getAuthSession();
  const icons = await prisma.icon
    .findMany({
      where: {
        userId: session?.user?.id!,
      },
      select: {
        id: true,
        prompt: true,
        finalPrompt: true,
        createdAt: true,
      },
    })
    .then((x) =>
      x.sort((a, b) => b.createdAt.getTime() - a.createdAt.getTime())
    );

  return (
    <div className="flex justify-center">
      <div className="max-w-xl w-full text-center">
        <h1 className="text-4xl font-extrabold mb-10">Your Collection</h1>
        <IconList initialIcons={icons} />
      </div>
    </div>
  );
}

In my api route I add a new icon, how do I update it in this component?

1 replies

Gaming

Programming