External Backend JWT Authentication

popular-magenta · 2025-02-15T13:40:08.034Z

I am developing a React application with Tanstack Start that works with an external backend. This backend provides access/refresh token for authentication. I am looking for a way to implement this authentication structure with Tanstack Start. Is there an example on this topic? Or can you give me some ideas on how to proceed?

S

sad-indigo•2/21/25, 7:52 PM

I am also looking for something similar

A

awake-maroon•2/21/25, 8:11 PM

I'd imagine you'd check your tokens in the middleware on server functions

P

popular-magentaOP•2/21/25, 10:36 PM

Yes, but I also want to be able to make requests to the external backend from a client component. And if the access token expires, the new access token should be updated on the server and client. Likewise, if the request is made from the server component and the token expires, the same flow should work again. I don't know, I'm really confused. I think we were happier when we only had CSR in our lives

S

slow-yellow•2/22/25, 11:05 PM

I'm also looking for exactly what you described. Right now I've only figured out how to make token refresh work with server.

S

sad-indigo•2/23/25, 5:17 PM

https://github.com/j-mcfarlane/tanstack-start-jwt

GitHub

GitHub - j-mcfarlane/tanstack-start-jwt

Contribute to j-mcfarlane/tanstack-start-jwt development by creating an account on GitHub.

S

sad-indigo•2/23/25, 5:17 PM

Here is the repo I have made that has refresh login/logout/register using JWTs - one of the things I would like to improve is the fact that there is a query every route change/preload getting the user

S

sad-indigo•2/23/25, 5:19 PM

Getting the user every request is debatable as its something that should be cached but at the same time it validates the token and additionally if there are permissions/roles involved this would ensure that the user has the most updated object possible

P

popular-magentaOP•2/23/25, 8:23 PM

@jmcfeever this is really cool. Thanks for sharing this. It's a great repo for those who want to start working with jwt acces/refresh token.

D

dry-scarlet•2/23/25, 8:55 PM

From a security point of view, its best to keep the tokens on the backend only. And then pass a session id in a cookie.
The "client" calls that you want to do, couldn't that be routed through a server fn / api fn?

You can use something like BetterAuth that handles some of the auth for you on the server side.

S

sad-indigo•2/24/25, 5:54 AM

@lajtmaN it is in a serverfn? If you can make improvements I would be thrilled to see what you mean on a pr.

R

radical-lime•2/25/25, 1:25 PM

@jmcfeever
Thank for sharing this! I was really struggling with JWT auth.

S

sad-indigo•2/25/25, 2:17 PM

Did you get it working for yourself @Enkhjil ?

R

radical-lime•2/26/25, 12:44 AM

@jmcfeever
I've started implementing it in my code. But somehow session data is empty even though I can see the cooke is set in the browser

M

military-pink•2/26/25, 3:03 PM

If anyone needs help with this lmk and ill upload a repo

M

military-pink•2/26/25, 3:03 PM

It would help to know where everyone is getting confused though.

S

sad-indigo•2/26/25, 3:49 PM

@Rykuno would love to see your strategy compared to the implementation listed above

M

military-pink•2/26/25, 6:02 PM

import createClient, { type Middleware } from "openapi-fetch";
import type { paths } from "../openapi";
import { createServerFn } from "@tanstack/react-start";
import { useAppSession } from "./session";
import { z } from "zod";

export const getSessionData = createServerFn({ method: "GET" }).handler(
  async () => {
    const session = await useAppSession();
    return session.data;
  }
);

export const setSessionData = createServerFn({ method: "POST" })
  .validator(z.object({ accessToken: z.string(), refreshToken: z.string() }))
  .handler(async ({ data }) => {
    const session = await useAppSession();
    await session.update({
      accessToken: data.accessToken,
      refreshToken: data.refreshToken
    });
  });

const refreshSession = createServerFn({ method: "POST" }).handler(async () => {
  const session = await useAppSession();
  const { data } = await rpcWithoutMiddleware.POST("/auth/refresh-tokens", {
    body: {
      refreshToken: session.data.refreshToken
    }
  });
  if (!data) throw new Error("Failed to refresh session");
  await setSessionData({
    data: {
      accessToken: data.accessToken,
      refreshToken: data.refreshToken
    }
  });
});

const shouldRefreshAccessToken = (accessToken: string) => {
  const tokenParts = accessToken.split(".");
  if (tokenParts.length === 3) {
    const payload = JSON.parse(atob(tokenParts[1]));
    const exp = payload.exp * 1000;
    const now = Date.now();
    const timeLeft = exp - now;
    return timeLeft < 5 * 60 * 1000;
  }
  return false;
};

