help with using convex-auth with remixjs. | Convex Community | Page 1

tender gale Sep 20, 2025, 4:13 AM

#

im using convex-auth. when the user logs in, I want to communicate to me remixjs http convex client. how can I do this?

sudden daggerBOT Sep 20, 2025, 4:13 AM

#

Hi @tender gale. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

To use Convex Auth with RemixJS and communicate authentication state to your Remix app's HTTP Convex client, you need to ensure that your client (Remix frontend) sends the Convex Auth JWT token with each request to the Convex backend.

Here’s how you can approach this, based on the available knowledge:

Obtain the JWT Token After Login
When a user logs in using Convex Auth, you need to retrieve the JWT token that Convex Auth issues for the session. In React, this is typically done using hooks like useAuthToken from @convex-dev/auth/react, but for Remix (or any non-React environment), you need to fetch or store the token yourself after login.
Pass the Token to the Convex HTTP Client
The Convex HTTP client (ConvexHttpClient) allows you to set the authentication token using setAuth(token). You should call this method with the JWT token you obtained after login, so that all subsequent requests from your Remix app to Convex are authenticated.

Example (pseudo-code for Remix loader/action or client-side code):
```
import { ConvexHttpClient } from "convex/browser";

const client = new ConvexHttpClient(process.env.CONVEX_URL);

// After user logs in and you have the JWT token:
client.setAuth(token); // token is the JWT from Convex Auth
```
How to Get the Token in Remix
- If your login flow is handled in the browser, you can store the token in a cookie or localStorage after login, then read it in your Remix loaders or actions and set it on the Convex client.
- If your login flow is server-side, ensure the token is available in the session/cookie and can be accessed in your Remix loaders/actions.

#

Example Integration Pattern
Here’s a simplified pattern you might use in a Remix loader:

import { ConvexHttpClient } from "convex/browser";
import { api } from "../convex/_generated/api";

export const loader = async ({ request }) => {
  const token = /* get token from cookie/session */;
  const client = new ConvexHttpClient(process.env.CONVEX_URL);
  if (token) client.setAuth(token);

  const data = await client.query(api.someQuery, {});
  return { data };
};

Key Points:

The crucial step is to ensure your Convex HTTP client is always provided with the current JWT token from Convex Auth using setAuth(token).
How you persist and retrieve the token (cookie, localStorage, etc.) depends on your app’s architecture and security requirements.

References:

The general approach for custom clients and token handling is discussed in this Discord thread and another example with Svelte.
Convex Auth server setup and token issuance: Convex Auth server API reference.

If you need a more specific code example or run into issues with token retrieval or validation, please provide more details about your login flow and how you’re storing the token.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@tender gale Kapa.ai is still learning and improving, please let me know how I did by reacting below.

tender gale Sep 20, 2025, 4:14 AM

#

after the user logs in, how do I get the jwt?

#

@sudden dagger after the user logs in, how doI get the jwt?

sudden daggerBOT Sep 20, 2025, 4:14 AM

#

Let me check the knowledge base for you again. One moment! :books:

#

After the user logs in with Convex Auth, you can obtain the JWT (authentication token) using the useAuthToken hook from @convex-dev/auth/react if you are in a React environment:

import { useAuthToken } from "@convex-dev/auth/react";

function SomeComponent() {
  const token = useAuthToken();
  // You can now use `token` to authenticate HTTP requests to your Convex backend
}

If you are not using React, the knowledge sources do not provide a direct method for obtaining the JWT in a non-React (e.g., Remix) environment. However, the general approach is to retrieve the JWT from where Convex Auth stores it after login, which is typically in localStorage under a key like __convexAuthJWT_... or in cookies, depending on your setup. You can inspect your browser's storage to find the exact key and retrieve the token accordingly.

For example, in the browser console:

const token = localStorage.getItem("__convexAuthJWT_<your-site-suffix>");

Replace <your-site-suffix> with the appropriate value for your Convex deployment.

If you need to access the token on the server side, you would need to ensure it is sent from the client (e.g., via a cookie or request header) and then read it from the request in your Remix loader or action.

The knowledge sources do not provide a Remix-specific example, but the above methods are how you would generally retrieve the JWT after login with Convex Auth Authorization Testing authenticated functions from the dashboard.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@tender gale Kapa.ai is still learning and improving, please let me know how I did by reacting below.

tender gale Sep 20, 2025, 4:15 AM

#

@sudden dagger how do I use the auth token with the htttp client?

sudden daggerBOT Sep 20, 2025, 4:15 AM

#

Let me check the knowledge base for you again. One moment! :books:

#

