Fetching the signed in User

Learn how to fetch the signed in user from the backend and frontend.

There are several ways to fetch the signed in user, depending on the use-case.

Fetching the signed in user from the backend

To do so, use the function getLoggedInUser where you have access to the request object, such as in a Next.js API route, or getServerSideProps function.

import { GetServerSidePropsContext } from "next"; import { getLoggedInUser } from '~/core/firebase/admin/auth/get-logged-in-user'; async function getServerSideProps(ctx: GetServerSidePropsContext) { const user = await getLoggedInUser(ctx); return { props: { user, }, }; }

Alternatively, you can use the withAuthedUser middleware to make sure that the API handler is only called when the user is signed in:

import { NextApiRequest,NextApiResponse } from "next"; import { withPipe } from '~/core/middleware/with-pipe'; import { withAuthedUser } from '~/core/middleware/with-authed-user'; async function handler(req: NextApiRequest, res: NextApiResponse) { const user = req.firebaseUser; // ... } export default withPipe(withAuthedUser, handler);

The firebaseUser property is added to the request object by the withAuthedUser middleware. If the user is not signed in, the middleware will return a 401 response.

Fetching the signed in user from the frontend

The withAppProps middleware used in the gated app pages makes sure that the current signed in user is passed from the backend to the frontend.

Getting the user Session with "useUserSession"

To retrieve the signed in user from the frontend, you can use the useUserSession hook:

import { useUserSession } from '~/core/hooks/use-user-session'; const userSession = useUserSession();

The userSession objects contains the following properties:

interface UserSession { auth: AuthUser | undefined; data: UserData | undefined; }
  1. Auth State: The auth property contains the user's authentication data, such as the user ID, email, and so on.
  2. Firestore Data: The data property contains the user's Firestore record. By default, we do not add any data to the user's Firestore record - but it's assumed you will allow users to store additional data in their Firestore record.

This is a React hook and can only be used inside a React component.

Getting the user ID with "useUserId"

To retrieve the signed in user ID from the frontend, you can use the useUserId hook:

import { useUserId } from '~/core/hooks/use-user-id'; const userId = useUserId();

This is a React hook and can only be used inside a React component.

Getting the user role within the organization with "useUserRole"

To retrieve the signed in user role of the current organization from the frontend, you can use the useUserRole hook:

import { useUserRole } from '~/core/hooks/use-user-role'; const role = useUserRole();

This is a React hook and can only be used inside a React component.


Subscribe to our Newsletter
Get the latest updates about React, Remix, Next.js, Firebase, Supabase and Tailwind CSS