const authMiddleware: Middleware = {
  async onRequest({ request }) {
    let sessionData = await getSessionData();

    const staleSession =
      sessionData?.accessToken &&
      shouldRefreshAccessToken(sessionData.accessToken);

    if (staleSession) {
      await refreshSession();
      sessionData = await getSessionData();
    }

    if (sessionData.accessToken)
      request.headers.set("Authorization", `Bearer ${sessionData.accessToken}`);
    return request;
  }
};

export const rpc = createClient<paths>({ baseUrl: "http://localhost:8080" });
const rpcWithoutMiddleware = createClient<paths>({
  baseUrl: "http://localhost:8080"
});

rpc.use(authMiddleware);

import createClient, { type Middleware } from "openapi-fetch";
import type { paths } from "../openapi";
import { createServerFn } from "@tanstack/react-start";
import { useAppSession } from "./session";
import { z } from "zod";

export const getSessionData = createServerFn({ method: "GET" }).handler(
  async () => {
    const session = await useAppSession();
    return session.data;
  }
);

export const setSessionData = createServerFn({ method: "POST" })
  .validator(z.object({ accessToken: z.string(), refreshToken: z.string() }))
  .handler(async ({ data }) => {
    const session = await useAppSession();
    await session.update({
      accessToken: data.accessToken,
      refreshToken: data.refreshToken
    });
  });

const refreshSession = createServerFn({ method: "POST" }).handler(async () => {
  const session = await useAppSession();
  const { data } = await rpcWithoutMiddleware.POST("/auth/refresh-tokens", {
    body: {
      refreshToken: session.data.refreshToken
    }
  });
  if (!data) throw new Error("Failed to refresh session");
  await setSessionData({
    data: {
      accessToken: data.accessToken,
      refreshToken: data.refreshToken
    }
  });
});

const shouldRefreshAccessToken = (accessToken: string) => {
  const tokenParts = accessToken.split(".");
  if (tokenParts.length === 3) {
    const payload = JSON.parse(atob(tokenParts[1]));
    const exp = payload.exp * 1000;
    const now = Date.now();
    const timeLeft = exp - now;
    return timeLeft < 5 * 60 * 1000;
  }
  return false;
};

const authMiddleware: Middleware = {
  async onRequest({ request }) {
    let sessionData = await getSessionData();

    const staleSession =
      sessionData?.accessToken &&
      shouldRefreshAccessToken(sessionData.accessToken);

    if (staleSession) {
      await refreshSession();
      sessionData = await getSessionData();
    }

    if (sessionData.accessToken)
      request.headers.set("Authorization", `Bearer ${sessionData.accessToken}`);
    return request;
  }
};

export const rpc = createClient<paths>({ baseUrl: "http://localhost:8080" });
const rpcWithoutMiddleware = createClient<paths>({
  baseUrl: "http://localhost:8080"
});

rpc.use(authMiddleware);

import createClient, { type Middleware } from "openapi-fetch";
import type { paths } from "../openapi";
import { createServerFn } from "@tanstack/react-start";
import { useAppSession } from "./session";
import { z } from "zod";

export const getSessionData = createServerFn({ method: "GET" }).handler(
  async () => {
    const session = await useAppSession();
    return session.data;
  }
);

export const setSessionData = createServerFn({ method: "POST" })
  .validator(z.object({ accessToken: z.string(), refreshToken: z.string() }))
  .handler(async ({ data }) => {
    const session = await useAppSession();
    await session.update({
      accessToken: data.accessToken,
      refreshToken: data.refreshToken
    });
  });

const refreshSession = createServerFn({ method: "POST" }).handler(async () => {
  const session = await useAppSession();
  const { data } = await rpcWithoutMiddleware.POST("/auth/refresh-tokens", {
    body: {
      refreshToken: session.data.refreshToken
    }
  });
  if (!data) throw new Error("Failed to refresh session");
  await setSessionData({
    data: {
      accessToken: data.accessToken,
      refreshToken: data.refreshToken
    }
  });
});

const shouldRefreshAccessToken = (accessToken: string) => {
  const tokenParts = accessToken.split(".");
  if (tokenParts.length === 3) {
    const payload = JSON.parse(atob(tokenParts[1]));
    const exp = payload.exp * 1000;
    const now = Date.now();
    const timeLeft = exp - now;
    return timeLeft < 5 * 60 * 1000;
  }
  return false;
};

const authMiddleware: Middleware = {
  async onRequest({ request }) {
    let sessionData = await getSessionData();

    const staleSession =
      sessionData?.accessToken &&
      shouldRefreshAccessToken(sessionData.accessToken);

    if (staleSession) {
      await refreshSession();
      sessionData = await getSessionData();
    }

    if (sessionData.accessToken)
      request.headers.set("Authorization", `Bearer ${sessionData.accessToken}`);
    return request;
  }
};

