Vincular identidades de usuário - React Native SDK
O Realm fornece muitos fornecedores de autenticação para conectar usuários ao seu aplicativo. Cada fornecedor cria uma identidade de usuário exclusiva. O Realm permite mesclar várias credenciais em uma identidade de usuário.
Você pode vincular identidades com o gancho useUser.
Importar dependências
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';
Configurar provedores
É necessário um usuário conectado para poder vincular identidades. Isso significa que você precisa de um AppProvider
e UserProvider
. Então você pode vincular identidades ao usuário atual em qualquer componente dentro UserProvider
.
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> ); };
Criar UI e vincular identidades
O exemplo a seguir renderiza o ID do usuário para cada identidade associada ao usuário atual do aplicativo. Inicialmente, apenas a identidade do usuário anônimo é renderizada, mas você pode criar uma identidade de e-mail/senha e vinculá-la ao usuário anônimo.
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> ); };