Accessing the current user

1
const { uid, phoneNumber, signOut } = useDoormanUser()
Copied!
Why?
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.
Show me code, already...
React Hooks
Higher Order Component
Class Components
1
import React from 'react'
2
import { Text } from 'react-native'
3
import { useDoormanUser } from 'react-native-doorman'
4
​
5
const UserDetails = () => {
6
  const { uid, phoneNumber, signOut } = useDoormanUser()
7
  
8
  return <Text>uid: {uid}, phone: {phoneNumber}</Text>
9
}
10
​
11
export default UserDetails
Copied!
1
import React from 'react'
2
import { Text } from 'react-native'
3
import { withDoormanUser } from 'react-native-doorman'
4
​
5
function UserDetails(props) {
6
  // receives a user prop
7
  const { phoneNumber, uid } = props.user
8
  
9
  return <Text>uid: {uid}, phone: {phoneNumber}</Text>
10
}
11
​
12
export default withDoormanUser(UserDetails)
Copied!
1
import React from 'react'
2
import { Text } from 'react-native'
3
import { withDoormanUser } from 'react-native-doorman'
4
​
5
class UserDetails extends React.Component {
6
  render() {
7
    // access via this.props.user
8
    const { phoneNumber, uid } = this.props.user
9
  
10
    return <Text>uid: {uid}, phone: {phoneNumber}</Text>
11
  }
12
}
13
​
14
export default withDoormanUser(UserDetails)
Copied!
Caveats
There is one important caveat for these functions, as mentioned on the useDoormanUser page:
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:
1
import React from 'react'
2
import { Text } from 'react-native'
3
import { useMaybeDoormanUser } from 'react-native-doorman'
4
​
5
const MaybeUserDetails = () => {
6
  const [user, signOut] = useMaybeDoormanUser()
7
  
8
  // check if the user is defined or not first
9
  if (!user) {
10
    // if it isn't, then no one is signed in yet! 
11
    return <Text>Not signed in yet!</Text>
12
  }
13
  
14
  // Ok, now we now there is a user! 🔥
15
  const uid = user.uid
16
  const phoneNumber = user.phoneNumber
17
  
18
  return <Text>uid: {uid}, phone: {phoneNumber}</Text>
19
}
20
​
21
export default MaybeUserDetails
Copied!

Paragraph

Next - 👓Concepts

Add user to the database

Last modified 2yr ago

Copy link

Contents

Why?

Show me code, already...

Caveats