Link User Identities - React Native SDK

On this page

Import Dependencies

Set up Providers
Create UI and Link Identities

Realm is now Atlas Device SDK – Learn More

Realm provides many authentication providers to log users into your app. Each provider creates a unique user identity. Realm lets you merge multiple credentials into one user identity.

You can link identities with the useUser hook.

Import Dependencies

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

Set up Providers

You need a logged-in user before you can link identities. This means you need an AppProvider and UserProvider. Then you can link identities to the current user in any component within 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>
  );
};

←

→