UserProvider (@realm/react)

Props

• fallback?: React.ComponentType<unknown> | React.ReactElement | null | undefined El componente de respaldo que se renderiza si no hay ningún usuario autorizado. Esto puede usarse para renderizar una pantalla de inicio de sesión o, de otra forma, gestionar la autenticación.

Configure UserProvider

Componentes envueltos por AppProvider puede acceder a los ganchos useApp y useAuth. Estos componentes solo se renderizan si AppProvider se conecta correctamente al backend de App Services.

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. Envuelva todos los componentes que necesitan acceder a App Services en AppProvider.

2. Dentro de AppProvider, envuelva todos los componentes a los que desea que tenga acceso un usuario autenticado con UserProvider.

3. En UserProvider, incluya una propiedad fallback con un componente que inicie sesión a un usuario. La aplicación representa este componente si no hay ningún usuario autenticado.

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 (
    <ScrollView>
      <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 />
        </UserProvider>
      </AppProvider>
    </ScrollView>
  );
};

UserProvider Hooks

useUser<FunctionsFactoryType, CustomDataType, UserProfileDataType>(): Realm.User<FunctionsFactoryType, CustomDataType, UserProfileDataType>

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