Kevin•4mo ago

"Could not verify token claim" on React Native

Hi guys, I am trying to replace Clerk Auth with Convex Auth using in react native (with expo) I am testing locally, after trying to verifying code via email I got this issue Failed to authenticate: "Could not verify token claim", check your server auth config "check your server auth config" What exactly do I need to check? auth.ts

import Apple from "@auth/core/providers/apple";
import Google from "@auth/core/providers/google";
import Resend from "@auth/core/providers/resend";
import { Anonymous } from "@convex-dev/auth/providers/Anonymous";
import { convexAuth } from "@convex-dev/auth/server";

import { env } from "./env";
import { ResendOTP } from "./lib/auth/otp/email/resend_otp";

export const { auth, signIn, signOut, store } = convexAuth({
  providers: [
    Apple,
    Google,
    Anonymous,
    Resend({
      apiKey: env.RESEND_API_KEY,
      from: env.RESEND_FROM_ADDRESS,
    }),
    ResendOTP,
  ],
});

import Apple from "@auth/core/providers/apple";
import Google from "@auth/core/providers/google";
import Resend from "@auth/core/providers/resend";
import { Anonymous } from "@convex-dev/auth/providers/Anonymous";
import { convexAuth } from "@convex-dev/auth/server";

import { env } from "./env";
import { ResendOTP } from "./lib/auth/otp/email/resend_otp";

export const { auth, signIn, signOut, store } = convexAuth({
  providers: [
    Apple,
    Google,
    Anonymous,
    Resend({
      apiKey: env.RESEND_API_KEY,
      from: env.RESEND_FROM_ADDRESS,
    }),
    ResendOTP,
  ],
});

Note: I can see user is inserted in users table with this data

{
  email: "yolo09@mailinator.com",
  emailVerificationTime: 1724679714774,
}

{
  email: "yolo09@mailinator.com",
  emailVerificationTime: 1724679714774,
}

40 Replies

ballingt•4mo ago

"server auth config" is probably convex/auth.config.ts

KevinOP•4mo ago

@ballingt Thanks for looking into it my auth.config.ts

export default {
  providers: [
    {
      domain: process.env.CONVEX_SITE_URL,
      applicationID: "convex",
    },
  ],
};

export default {
  providers: [
    {
      domain: process.env.CONVEX_SITE_URL,
      applicationID: "convex",
    },
  ],
};

and CONVEX_SITE_URL is https://marvelous-llama-415.convex.site (development) I am trying to test OTP via email with the error, I have no idea to debug, I think there is something wrong when communicating between client and server while validating token but not sure where to check or debug @ballingt if you have some insight, can you give me some hint?

ballingt•4mo ago

The provider that doesn't work for you is ResendOTP? Do any others work?

KevinOP•4mo ago

yes, ResendOTP I can receive OTP via email Do any others work? => ResendOTP is first provider I am trying

ballingt•4mo ago

Which setup instructions did you follow, sounds like we might need to fix them?

KevinOP•4mo ago

https://labs.convex.dev/auth

Convex Auth - Convex Auth

Authentication library for your Convex backend

KevinOP•4mo ago

I am following this, but for React Native

ballingt•4mo ago

cool, I'll give it a shot.

KevinOP•4mo ago

Basically I think the flow is correct I mean I can receive OTP via email by resend the user is inserted correctly into users table I can get token from useAuthToken()

