Proveedor de usuario (@realm/react)

Accesorios

• 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.

Configurar 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.

Los componentes encapsulados por UserProvider pueden acceder a usuarios autenticados con el gancho useUser. Estos componentes solo se renderizan si la aplicación tiene un usuario autenticado.

Para configurar la autenticación de usuario:

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>
  );
};

Ganchos de UserProvider

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...
}