Docs Menu
Docs Home
/ /
Atlas Device SDKs
/
/

Link User Identities - React Native SDK

On this page

  • Import Dependencies
  • Set up Providers
  • Create UI and Link Identities

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.

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

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

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