export const rpc = createClient<paths>({ baseUrl: "http://localhost:8080" });
const rpcWithoutMiddleware = createClient<paths>({
  baseUrl: "http://localhost:8080"
});

rpc.use(authMiddleware);

import createClient, { type Middleware } from "openapi-fetch";
import type { paths } from "../openapi";
import { createServerFn } from "@tanstack/react-start";
import { useAppSession } from "./session";
import { z } from "zod";

export const getSessionData = createServerFn({ method: "GET" }).handler(
  async () => {
    const session = await useAppSession();
    return session.data;
  }
);

export const setSessionData = createServerFn({ method: "POST" })
  .validator(z.object({ accessToken: z.string(), refreshToken: z.string() }))
  .handler(async ({ data }) => {
    const session = await useAppSession();
    await session.update({
      accessToken: data.accessToken,
      refreshToken: data.refreshToken
    });
  });

const refreshSession = createServerFn({ method: "POST" }).handler(async () => {
  const session = await useAppSession();
  const { data } = await rpcWithoutMiddleware.POST("/auth/refresh-tokens", {
    body: {
      refreshToken: session.data.refreshToken
    }
  });
  if (!data) throw new Error("Failed to refresh session");
  await setSessionData({
    data: {
      accessToken: data.accessToken,
      refreshToken: data.refreshToken
    }
  });
});

const shouldRefreshAccessToken = (accessToken: string) => {
  const tokenParts = accessToken.split(".");
  if (tokenParts.length === 3) {
    const payload = JSON.parse(atob(tokenParts[1]));
    const exp = payload.exp * 1000;
    const now = Date.now();
    const timeLeft = exp - now;
    return timeLeft < 5 * 60 * 1000;
  }
  return false;
};

const authMiddleware: Middleware = {
  async onRequest({ request }) {
    let sessionData = await getSessionData();

    const staleSession =
      sessionData?.accessToken &&
      shouldRefreshAccessToken(sessionData.accessToken);

    if (staleSession) {
      await refreshSession();
      sessionData = await getSessionData();
    }

    if (sessionData.accessToken)
      request.headers.set("Authorization", `Bearer ${sessionData.accessToken}`);
    return request;
  }
};

export const rpc = createClient<paths>({ baseUrl: "http://localhost:8080" });
const rpcWithoutMiddleware = createClient<paths>({
  baseUrl: "http://localhost:8080"
});

rpc.use(authMiddleware);

M

military-pink•2/26/25, 6:03 PM

I just have server functions and keep all auth logic server side and proxy calls though it

M

military-pink•2/26/25, 6:05 PM

I just threw this together this morning while playing with tanstack start - so eviction is not there but

P

popular-magentaOP•2/26/25, 9:16 PM

Hi @Rykuno, thank you for sharing this. One question - Here you are doing a manual check with shouldRefreshAccessToken function. What if an access token is revoked on the external backend?

P

popular-magentaOP•2/26/25, 9:19 PM

I mean, when an access token is revoked in the external backend and the access token stored in the client has not expired, I think you cannot renew the tokens.

M

military-pink•2/26/25, 9:38 PM

Usually I believe refresh tokens are revoked, not access tokens - right? At least thats how I've always done it.

M

military-pink•2/26/25, 9:39 PM

I cleaned this up...a lot...

So if it attempts to refresh the token and the server errors, it will clear the session and log the user out. This would happen if the auth server couldn't respond or if the reresh-token session wasn't renewed (session revocation)

R

radical-lime•2/28/25, 7:14 AM

do you have any idea why the access token is undefined

verifyAuth

verifyAuth

verifyAuth

verifyAuth function?

import { createServerFn } from "@tanstack/start";
import { authenticateUser } from "~/libs/cognito";
import { getSessionData, setSessionData } from "./session.server";

export const loginFn = createServerFn({ method: "POST" })
  .validator((data: { username: string; password: string }) => data)
  .handler(async ({ data }) => {
    const authResult = await authenticateUser({ ...data });
    const { AccessToken, RefreshToken } = authResult;
    if (!AccessToken || !RefreshToken) {
      throw Error("AccessToken or RefreshToken is undefined");
    }

    await setSessionData({
      data: { accessToken: AccessToken, refreshToken: RefreshToken },
    });

    return { accessToken: AccessToken, refreshToken: RefreshToken };
  });

export const verifyAuth = createServerFn({ method: "GET" }).handler(
  async () => {
    const { accessToken } = await getSessionData();
    // SOMEHOW ACCESS TOKEN IS UNDEFINED
    console.log("accessToken: ", accessToken);

    return { authenticated: false };
  },
);

import { createServerFn } from "@tanstack/start";
import { authenticateUser } from "~/libs/cognito";
import { getSessionData, setSessionData } from "./session.server";

