Tarky Posts - Convex Community

Tarky

•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