UserProvider (@realm/react)

Props

• fallback?: React.ComponentType<unknown> | React.ReactElement | null | undefined O componente de contingência a ser renderizado se não houver nenhum usuário autorizado. Isso pode ser usado para renderizar uma tela de login ou lidar com a autenticação.

Configurar o UserProvider

Os componentes envolvidos peloAppProvider podem acessar os hooks useApp e useAuth . Esses componentes só serão renderizados se conectar com êxito ao AppProvider do App Services.

Os componentes agrupados pelo UserProvider podem acessar usuários autenticados com o gancho useUser . Esses componentes só serão renderizados se o seu aplicativo tiver um usuário autenticado.

Para configurar a autenticação do usuário:

1. Encerre todos os componentes que precisam acessar o App Services em AppProvider.

2. Dentro do AppProvider, encerre todos os componentes que você deseja ter acesso como usuário autenticado com UserProvider.

3. Em UserProvider, inclua um acessório de fallback com um componente que registra um usuário. O aplicativo renderiza este componente se não houver nenhum usuário 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>
  );
};

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