Docs Menu

์‚ฌ์šฉ์ž ID ์—ฐ๊ฒฐ - React Native SDK

Realm ์€ ์‚ฌ์šฉ์ž๋ฅผ ์•ฑ ์— ๋กœ๊ทธ ํ•˜๊ธฐ ์œ„ํ•ด ๋งŽ์€ ์ธ์ฆ ์ œ๊ณต์ž ๋ฅผ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค. ๊ฐ ์ œ๊ณต์ž ๋Š” ๊ณ ์œ ํ•œ ์‚ฌ์šฉ์ž ID๋ฅผ ์ƒ์„ฑํ•ฉ๋‹ˆ๋‹ค. Realm ์„ ์‚ฌ์šฉํ•˜๋ฉด ์—ฌ๋Ÿฌ ์ž๊ฒฉ ์ฆ๋ช… ์„ ํ•˜๋‚˜์˜ ์‚ฌ์šฉ์ž ID๋กœ ๋ณ‘ํ•ฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

useUser ํ›„ํฌ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ID๋ฅผ ์—ฐ๊ฒฐํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

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

ID๋ฅผ ์—ฐ๊ฒฐํ•˜๋ ค๋ฉด ๋จผ์ € ๋กœ๊ทธ์ธํ•œ ์‚ฌ์šฉ์ž๊ฐ€ ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค. ์ฆ‰, AppProvider ๋ฐ UserProvider ๊ฐ€ ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๋Ÿฐ ๋‹ค์Œ UserProvider ๋‚ด์˜ ๋ชจ๋“  ๊ตฌ์„ฑ ์š”์†Œ์—์„œ ID๋ฅผ ํ˜„์žฌ ์‚ฌ์šฉ์ž์—๊ฒŒ ์—ฐ๊ฒฐํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

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

๋‹ค์Œ ์˜ˆ์ œ์—์„œ๋Š” ์•ฑ์˜ ํ˜„์žฌ ์‚ฌ์šฉ์ž์™€ ์—ฐ๊ฒฐ๋œ ๊ฐ ID์˜ ์‚ฌ์šฉ์ž ID๋ฅผ ๋ Œ๋”๋งํ•ฉ๋‹ˆ๋‹ค. ์ฒ˜์Œ์—๋Š” ์ต๋ช… ์‚ฌ์šฉ์ž ID๋งŒ ๋ Œ๋”๋ง๋˜์ง€๋งŒ ์ด๋ฉ”์ผ/๋น„๋ฐ€๋ฒˆํ˜ธ ID๋ฅผ ๋งŒ๋“ค์–ด ์ต๋ช… ์‚ฌ์šฉ์ž์—๊ฒŒ ์—ฐ๊ฒฐํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

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