Firebase authentication is not putting out displayName when using cloud functions

Question

I am working on an app where I need to sign up a user with information like their username and more. Firebase authentication is working fine and also firebase cloud functions working to some extent. Now, I want to retrieve user.uid to add some more information when they sign up which I am unable to figure out how to.

So far I am only able to put user.uid and email to firebase database but I need access to that uid to add some more information to the same user like name, address, phone number etc.

Filename: Signup.js

import React from 'react';
import {
  View,
  Text,
  StyleSheet,
  TextInput,
  ActivityIndicator,
  ScrollView
} from 'react-native';

import colors from '../constants/colors';
import CustomActionButton from '../components/CustomButton';
import * as firebase from 'firebase';
import { Ionicons } from "@expo/vector-icons";

class SignUp extends React.Component {
  constructor() {
    super();
    this.state = {
      displayName: '',
      email: '',
      password: '',
      isLoading: false
    };
  }

  onSignUp = async () => {
    if (this.state.email && this.state.password) {
      this.setState({ isLoading: true });
      try {
        const response = await firebase
          .auth()
          .createUserWithEmailAndPassword(
            this.state.email,
            this.state.password)
        if (response) {
          this.setState({ isLoading: false });
          alert('SignUp Succesfull. Now you can go back and Login.');
        }
      } catch (error) {
        this.setState({ isLoading: false });
        if (error.code == 'auth/email-already-in-use') {
          alert('User already exists.Try loggin in');
        }
        console.log(error);
      }
    } else {
      alert('Please enter email and password');
    }
  };

  render() {
    return (
      <View style={styles.container}>
          <ScrollView>
        {this.state.isLoading ? (
          <View
            style={[
              StyleSheet.absoluteFill,
              {
                alignItems: 'center',
                justifyContent: 'center',
                zIndex: 1000,
                elevation: 1000
              }
            ]}
          >
            <ActivityIndicator size="large" color={colors.logoColor} />
          </View>
        ) : null}
        <View style={{ flex: 1, justifyContent: 'center' }}>
        <View
          style={{ flex: 1, alignItems: "center", justifyContent: "center" }}
        >
          <Ionicons name="ios-pulse" size={150} color={colors.logoColor} />
          <Text style={{ fontSize: 30, marginBottom: 20, color: colors.logoColor }}>Mind Coach</Text>
        </View>
        <TextInput
            style={styles.textInput}
            placeholder={'John Doe'}
            placeholderTextColor={colors.bgTextInputDark}
            keyboardType="default"
            onChangeText={displayName => this.setState({ displayName })}
          />
          <TextInput
            style={styles.textInput}
            placeholder={'abc@example.com'}
            placeholderTextColor={colors.bgTextInputDark}
            keyboardType="email-address"
            onChangeText={email => this.setState({ email })}
          />
          <TextInput
            style={styles.textInput}
            placeholder="enter password"
            placeholderTextColor={colors.bgTextInputDark}
            secureTextEntry
            onChangeText={password => this.setState({ password })}
          />
          <View style={{ alignItems: 'center' }}>
            <CustomActionButton
              onPress={this.onSignUp}
              style={[ styles.loginButtons, { borderColor: colors.bgError, marginBottom: 30, }]}
            >
              <Text style={{ color: 'white' }}>Sign Up</Text>
            </CustomActionButton>
          </View>
        </View>
        </ScrollView>
      </View>
    );
  }
}
export default SignUp;

Filename: index.js (firebase-cloud-functions)

const functions = require('firebase-functions');

const admin = require('firebase-admin');

admin.initializeApp();

exports.createUserInDatabase = functions.auth.user().onCreate(async user => {
  const email = user.email
  const displayName = user.displayName;


  try {
    const snapshot = await admin
      .database()
      .ref('users/' + user.uid)
      .set({ email: email, displayName: displayName, uid: user.uid });
    return snapshot;
  } catch (error) {
    console.log(error);
    return error;
  }
});

As you can see that email and uid are being displayed in database but not displayName. I need help with this if anyone can.

Answer 1

The functions.auth.user().onCreate( trigger is called right after your code calls firebase.auth().createUserWithEmailAndPassword(this.state.email, this.state.password). So only the minimal properties, and not the display name, will be available in your Cloud Functions code.

If you want to also write the display name, you have two main options:

1. Write the display name to the database from your application code, right after also set it on the user profile (assuming you're doing the latter).
2. Create a separate (HTTPS-triggered or Callable) Cloud Function that you pass the display name to, and which then sets it both on the profile and in the database.

Both options are fine, and which one you choose depends on the requirements of your app.