eyJhbGciOiJSUzI1NiJ9.eyJzdWIiOiJrMTdremh6c2IzbXd6cmNuY2Jzd2o2NTZwbjZ6amd4M3xqbjd0eWp5Y3Jic2h4NjRoZGJxZzY1cjAyaDZ6and6bSIsImlhdCI6MTcyNDY5NTQ2MywiaXNzIjoiaHR0cHM6Ly9tYXJ2ZWxvdXMtbGxhbWEtNDE1LmNvbnZleC5zaXRlIiwiYXVkIjoiY29udmV4IiwiZXhwIjoxNzI0Njk5MDYzfQ.d_fNlGYWo0cOZphDp5ri8Obh7cre-sMXbzle03ndtFzTPco6pSpu7dmY7Yj20GjE1_NkW2jqeRFaVjk6BN31WvVaIzIJn8yJ2qCxDQ7cJWaSA68Vl-IgD-39sOWhMPSM0cLnHSVaYgButbKSdFe3jdLX01T4mCKpAhrlVXIt-mHff1Sg8Q_EjrNHnjwz4D7WPawRsTgAIlN6wXL29GyJM9eVtti3SmQJgEEOfhOrXhVCnj5W-0Xm5ua19vOMQSZ9PFQsSr_2ZNOFEta2FdVZOv9wj8p5w81otKJLkwx7f3VpfIhdROLs2_pgX9ugvPevg7bafTBhyD-QMNI8Uy6Rtw

eyJhbGciOiJSUzI1NiJ9.eyJzdWIiOiJrMTdremh6c2IzbXd6cmNuY2Jzd2o2NTZwbjZ6amd4M3xqbjd0eWp5Y3Jic2h4NjRoZGJxZzY1cjAyaDZ6and6bSIsImlhdCI6MTcyNDY5NTQ2MywiaXNzIjoiaHR0cHM6Ly9tYXJ2ZWxvdXMtbGxhbWEtNDE1LmNvbnZleC5zaXRlIiwiYXVkIjoiY29udmV4IiwiZXhwIjoxNzI0Njk5MDYzfQ.d_fNlGYWo0cOZphDp5ri8Obh7cre-sMXbzle03ndtFzTPco6pSpu7dmY7Yj20GjE1_NkW2jqeRFaVjk6BN31WvVaIzIJn8yJ2qCxDQ7cJWaSA68Vl-IgD-39sOWhMPSM0cLnHSVaYgButbKSdFe3jdLX01T4mCKpAhrlVXIt-mHff1Sg8Q_EjrNHnjwz4D7WPawRsTgAIlN6wXL29GyJM9eVtti3SmQJgEEOfhOrXhVCnj5W-0Xm5ua19vOMQSZ9PFQsSr_2ZNOFEta2FdVZOv9wj8p5w81otKJLkwx7f3VpfIhdROLs2_pgX9ugvPevg7bafTBhyD-QMNI8Uy6Rtw

However, it seems like verifying this token in server got the issue

KevinOP•4mo ago

and I don't know where I can check I am not sure what Failed to authenticate: "Could not verify token claim", check your server auth config comes from

ballingt•4mo ago

That's coming from the convex backend, maybe we can get more info

ballingt•4mo ago

https://github.com/get-convex/convex-backend/blob/main/crates/authentication/src/lib.rs#L202-L205

GitHub

convex-backend/crates/authentication/src/lib.rs at main · get-conve...

Open source single-machine version of the Convex backend - get-convex/convex-backend

ballingt•4mo ago

Some quick things to try before I create a repro, could that trailing slash be an issue?

https://marvelous-llama-415.convex.site/  (what you report CONVEX_SITE_URL is)
https://marvelous-llama-415.convex.site   (what I see in the token)

https://marvelous-llama-415.convex.site/  (what you report CONVEX_SITE_URL is)
https://marvelous-llama-415.convex.site   (what I see in the token)

KevinOP•4mo ago

let me quick check now give me 5s

ballingt•4mo ago

if it were then our instructions would be broken just a guess

KevinOP•4mo ago

ah no, CONVEX_SITE_URL = https://marvelous-llama-415.convex.site maybe my typo when typing here but they are same just sidenote: my friend said she finished migration from Clerk Auth to Convex Auth and it is working I've just wondered whether it works for React Native or not

ballingt•4mo ago

for the future it's safe to log more information about these failures, I'll check with security here to make sure

KevinOP•4mo ago

I have 1 quick question in case I am testing this locally Do I need to set CONVEX_SITE_URL in .env.local ? I ask this because based on documentation, CONVEX_SITE_URL is system environment ?

