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.
Dependencias de importación
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 proveedores
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> ); };
Crear UI y vincular identidades
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> ); };