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()

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;

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

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

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.

TanStack•15mo 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()

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;

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

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

use

How to handle authentication (get session data)

Similar Threads

How to handle authentication (get session data)

Similar Threads

Similar Threads

Similar Threads