Accessing the current user
Access the latest user details from any component in your app.
const { uid, phoneNumber, signOut } = useDoormanUser()
So, here you are. You've successfully added phone authentication to your app. You did it.
And now, you're wondering, how do I access the current user inside my authenticated app? 🧐
Before Doorman, this was actually a challenge.
You need access to the current user's details, such as their unique id (
uid
) and perhaps their phone number (phoneNumber
). And you also need your components to re-render whenever these change, to make sure there's no stale data.With Doorman, accessing the current user is easy.
You can either use
useDoormanUser
or withDoormanUser
, depending on your preference for React Hooks vs higher order components.React Hooks
Higher Order Component
Class Components
import React from 'react'
import { Text } from 'react-native'
import { useDoormanUser } from 'react-native-doorman'
const UserDetails = () => {
const { uid, phoneNumber, signOut } = useDoormanUser()
return <Text>uid: {uid}, phone: {phoneNumber}</Text>
}
export default UserDetails
import React from 'react'
import { Text } from 'react-native'
import { withDoormanUser } from 'react-native-doorman'
function UserDetails(props) {
// receives a user prop
const { phoneNumber, uid } = props.user
return <Text>uid: {uid}, phone: {phoneNumber}</Text>
}
export default withDoormanUser(UserDetails)
import React from 'react'
import { Text } from 'react-native'
import { withDoormanUser } from 'react-native-doorman'
class UserDetails extends React.Component {
render() {
// access via this.props.user
const { phoneNumber, uid } = this.props.user
return <Text>uid: {uid}, phone: {phoneNumber}</Text>
}
}
export default withDoormanUser(UserDetails)
useDoormanUser
and withDoormanUser
should only be used on screens/components that show up after a user has signed in. If you use either of these when a user hasn't authenticated yet, it will throw an error.If you want to access the user on a screen where a user may or may not be signed in, then use
useMaybeDoormanUser
instead:import React from 'react'
import { Text } from 'react-native'
import { useMaybeDoormanUser } from 'react-native-doorman'
const MaybeUserDetails = () => {
const [user, signOut] = useMaybeDoormanUser()
// check if the user is defined or not first
if (!user) {
// if it isn't, then no one is signed in yet!
return <Text>Not signed in yet!</Text>
}
// Ok, now we now there is a user! 🔥
const uid = user.uid
const phoneNumber = user.phoneNumber
return <Text>uid: {uid}, phone: {phoneNumber}</Text>
}
export default MaybeUserDetails
Last modified 3yr ago