useUser()
The useUser() hook provides access to the current user's User
Returns
There are multiple variants of this type available which you can select by clicking on one of the tabs.
- Name
isLoaded- Type
false- Description
A boolean that indicates whether Clerk has completed initialization. Initially
false, becomestrueonce Clerk loads.
- Name
isSignedIn- Type
undefined- Description
A boolean that returns
trueif the user is signed in.
- Name
user- Type
undefined- Description
The
Userobject for the current user.
- Name
isLoaded- Type
true- Description
A boolean that indicates whether Clerk has completed initialization. Initially
false, becomestrueonce Clerk loads.
- Name
isSignedIn- Type
false- Description
A boolean that returns
trueif the user is signed in.
- Name
user- Type
null- Description
The
Userobject for the current user.
- Name
isLoaded- Type
true- Description
A boolean that indicates whether Clerk has completed initialization. Initially
false, becomestrueonce Clerk loads.
- Name
isSignedIn- Type
true- Description
A boolean that returns
trueif the user is signed in.
- Name
user- Type
- UserResource
JavaScript Icon - Description
The
Userobject for the current user.
Examples
Get the current user
The following example uses the useUser() hook to access the UserisLoaded and isSignedIn properties are used to handle the loading state and to check if the user is signed in, respectively.
import { useUser } from '@clerk/clerk-expo'
import { Text, View } from 'react-native'
export default function Page() {
const { isSignedIn, user, isLoaded } = useUser()
// Handle loading state
if (!isLoaded) return <View>Loading...</View>
// Protect the page from unauthenticated users
if (!isSignedIn) return <View>Sign in to view this page</View>
return (
<View>
<Text>Hello {user.firstName}!</Text>
</View>
)
}Update user data
The following example uses the useUser() hook to access the User
import { useUser } from '@clerk/clerk-expo'
import { Text, View, TouchableOpacity } from 'react-native'
export default function Page() {
const { isSignedIn, isLoaded, user } = useUser()
// Handle loading state
if (!isLoaded) return <View>Loading...</View>
// Protect the page from unauthenticated users
if (!isSignedIn) return <View>Sign in to view this page</View>
const updateUser = async () => {
await user.update({
firstName: 'John',
lastName: 'Doe',
})
}
return (
<View>
<TouchableOpacity onPress={updateUser}>
<Text>Update your name</Text>
</TouchableOpacity>
<Text>user.firstName: {user.firstName}</Text>
<Text>user.lastName: {user.lastName}</Text>
</View>
)
}Reload user data
The following example uses the useUser() hook to access the User
import { useUser } from '@clerk/clerk-expo'
import { Text, View, TouchableOpacity } from 'react-native'
export default function Page() {
const { isSignedIn, isLoaded, user } = useUser()
// Handle loading state
if (!isLoaded) return <View>Loading...</View>
// Protect the page from unauthenticated users
if (!isSignedIn) return <View>Sign in to view this page</View>
const updateUser = async () => {
// Update data via an API endpoint
const updateMetadata = await fetch('/api/updateMetadata', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
role: 'admin',
}),
})
// Check if the update was successful
if ((await updateMetadata.json()).message !== 'success') {
throw new Error('Error updating')
}
// If the update was successful, reload the user data
await user.reload()
}
return (
<View>
<TouchableOpacity onPress={updateUser}>
<Text>Update your metadata</Text>
</TouchableOpacity>
<Text>user role: {user.publicMetadata.role}</Text>
</View>
)
}Feedback
Last updated on