jCtapuk•7mo ago

forceRefreshToken

What does client-side forceRefreshToken do?

13 Replies

Michal Srb•7mo ago

It tells the useAuth hook that it should return a fresh token.

Michal Srb•7mo ago

Docs: https://docs.convex.dev/auth/advanced/custom-auth#client-side-integration

Custom Auth Integration | Convex Developer Hub

Note: This is an advanced feature! We recommend sticking with the

jCtapukOP•7mo ago

@Michal Srb So before sending the request it checks that the token is expired and requests a new token? It turns out I need to return the refresh token if the condition is true?

jCtapukOP•7mo ago

Well, it turns out like this: if the token is out of date, then I request a new token and write it to the new token

Michal Srb•7mo ago

That seems reasonable, you can see what the Convex Auth React implementation does (I think it is pretty much what you have)

jCtapukOP•7mo ago

@Michal Srb Hello! Do you have a helper function to check the token or do I need to import a library to check the token time on the server side? Apparently it’s in the client, but I couldn’t use it on the server side to validate the token I asked the bot and it says that the required function requires a separate library, but this is like an extra one 🙂

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

export default defineNuxtPlugin({
  name: "convex",
  enforce: "pre",
  async setup() {
    const { url } = useRuntimeConfig().public.convex;
    const token = useConvexToken();
    const refreshToken = useConvexRefreshToken();
    const client = new ConvexHttpClient(url);

    if (refreshToken.value) {
      try {
        const { tokens } = await client.action(api.auth.signIn, {
          refreshToken: refreshToken.value,
        });

        if (tokens) {
          token.value = tokens.token;
          refreshToken.value = tokens.refreshToken;
        } else {
          token.value = undefined;
          refreshToken.value = undefined;
        }
      } catch (e) {
        token.value = undefined;
        refreshToken.value = undefined;
      }
    }

    if (token.value) {
      client.setAuth(token.value);
    }

    return {
      provide: {
        convex: { client },
      },
    };
  },
});

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

export default defineNuxtPlugin({
  name: "convex",
  enforce: "pre",
  async setup() {
    const { url } = useRuntimeConfig().public.convex;
    const token = useConvexToken();
    const refreshToken = useConvexRefreshToken();
    const client = new ConvexHttpClient(url);

    if (refreshToken.value) {
      try {
        const { tokens } = await client.action(api.auth.signIn, {
          refreshToken: refreshToken.value,
        });

        if (tokens) {
          token.value = tokens.token;
          refreshToken.value = tokens.refreshToken;
        } else {
          token.value = undefined;
          refreshToken.value = undefined;
        }
      } catch (e) {
        token.value = undefined;
        refreshToken.value = undefined;
      }
    }

    if (token.value) {
      client.setAuth(token.value);
    }

    return {
      provide: {
        convex: { client },
      },
    };
  },
});

While such a temporary alternative, when entering the site, we immediately refresh the token since the subsequent ones will already be on the client side. So it's not critical

Michal Srb•7mo ago

Convex Auth doesn't check the token validity on the client, it relies on the ConvexReactClient to ask for a new token if needed. In the next convex release the websocket will be paused while the fresh token is being fetched. So you shouldn't need to implement this logic in your own function (if you use ConvexReactClient or ConvexClient).

jCtapukOP•7mo ago

But we are talking about the server, so that the data on the server is immediately executed and the client outputs the result when accessing the server. And then the client connects to the web socket to listen for the change 🙂 I don’t like that there is a splash when the player goes to the site, he still needs to wait while all the data is loaded. Therefore, nuxt can store data; if the server has processed it, the client will immediately receive it, and in the background the socket is already connected and the user can safely navigate between pages

jCtapukOP•7mo ago

Well everything works. Immediately the server rendered with a convex and then the client connected it to the socket

jCtapukOP•7mo ago

export const useConvexQuery = async <Query extends FunctionReference<"query">>(
  query: Query,
  args: Query["_args"],
) => {
  const { $convex } = useNuxtApp();

  const data = useState<Query["_returnType"]>(() => undefined);
  const isLoading = computed(() => data.value == undefined);

  if (import.meta.client) {
    // client-side
    const unsubscribe = $convex.client.onUpdate(query, args, (result) => {
      data.value = result;
    });

    onUnmounted(unsubscribe);
  } else if (import.meta.server) {
    // server-side
    data.value = await $convex.client.query(query, args); // http request first
  }

  return { data, isLoading };
};

export const useConvexQuery = async <Query extends FunctionReference<"query">>(
  query: Query,
  args: Query["_args"],
) => {
  const { $convex } = useNuxtApp();

  const data = useState<Query["_returnType"]>(() => undefined);
  const isLoading = computed(() => data.value == undefined);

  if (import.meta.client) {
    // client-side
    const unsubscribe = $convex.client.onUpdate(query, args, (result) => {
      data.value = result;
    });

    onUnmounted(unsubscribe);
  } else if (import.meta.server) {
    // server-side
    data.value = await $convex.client.query(query, args); // http request first
  }

  return { data, isLoading };
};

work code

Michal Srb•7mo ago

Then you want something like this: https://github.com/get-convex/convex-auth/blob/main/src/nextjs/server/request.ts#L67-L105

GitHub

convex-auth/src/nextjs/server/request.ts at main · get-convex/conve...

Library for built-in auth. Contribute to get-convex/convex-auth development by creating an account on GitHub.

jCtapukOP•7mo ago

Yes that's right. Well, then I’ll optimize the main thing that works.

forceRefreshToken

Did you find this page helpful?