Vincular identidades de usuario - React Native SDK

Los SDK de dispositivos Atlas están obsoletos. Consulte deprecation page for details.

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

Create UI and Link Identities

The following example renders the user ID for each identity associated with the app's current user. Initially, only the anonymous user identity renders, but you can create an email/password identity and link it to the anonymous user.

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

Multi-User Applications

Crear y gestionar API keys de usuario