ballingt•4mo ago

(meaning a change we'll make) hm should be fine, it's the system one https://docs.convex.dev/production/environment-variables#system-environment-variables

KevinOP•4mo ago

I think maybe it is good if can debug via https://github.com/get-convex/convex-backend/blob/main/crates/authentication/src/lib.rs#L202-L205

GitHub

convex-backend/crates/authentication/src/lib.rs at main · get-conve...

Open source single-machine version of the Convex backend - get-convex/convex-backend

KevinOP•4mo ago

the link you sent before

ballingt•4mo ago

Yeah seems safe for us to print more there, but it'll be a bit before that gets out

KevinOP•4mo ago

Sure thanks for your help

ballingt•4mo ago

Could you try another method than OTP? wondering if this is specific

KevinOP•4mo ago

ballingt•4mo ago

thanks for working through this, I'll dig in this afternoon. I don't know of anything simple you could be doing wrong, I need to set up a project and trace this through. we bit off a lot of surface area with these methods with this beta release of auth and React Native has less coverage, it's possible something regressed here

KevinOP•4mo ago

thank you for your time, I will try another provider and let you know @ballingt Thanks for your guideline after I read your link above I found the root of issue

KevinOP•4mo ago

Basically the issue comes from with https://labs.convex.dev/auth/setup/manual#configure-authconfigts

Manual Setup - Convex Auth

Authentication library for your Convex backend

KevinOP•4mo ago

when run this code

node generateKeys.mjs

node generateKeys.mjs

copy the output and bring to convex dashboard environment should remove double quotes

ballingt•4mo ago

Nice! I'll update those docs to say that. And we can examine that string at runtime and print a nice error since we know these shouldn't start with quotes

KevinOP•4mo ago

the docs is unclear, it says copy out put, so I copy exactly the output the output looks like this

KevinOP•4mo ago

JWT_PRIVATE_KEY should remove "" while put to environment actually maybe better to make it consistency JWT_PRIVATE_KEY="<key>" JWKS="<key>" then copy <key> the confusion here is JWKS doesn't have ""

ballingt•4mo ago

When pasting into the COnvex dashboard we should warn if the values starts and ends with quotes Yeah and I'll change that string too

KevinOP•4mo ago

import { exportJWK, exportPKCS8, generateKeyPair } from "jose";
 
const keys = await generateKeyPair("RS256");
const privateKey = await exportPKCS8(keys.privateKey);
const publicKey = await exportJWK(keys.publicKey);
const jwks = JSON.stringify({ keys: [{ use: "sig", ...publicKey }] });
 
process.stdout.write(
  `JWT_PRIVATE_KEY="${privateKey.trimEnd().replace(/\n/g, " ")}"`,
);
process.stdout.write("\n");
process.stdout.write(`JWKS=${jwks}`);
process.stdout.write("\n");

import { exportJWK, exportPKCS8, generateKeyPair } from "jose";
 
const keys = await generateKeyPair("RS256");
const privateKey = await exportPKCS8(keys.privateKey);
const publicKey = await exportJWK(keys.publicKey);
const jwks = JSON.stringify({ keys: [{ use: "sig", ...publicKey }] });
 
process.stdout.write(
  `JWT_PRIVATE_KEY="${privateKey.trimEnd().replace(/\n/g, " ")}"`,
);
process.stdout.write("\n");
process.stdout.write(`JWKS=${jwks}`);
process.stdout.write("\n");

this script from documentation process.stdout.write(JWKS=${jwks});

ballingt•4mo ago

It's tough, those double quotes are appropriate in a .env file but not allowed in the dashboard

KevinOP•4mo ago

yeah

ballingt•4mo ago

but yeah we can use quotes for both here

KevinOP•4mo ago

but thanks for your help, 100% appreciated I can continue migration now

ballingt•4mo ago

@Kevin We've rolled out a warning for this

KevinOP•4mo ago

awesome

"Could not verify token claim" on React Native

Did you find this page helpful?