Tarky Posts - Answer Overflow

Tarky

Explore posts from servers

CDCloudflare Developers TtRPC TTCTheo's Typesafe Cult CCConvex Community

•Created by Tarky on 12/27/2024 in #support-community

Convex Auth with Google Provider

I managed to setup the Google provider for the Convex Auth, the problem I am facing is that whenever I try to render some UI based on the user auth state, it seems that is not working, it keeps showing the Google button, here is my code in Nextjs

"use client";

import { Authenticated, Unauthenticated, AuthLoading } from "convex/react";
import { useAuthActions } from "@convex-dev/auth/react";
import { Button } from "@/components/ui/button";

export default function SignInOrSignOut() {
  const { signIn, signOut } = useAuthActions();

  return (
    <>
      <AuthLoading>Loading...</AuthLoading>
      <Unauthenticated>
        <Button
          className="flex-1"
          variant="outline"
          type="button"
          onClick={() => void signIn("google", { redirectTo: "/" })}
        >
          Google
        </Button>
      </Unauthenticated>
      <Authenticated>
        <Button
          className="flex-1"
          variant="outline"
          type="button"
          onClick={() => void signOut()}
        >
          Sing out
        </Button>
      </Authenticated>
    </>
  );
}

"use client";

import { Authenticated, Unauthenticated, AuthLoading } from "convex/react";
import { useAuthActions } from "@convex-dev/auth/react";
import { Button } from "@/components/ui/button";

export default function SignInOrSignOut() {
  const { signIn, signOut } = useAuthActions();

  return (
    <>
      <AuthLoading>Loading...</AuthLoading>
      <Unauthenticated>
        <Button
          className="flex-1"
          variant="outline"
          type="button"
          onClick={() => void signIn("google", { redirectTo: "/" })}
        >
          Google
        </Button>
      </Unauthenticated>
      <Authenticated>
        <Button
          className="flex-1"
          variant="outline"
          type="button"
          onClick={() => void signOut()}
        >
          Sing out
        </Button>
      </Authenticated>
    </>
  );
}

Also when I try to click this button again, I get the following error:

Hit error while running `auth:signIn`:
[Error: {"code":"Unauthenticated","message":"Could not verify token claim"}]
 ✓ Compiled /_not-found in 370ms (691 modules)

Hit error while running `auth:signIn`:
[Error: {"code":"Unauthenticated","message":"Could not verify token claim"}]
 ✓ Compiled /_not-found in 370ms (691 modules)

And then if I click it for a second time, it redirects me back to the google OAuth screen, any ideas?

11 replies

TTCTheo's Typesafe Cult

•Created by Tarky on 6/18/2024 in #questions

Brand new T3 stack project warnings

11 replies

CDCloudflare Developers

•Created by Tarky on 6/11/2024 in #general-help

How to add a www CNAME that points to my root domain?

I have a proxied domain in cloudflare, added the following DNS record: TYPE: CNAME NAME: www CONTENT: @ But when I try to access my domain using www it cannot be found 404 Any ideas?

8 replies

TTCTheo's Typesafe Cult

•Created by Tarky on 5/30/2024 in #questions

How do you add a new field to Session User in NextAuth using T3 stack?

I added this in my auth.ts

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

    interface User extends DefaultUser {
        credits: number;
    }
}

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

    interface User extends DefaultUser {
        credits: number;
    }
}

Then in my session callback

callbacks: {
        session: ({ session, user }) => ({
            ...session,
            user: {
                ...session.user,
                id: user.id,
                credits: user.credits,
            },
        }),
    },

callbacks: {
        session: ({ session, user }) => ({
            ...session,
            user: {
                ...session.user,
                id: user.id,
                credits: user.credits,
            },
        }),
    },

And still I am not being able to retrieve this credits field from the user table in my DB. Here's my user table created with Drizzle

export const users = createTable('user', {
    id: varchar('id', { length: 255 }).notNull().primaryKey(),
    name: varchar('name', { length: 255 }),
    email: varchar('email', { length: 255 }).notNull(),
    emailVerified: timestamp('emailVerified', {
        mode: 'date',
    }).default(sql`CURRENT_TIMESTAMP`),
    image: varchar('image', { length: 255 }),
    credits: integer('credits').default(0),
});

export const users = createTable('user', {
    id: varchar('id', { length: 255 }).notNull().primaryKey(),
    name: varchar('name', { length: 255 }),
    email: varchar('email', { length: 255 }).notNull(),
    emailVerified: timestamp('emailVerified', {
        mode: 'date',
    }).default(sql`CURRENT_TIMESTAMP`),
    image: varchar('image', { length: 255 }),
    credits: integer('credits').default(0),
});

2 replies

TTCTheo's Typesafe Cult

•Created by Tarky on 4/18/2024 in #questions

Guide to upgrade from Pages router to App router

Is there a guide somewhere to convert a T3 stack app from pages router to app router? I am currently developing an app but I feel that if I dont change it to the approuter I will be missing important stuff or improvements in Next.js. - TypeScript - tRCP - NextAuth - Prisma w/ Supabase

2 replies

TtRPC

•Created by Tarky on 10/9/2023 in #❓-help

Error while creating a mutation in NextJS

I am having the following error:

"message": "No \"query\"-procedure on path \"checkout.stripe\"",
"code": -32004,

"message": "No \"query\"-procedure on path \"checkout.stripe\"",
"code": -32004,

Here is my code:

import { createTRPCRouter, publicProcedure } from "@/server/api/trpc";

export const checkoutRouter = createTRPCRouter({
  stripe: publicProcedure.mutation(() => {
    return "Hello";
  }),
});

import { createTRPCRouter, publicProcedure } from "@/server/api/trpc";

export const checkoutRouter = createTRPCRouter({
  stripe: publicProcedure.mutation(() => {
    return "Hello";
  }),
});

If I go to http://localhost:3000/api/trpc/checkout.stripe it throws that error, any ideas?

9 replies

Gaming

Programming