Tarky•2mo ago

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?

7 Replies

Convex Bot•2mo ago

Thanks for posting in <#1088161997662724167>. Reminder: If you have a Convex Pro account, use the Convex Dashboard to file support tickets. - Provide context: What are you trying to achieve, what is the end-user interaction, what are you seeing? (full error message, command output, etc.) - Use search.convex.dev to search Docs, Stack, and Discord all at once. - Additionally, you can post your questions in the Convex Community's <#1228095053885476985> channel to receive a response from AI. - Avoid tagging staff unless specifically instructed. Thank you!

TarkyOP•2mo ago

I followed these docs: https://labs.convex.dev/auth/config/oauth/google

erquhart•2mo ago

Can you confirm your env vars in the Convex dashboard for your dev deployment (assuming you're working on dev right now) You should see JWKS looking something like:

{"keys":[{"use":"sig","kty":"RSA","n":"5GiZ-HX...

{"keys":[{"use":"sig","kty":"RSA","n":"5GiZ-HX...

And JWT_PRIVATE_KEY like:

-----BEGIN PRIVATE KEY----- MIIE...

-----BEGIN PRIVATE KEY----- MIIE...

no quotes around either value

TarkyOP•2mo ago

Yep, I have both of those vars

TarkyOP•2mo ago

TarkyOP•2mo ago

It is weid, I see the sessions are created, but for some reason they dont work

erquhart•2mo ago

Is your app something that you can share in a public repo? Otherwise, can you share more of the related code? convex/auth.ts, convex/auth.config.ts for starters

Convex Auth with Google Provider

Did you find this page helpful?