Docs Menu
Docs Home
/ /
Administrar usuarios

Vincular identidades de usuario - React Native SDK

Realm proporciona Muchos proveedores de autenticación permiten a los usuarios iniciar sesión en tu aplicación. Cada proveedor crea una identidad de usuario única. Realm te permite combinar varias credenciales en una sola.

Puede vincular identidades con el 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

Necesita un usuario conectado antes de poder vincular identidades. Esto significa que necesita un AppProvider y UserProvider. Luego, puede vincular identidades al usuario actual en cualquier componente dentro de 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

El siguiente ejemplo muestra el ID de usuario de cada identidad asociada al usuario actual de la aplicación. Inicialmente, solo se muestra la identidad del usuario anónimo, pero se puede crear una identidad de correo electrónico y contraseña y vincularla al usuario 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>
);
};

Volver

Aplicaciones multiusuario

En esta página