Docs Menu
Docs Home
/ /
Atlas Device SDKs
/ /

UserProvider (@realm/react)

On this page

  • Props
  • Configure UserProvider
  • UserProvider Hooks
  • useUser()
Type signature
UserProvider(props): null | ReactElement<any, any>

Components nested within UserProvider can access the logged-in user object and use the UserProvider hooks.

  • fallback?: React.ComponentType<unknown> | React.ReactElement | null | undefined The fallback component to render if there is no authorized user. This can be used to render a log in screen or otherwise handle authentication.

Components wrapped by AppProvider can access the useApp and useAuth hooks. These components only render if AppProvider successfully connects to your App Services backend.

Components wrapped by UserProvider can access authenticated users with the useUser hook. These components only render if your app has an authenticated user.

To configure user authentication:

  1. Wrap all components that need to access App Services in AppProvider.

  2. Inside of AppProvider, wrap all components that you want to have access to an authenticated user with UserProvider.

  3. In UserProvider, include a fallback prop with a component that logs a user in. The app renders this component if there is no authenticated user.

import React from 'react';
import {AppProvider, UserProvider} from '@realm/react';
// Fallback log in component that's defined in another file.
import {LogIn} from './Login';
export const LoginExample = () => {
return (
<AppProvider id={APP_ID}>
{/* If there is no authenticated user, mount the
`fallback` component. When user successfully
authenticates, the app unmounts the `fallback`
component (in this case, the `LogIn` component). */}
<UserProvider fallback={LogIn}>
{/* Components inside UserProvider have access
to the user. These components only mount if
there's an authenticated user. */}
<UserInformation />
Type signature
useUser<FunctionsFactoryType, CustomDataType, UserProfileDataType>(): Realm.User<FunctionsFactoryType, CustomDataType, UserProfileDataType>

The useUser() hook provides access to the logged-in user. For example, you can use useUser() to log the current user out.

When changes to the user object happen, this hook will rerender its parent component. For example, if you call user.refreshCustomData to get updated custom user data, the useUser() parent component will rerender.

function UserInformation() {
const user = useUser();
const {logOut} = useAuth();
const performLogout = () => {
// Add UI for logging out...


  • Realm.User An instance of the currently-authenticated Realm user.

← AppProvider (@realm/react)