export const loginFn = createServerFn({ method: "POST" })
  .validator((data: { username: string; password: string }) => data)
  .handler(async ({ data }) => {
    const authResult = await authenticateUser({ ...data });
    const { AccessToken, RefreshToken } = authResult;
    if (!AccessToken || !RefreshToken) {
      throw Error("AccessToken or RefreshToken is undefined");
    }

    await setSessionData({
      data: { accessToken: AccessToken, refreshToken: RefreshToken },
    });

    return { accessToken: AccessToken, refreshToken: RefreshToken };
  });

export const verifyAuth = createServerFn({ method: "GET" }).handler(
  async () => {
    const { accessToken } = await getSessionData();
    // SOMEHOW ACCESS TOKEN IS UNDEFINED
    console.log("accessToken: ", accessToken);

    return { authenticated: false };
  },
);

import { createServerFn } from "@tanstack/start";
import { authenticateUser } from "~/libs/cognito";
import { getSessionData, setSessionData } from "./session.server";

export const loginFn = createServerFn({ method: "POST" })
  .validator((data: { username: string; password: string }) => data)
  .handler(async ({ data }) => {
    const authResult = await authenticateUser({ ...data });
    const { AccessToken, RefreshToken } = authResult;
    if (!AccessToken || !RefreshToken) {
      throw Error("AccessToken or RefreshToken is undefined");
    }

    await setSessionData({
      data: { accessToken: AccessToken, refreshToken: RefreshToken },
    });

    return { accessToken: AccessToken, refreshToken: RefreshToken };
  });

export const verifyAuth = createServerFn({ method: "GET" }).handler(
  async () => {
    const { accessToken } = await getSessionData();
    // SOMEHOW ACCESS TOKEN IS UNDEFINED
    console.log("accessToken: ", accessToken);

    return { authenticated: false };
  },
);

import { createServerFn } from "@tanstack/start";
import { authenticateUser } from "~/libs/cognito";
import { getSessionData, setSessionData } from "./session.server";

export const loginFn = createServerFn({ method: "POST" })
  .validator((data: { username: string; password: string }) => data)
  .handler(async ({ data }) => {
    const authResult = await authenticateUser({ ...data });
    const { AccessToken, RefreshToken } = authResult;
    if (!AccessToken || !RefreshToken) {
      throw Error("AccessToken or RefreshToken is undefined");
    }

    await setSessionData({
      data: { accessToken: AccessToken, refreshToken: RefreshToken },
    });

    return { accessToken: AccessToken, refreshToken: RefreshToken };
  });

export const verifyAuth = createServerFn({ method: "GET" }).handler(
  async () => {
    const { accessToken } = await getSessionData();
    // SOMEHOW ACCESS TOKEN IS UNDEFINED
    console.log("accessToken: ", accessToken);

    return { authenticated: false };
  },
);

R

radical-lime•2/28/25, 7:16 AM

I can see the session cookie is set in my browser storage. I'm calling

verifyAuth

verifyAuth

verifyAuth

verifyAuth in

beforeLoad

beforeLoad

but when i refresh my browser the

accessToken

accessToken

accessToken

accessToken is undefined

S

still-lime•2/28/25, 7:42 AM

do you have a full repo somewhere?

Mmilitary-pink I cleaned this up...a lot... So if it attempts to refresh the token and the ser...

P

popular-magentaOP•2/28/25, 12:09 PM

Makes sense. Could you share a working repo?

R

radical-lime•3/15/25, 8:12 AM

@Manuel Schiller
It seems like I'm hitting the cookie size limit here, even though its under 4KB.
Access and Refresh tokens have 1078, 1797 bytes length respectively. When I set only one of them it works.

R

radical-lime•3/15/25, 8:18 AM

Is there any way to increase this size?

S

still-lime•3/15/25, 8:29 AM

please provide a complete minimal example and create a github issue for this

R

radical-lime•3/15/25, 8:44 AM

@Manuel Schiller
Here is the example code. I've hardcoded mock JWT tokens.
Please go to

/login

/login

route.
https://github.com/enkhjile/tanstack-start-jwt-auth

GitHub

GitHub - enkhjile/tanstack-start-jwt-auth

Contribute to enkhjile/tanstack-start-jwt-auth development by creating an account on GitHub.

S

still-lime•3/15/25, 9:08 AM

please create a GitHub issue for this

R

radical-lime•3/15/25, 9:17 AM

Do you mean in tanstack start repo?

S

still-lime•3/15/25, 9:24 AM

router but yeah

R

radical-lime•3/15/25, 9:24 AM

okay sure

External Backend JWT Authentication

Similar Threads

Similar Threads

Similar Threads