Menu Docs
Página inicial do Docs
/ /
Atlas Device SDKs
/ /

Vincular identidades de usuário - React Native SDK

Nesta página

  • Importar dependências
  • Configurar provedores
  • Criar UI e vincular identidades

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.

1
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';
2

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

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

Voltar

Aplicações multiusuário