To use the auth token (JWT) with the Convex HTTP client, you should call the setAuth method on your ConvexHttpClient instance and pass the token as an argument. This ensures that all subsequent queries and mutations made by the client are authenticated.

Here’s how you do it:

import { ConvexHttpClient } from "convex/browser";

const client = new ConvexHttpClient(process.env.CONVEX_URL);

// After obtaining the JWT token (e.g., from localStorage, cookies, or your auth provider)
client.setAuth(token); // `token` is your JWT string

The setAuth method expects a JWT-encoded OpenID Connect identity token as a string. You should call this method whenever the token changes (for example, after login or token refresh) ConvexHttpClient API.

If you need to clear the authentication (e.g., on logout), you can call:

client.clearAuth();

This approach is confirmed in both the official API documentation and community discussions about custom authentication flows ConvexHttpClient API Discord: SvelteKit example.

If you have not yet obtained the JWT token, you will need to retrieve it from your authentication provider or storage mechanism before calling `setAuth`.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@tender gale Kapa.ai is still learning and improving, please let me know how I did by reacting below.

tender gale Sep 20, 2025, 4:34 AM

#

when a user is authenticated, do you store their session or something related in header cookies? how can I get it?

#

@sudden dagger when a user is authenticated, do you store their session or something related in header cookies? how can I get it?

sudden daggerBOT Sep 20, 2025, 4:34 AM

#

Let me check the knowledge base for you again. One moment! :books:

#

When using Convex Auth, the storage of session or authentication information depends on your integration and environment:

For most Convex Auth setups (especially with React and the default Convex Auth provider):
The JWT access token and refresh token are stored in localStorage by default, not in cookies. This is because Convex communicates over WebSockets, and browsers do not send cookies with WebSocket messages. Storing tokens in localStorage allows the client to send the JWT directly to the backend for authentication. You can configure a different storage mechanism if needed, but cookies are not used by default in this scenario Keep your authentication secure.
For Next.js with @convex-dev/auth/nextjs:
In this case, server-only cookies are used to store the session ID and access token, making them accessible to your Next.js server on initial page load. Only the access token is made available to client-side JavaScript, while the refresh token remains secure in an HTTP-only cookie Keep your authentication secure (Next.js).

How can you get the token?

If using localStorage (default for most Convex Auth setups):
You can retrieve the JWT from localStorage in the browser using the key that Convex Auth uses (e.g., __convexAuthJWT_<site-suffix>).
If using cookies (Next.js server-side):
You can access the cookie from the request headers on the server side. The cookie will contain the session or access token, depending on your configuration.

#

Summary:

By default, Convex Auth stores tokens in localStorage, not cookies, unless you are using the Next.js integration, which uses server-only cookies for session and refresh tokens.
To access the token, read it from localStorage on the client, or from cookies on the server if using the Next.js integration.

If you need the exact key or method for your specific setup, please specify whether you are using plain Convex Auth, Next.js, or another framework Keep your authentication secure Keep your authentication secure (Next.js).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@tender gale Kapa.ai is still learning and improving, please let me know how I did by reacting below.

tender gale Sep 20, 2025, 4:37 AM

#

@sudden dagger show me an example of fetching the jwt from localStorage.

sudden daggerBOT Sep 20, 2025, 4:37 AM

#

Let me check the knowledge base for you again. One moment! :books:

#

Certainly! Here is an example of fetching the JWT from localStorage as described in the knowledge sources:

const token = localStorage.getItem("sessionId");

In the context of a custom authentication setup (such as with Lucia Auth), the session ID or JWT is stored in localStorage under a specific key. You can retrieve it using localStorage.getItem, passing the key you used to store the token. In the Lucia example, the key is "sessionId" Keeping track of a session.

If you are using Convex Auth, the key may differ (for example, it could be prefixed with `__convexAuthJWT_` and a site-specific suffix), so you should use the key that matches your setup. If you are unsure of the key, you can inspect your browser's localStorage after logging in to see the exact key being used.

#help with using convex-auth with remixjs.

If you need a more specific code example or run into issues with token retrieval or validation, please provide more details about your login flow and how you’re storing the token.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

The knowledge sources do not provide a Remix-specific example, but the above methods are how you would generally retrieve the JWT after login with Convex Auth Authorization Testing authenticated functions from the dashboard.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

If you have not yet obtained the JWT token, you will need to retrieve it from your authentication provider or storage mechanism before calling setAuth.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

If you need the exact key or method for your specific setup, please specify whether you are using plain Convex Auth, Next.js, or another framework Keep your authentication secure Keep your authentication secure (Next.js).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

If you have not yet obtained the JWT token, you will need to retrieve it from your authentication provider or storage mechanism before calling `setAuth`.