Best practice for getting access token inside React Router `action`?

[yetty]

I'm currently using @workos-inc/authkit-react-router in a React Router v7+ app and I have a question about how to access the access token inside an action() function (not a loader()).

In loader() functions, the pattern is clear via:

authkitLoader(args, async ({ getAccessToken }) => {
  const token = getAccessToken();
  // ...
});

However, what's the recommended or best-practice way to get the access token inside an action()?

Should I be using withAuth() for this?
Or is there another pattern you'd recommend?

A brief example would be much appreciated!

[kupras06]

You can get access token right in the args of the callback function

return await authkitLoader(
		args,
		async (authArgs) => {
authArgs?.auth?.role; 
authArgs?.auth?.accessToken;
		},
		{ ensureSignedIn: true },
	);

You'll need to add optional checks if { ensureSignedIn: true } ensureSignedIn is not true

[yetty]

@kupras06 Thanks, but I’m not asking about authkitLoader — that’s already working fine in my loaders.

My question is specifically about how to get the access token inside an action() in a React Router v7+ app when using @workos-inc/authkit-react-router.

In loaders, the pattern is clear:

authkitLoader(args, async ({ getAccessToken }) => {
  const token = getAccessToken();
  // ...
});

But in an action(), what’s the best practice?

• Should I be wrapping it with withAuth()? It is problematic since it doesn't refresh the token.
• Or is there another pattern recommended for accessing the access token in actions?

[lyeskara]

@kupras06 Thanks, but I’m not asking about authkitLoader — that’s already working fine in my loaders.

My question is specifically about how to get the access token inside an action() in a React Router v7+ app when using @workos-inc/authkit-react-router.

In loaders, the pattern is clear:

authkitLoader(args, async ({ getAccessToken }) => {
const token = getAccessToken();
// ...
});
But in an action(), what’s the best practice?

• Should I be wrapping it with withAuth()? It is problematic since it doesn't refresh the token.
• Or is there another pattern recommended for accessing the access token in actions?

Actually i ended up exporting a /auth route with only loader and than having a manager class that handles fetching the token and refreshing it so i can do getUserToken(): Promise<string|null>

It's hacky but it works. alternative is to use the workos sdk.

[MattyBalaam]

@lyeskara @yetty we’ve started using react router middleware for this, calling `authkit.authkitLoader inside it then setting middleware context values from the returned values - hopefully the library will offer first-class support for middleware in future.

[DennisKraaijeveld]

Added a #46 helper to have access to this token easily. Found this easier to add right now before diving in creating typesafe middleware functionality. Will work on that if that is highly requested this week.