Docs Menu
Docs Home
/
MongoDB Atlas
/
Atlas Device SDK
/
React Native SDK
/
API リファレンス

UserProvider (@realm/ React )

項目一覧

  • 機能
  • UserProvider の構成
  • ユーザープロバイダー フック
  • 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でラップされたコンポーネントは、 userUserフックを使用して認証されたユーザーにアクセスできます。 これらのコンポーネントは、アプリに認証されたユーザーがある場合にのみレンダリングされます。

ユーザー認証を設定するには:

  1. App Services にアクセスするために必要なすべてのコンポーネントをAppProviderでラップします。

  2. AppProvider内で、認証されたユーザーにアクセスできるようにするすべてのコンポーネントをUserProvider 1} でラップします。

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

ユーザープロバイダー フック

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 )