ユーザー ID のリンク - React Native SDK

項目一覧

依存関係のインポート

プロバイダーを設定する
UI とリンク ID の作成

Atlas Device SDK は非推奨です。詳細については、の廃止ページを参照してください。

Realm は、ユーザーをアプリにログインするためのの多くの認証プロバイダを提供します。各プロバイダーは一意のユーザー ID を作成します。 Realm を使用すると、複数の認証情報を 1 つのユーザー ID にマージできます。

useUser フックを使用して ID をリンクできます。

依存関係のインポート

import React, {useEffect, useState} from 'react';
import {
  FlatList,
  Pressable,
  StyleSheet,
  Text,
  TextInput,
  View,
} from 'react-native';
import {Credentials} from 'realm';
import {
  AppProvider,
  UserProvider,
  useApp,
  useUser,
  useAuth,
  useEmailPasswordAuth,
  AuthOperationName,
} from '@realm/react';

プロバイダーを設定する

ID をリンクする前に、ログインユーザーが必要です。つまり、 AppProviderとUserProviderが必要です。その後、 UserProvider内の任意のコンポーネントで、現在のユーザーに ID をリンクできます。

export const LinkIdentities = () => {
  return (
    <AppProvider id={APP_ID}>
      <UserProvider fallback={LogIn}>
        <RegisterUser />
      </UserProvider>
    </AppProvider>
  );
};
// Log in an anonymous user. This component only mounts
// if there is no authenticated user.
const LogIn = () => {
  const {logInWithAnonymous} = useAuth();
  return (
    <View>
      <Text>No one is logged in yet.</Text>
      <Pressable
        onPress={logInWithAnonymous}>
        <Text style={styles.buttonText}>Log in</Text>
      </Pressable>
    </View>
  );
};

UI とリンク ID の作成

次の例では、アプリの現在のユーザーに関連付けられている各 ID のユーザー ID をレンダリングします。最初は匿名ユーザー ID のみがレンダリングされますが、メール/パスワード ID を作成し、それが匿名ユーザーにリンクできます。

type UserIdentity = {
  providerType: string;
  id: string;
};
// Link an anonymous user to an email/password identity.
// For this example, the App Services backend automatically
// confirms users' emails.
const RegisterUser = () => {
  const app = useApp();
  const user = useUser();
  const {logOut} = useAuth();
  const {register, result} = useEmailPasswordAuth();
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [userIdentities, setUserIdentities] = useState(user.identities);
  // Use `result` to react to successful registration
  // by linking credentials with the current user.
  useEffect(() => {
    if (result.operation === AuthOperationName.Register && result.success) {
      linkCredentials();
    }
  }, [result]);
  if (!userIdentities.length) {
    setUserIdentities(user.identities);
  }
  const linkCredentials = async () => {
    const credentials = Credentials.emailPassword(email, password);
    await user.linkCredentials(credentials);
    setUserIdentities(user.identities);
  };
  const registerAndLinkIdentities = async () => {
    register({email, password});
  };
  const deleteUser = async () => {
    app.deleteUser(app.currentUser!);
  };
  return (
    <View>
      {/* Show all identities associated with the current user */}
      <FlatList
        data={userIdentities}
        renderItem={({item}) => (
          <Text >ID: {item.id}</Text>
        )}
        keyExtractor={item => item.id}
      />
      <Text>Link anonymous user with email/password account</Text>
      <View>
        <TextInput
          onChangeText={setEmail}
          value={email}
          placeholder="email..."
        />
        <TextInput
          onChangeText={setPassword}
          value={password}
          placeholder="password..."
        />
      </View>
      <View>
        <Pressable
          onPress={registerAndLinkIdentities}>
          <Text style={styles.buttonText}>Register</Text>
        </Pressable>
        <Pressable
          onPress={logOut}>
          <Text style={styles.buttonText}>Log out</Text>
        </Pressable>
        <Pressable
          onPress={deleteUser}>
          <Text style={styles.buttonText}>Delete user</Text>
        </Pressable>
      </View>
    </View>
  );
};

戻る

マルチユーザーアプリケーション

ユーザー API キーの作成と管理