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