httpAction Authorization Bearer is broken

[adelin-b]

Hello, its is not possible to auth using httpAction

  useEffect(() => {
    const fetchData = async () => {
      const token = await authData.getToken();
      const response = await fetch(`${CONVEX_SITE_URL}/api/chat`, {
        method: "POST",
        body: JSON.stringify({ messages: [] }),
        headers: {
          Authorization: `Bearer ${token}`,
        },
      });
      console.log(response);
    };
    fetchData();
  }, [token]);

Will have no more Authorization headers inside the req once it reach httpAction and no identiry

export const chat = httpAction(async (ctx: ActionCtx, req) => {
  // Extract the `messages` and organizationId from the body of the request
  const { messages, organizationId } = await req.json();
  const userIdentity = await ctx.auth.getUserIdentity(); // This is null NULL
}

But on the doc it says it should. https://docs.convex.dev/auth/functions-auth#http-actions

You can also access the user identity from an HTTP action ctx.auth.getUserIdentity(), by calling your endpoint with an Authorization header including a JWT token:

myPage.ts

const jwtToken = "...";

fetch("https://<deployment name>.convex.site/myAction", {
  headers: {
    Authorization: `Bearer ${jwtToken}`,
  },
});

[nipunn1313]

I was able to get it working with clerk.

function Content() {
  const messages = useQuery(api.messages.list) || [];
  const [newMessageText, setNewMessageText] = useState("");
  const sendMessage = useMutation(api.messages.send);
  const { getToken } = useAuth();

  async function handleSendMessage(event: FormEvent) {
    event.preventDefault();
    await sendMessage({ body: newMessageText });
    setNewMessageText("");
  }

  async function handleDoHttpAction(event: FormEvent) {
    event.preventDefault();
    try {
      const token = await getToken({
        template: "convex",
      });
      const response = await fetch("http://localhost:8001/hello", {
        headers: {
          Authorization: `Bearer ${token}`,
        },
      });
      console.log(response);
      const text = await response.text();
      console.log(text);
    } catch (error) {
      console.error("Error fetching data:", error);
    }
  }

  return (
    <main>
      <h1>Convex Chat</h1>
      <Badge />
      <h2>
        <SignOutButton />
      </h2>
      <ul>
        {messages.map((message) => (
          <li key={message._id}>
            <span>{message.author}:</span>
            <span>{message.body}</span>
            <span>{new Date(message._creationTime).toLocaleTimeString()}</span>
          </li>
        ))}
      </ul>
      <form onSubmit={handleSendMessage}>
        <input
          value={newMessageText}
          onChange={(event) => setNewMessageText(event.target.value)}
          placeholder="Write a message…"
        />
        <input type="submit" value="Send" disabled={newMessageText === ""} />
      </form>

      <form onSubmit={handleDoHttpAction}>
        <input type="submit" value="DoHttpAction" />
      </form>
    </main>
  );
}

I did notice that if there were any errors in parsing/evaluating the JWT, the error didn't propagate in a way that you could observe it (it just comes as null). I was able to debug by building backend from source and looking at backend logs. This is the key line - you can see where the error is being eaten.

convex-backend/crates/local_backend/src/http_actions.rs

Line 197 in 29dd36f

let identity = identity_result.unwrap_or(Identity::Unknown);

I am looking into that now - because getting better error messages on bad Authorization headers would be useful.

[nipunn1313]

Hi! We made some changes that should give better error messages if the Authorization header passed up has any issues. That way instead of it mysteriously not working, you'll be able to get an error message.

I'm hopeful that will resolve it for you - but please feel free to reopen or file a new issue if there are more issues.