Documentation: Does naming of authkitLoader mean it is just for loaders?

[MattyBalaam]

I am maybe just misdirected by the naming here - Can you call authkitLoader inside a remix action as well? We need to get tokens to call endpoints in our actions and I’m not 100% sure that you can use it in an action.

[PaulAsjes]

Hey there, although authkitLoader isn't technically supposed to be used in Remix actions, there is a workaround to get it doing what you want.

I'm going to leave this issue open as a reminder to add a Remix specific method for getting the user data, but in the meanwhile the following should work:

export async function action({ request }: ActionFunctionArgs) {
  const resp = await authkitLoader({
    request,
    params: {},
    context: {},
  });

  const { accessToken } = await resp.json();

  console.log('action:', accessToken);

  // make follow up API calls with the access token  
}

The above works because our loader doesn't require either params or context to function, just the request.

[mnemitz]

Just bumping this as I'm in a similar situation, thanks for the workaround. Is there any alternative still planned for this?

[mnemitz]

@PaulAsjes @nicknisi @mattgd Unfortunately, it looks like when using single-fetch, the above workaround no longer works (I'm assuming since this PR, which came in after this thread opened: #45)

Not sure what the right approach is here. One idea I had for a workaround was to call authkitLoader, ignoring its result, but letting it refresh the access token if needed, then reading the access token by calling withAuth().

It would be helpful to have something like authkitAction though, since I imagine there will be many use cases where access tokens will need to be sent to external APIs.

EDIT: Possible alternative workaround here (still need to test)

export async function action() {
  const resp = await authkitLoader(
    {
      request,
      params: {},
      context: {},
    },
    ({ getAccessToken }) => ({ token: getAccessToken() }),
    { ...getAuthStorage(), ensureSignedIn: true },
  );
  console.log(resp.data.token);
}

[MattyBalaam]

@mnemitz we used to do something like that, creating a utility function and awaiting it as the first function in the action.

A better pattern (which we are now using) is to use middleware if you have migrated to React Router https://reactrouter.com/how-to/middleware. You can then create some custom middleware to run in root and that will always get called first, allowing you to put all your logic in one place, and putting any user values or tokens into middleware context so you can grab them in any loader or action.

It is a little bit fiddly to setup (and it was done in my companies proprietary code so I can’t share it unfortunately) but perhaps this would make a good feature request for workos to add first-class support for @nicknisi

[mnemitz]

@MattyBalaam Thanks for the tip! Currently we're still on Remix 2, so will stick with the utility function, but good to see there's a more idiomatic way in RR7. Does this way also handle refreshing access tokens?