How to access user's session in root layout?

[kwiat1990]

Hey, I have implemented a simple social login with remix-auth and remix-auth-socials and it does work but now I can't get my head around another problem: how I can access user's session inside root layout or a component (not a route)?

In my case I have a header component, which should display login/logout button along with a user's avatar if he's logged in. In Next with Next-Auth, it was a simple task - call a session hook in root layout (_app.ts) and pass the user's data to some components. What it looks in Remix workflow like?

I have managed to use loader inside root.tsx and then I can use Outlet context to get the session inside other routes (but for that I could also use loader inside them). What I can't achieve is to get that information inside nested components (like the mentioned header) component.

I couldn't think of any solution other than props drilling.

[sergiodxa]

As you said, get the authenticated user data on root.tsx or any other layout or pathless layout route, then pass that using props or a custom context.

If you read the authenticated user data on root.tsx, you could also use the useMatches hook to read the data anywhere. For example:

// app/root
export let loader: LoaderFunction = async ({ request }) => {
  let user = await authenticator.isAuthenticated(request)
  // probably more code here
  return json({ user })
}

// app/hooks/use-user
export function useUser(): User | null {
  let [rootMatch] = useMatches()
  return rootMatch.data.user
}

// you can also create a hook to throw an error if user is null
// for routes where you know the user must be authenticated
// so you don't have to check if the value is not null before using it
export function useRequiredUser(): User {
  let user = useUser()
  if (user === null) throw new Error("User not authenticated")
  return user;
}

// app/components/header
```ts
export function Header() {
  let user = useUser()
  // use the user data (if not null) here to render something
}

[kwiat1990]

Thanks, it was a breeze to implement this. Something odd for me, Remix newbie, was the fact that useMatches make data available to all nested components. I observed the same behavior with using useLoaderData hook inside a non-route component (in this case a header component).

[sergiodxa]

useMatches and useLoaderData read a value from a context, so you can call them in any component, not just the route export default component.

But useLoaderData will only give you the data of one route, the route rendering the component, for a possible shared component useMatches is probably safer, specially to read from the root route since that's always the first match.