Docs Menu
Docs Home
/
MongoDB Atlas
/
Atlas Device SDK
/
React Native SDK
/
API 참조

UserProvider(@realm/react)

이 페이지의 내용

  • 프롭
  • UserProvider 구성
  • UserProvider Hooks
  • useUser()
서명 입력
UserProvider(props): null | ReactElement<any, any>

UserProvider 내에 중첩된 구성 요소는 로그인한 사용자 객체에 액세스하고 UserProvider 후크를 사용할 수 있습니다.

프롭

  • fallback?: React.ComponentType<unknown> | React.ReactElement | null | undefined 권한이 부여된 사용자가 없는 경우 렌더링할 대체 구성 요소입니다. 이는 로그인 화면을 렌더링하거나 인증을 처리하는 데 사용할 수 있습니다.

UserProvider 구성

AppProvider 에 의해 래핑된 컴포넌트는 useApp 및 useAuth 후크에 액세스 할 수 있습니다. 이러한 구성 요소는 AppProvider 이(가) App Services 백엔드 에 성공적으로 연결된 경우에만 렌더링됩니다.

UserProvider 에 의해 래핑된 컴포넌트는 useUser 훅을 사용하여 인증된 사용자에게 액세스할 수 있습니다. 이러한 구성 요소는 앱에 인증된 사용자가 있는 경우에만 렌더링됩니다.

사용자 인증을 구성하려면 다음을 실행하세요.

  1. App Services에 액세스해야 하는 모든 컴포넌트를 AppProvider로 래핑하세요.

  2. AppProvider 내에서 인증된 사용자가 액세스할 수 있도록 하려는 모든 컴포넌트를 UserProvider로 래핑합니다.

  3. UserProvider에 사용자를 로그인하는 컴포넌트가 있는 fallback 속성을 포함하세요. 인증된 사용자가 없는 경우 앱은 이 컴포넌트를 렌더링합니다.

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()

서명 입력
useUser<FunctionsFactoryType, CustomDataType, UserProfileDataType>(): Realm.User<FunctionsFactoryType, CustomDataType, UserProfileDataType>

useUser() 후크는 로그인한 사용자에 대한 액세스를 제공합니다. 예를 들어 useUser() 을 사용하여 현재 사용자를 로그아웃할 수 있습니다.

사용자 객체에 변경 사항이 발생하면 이 후크는 상위 구성 요소를 다시 렌더링합니다. 예를 들어 user.refreshCustomData 를 호출하여 업데이트된 사용자 지정 사용자 데이터를 가져오면 useUser() 상위 구성 요소가 다시 렌더링됩니다.

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

반환

  • Realm.User 현재 인증된 Realm 사용자의 인스턴스입니다.

돌아가기

AppProvider(@realm/react)

다음

Swift SDK