TanStackT
TanStackā€¢13mo agoā€¢
5 replies
colossal-harlequin

How to handle authentication (get session data)

My knowledge on this has atrophied. šŸ˜©

With NextJS I'm so used to having async as the default. Now that I'm with Tanstack Router this isn't the case (as of now). I'm struggling how to use 

const session = await authClient.getSession()


Imagine I have the following:

import { authClient } from '@acme/auth';
import { Group, Stack } from '@raikou/core';

function AssetContainer() {
  const getSession = async () => {
    const { data } = await authClient.useSession();
    return data?.user.id;
  };
  const userId = await getSession();

  return (
    <Stack>
      <Group align="flex-start" gap={0}>
        <Content userId={userId} />
      </Group>
    </Stack>
  );
}

export default AssetContainer;


Now that AssetContainer needs to be async due to the await. Does each parent function now needs async, until I go up the chain to the Route?

I've tried using 
use
 with React 19 but unfortunately this doesn't work.

How should I approach this? Looking for best practice.

Note: I did check the docs to see if there was a way of passing down data from the Router to the top level component and didn't see this was the case.
Was this page helpful?