Unexpected firebase.auth().currentUser.uid in a web app

Question

I have this line of code in a web app (on Firebase):

registerWithEmailAndPassword(name, email, password);

An email, password and a name are provided, and a new user account is created when the code is executed. All this seems normal, but what is less expected (at least to me) is that shortly after I find myself having the UID of the newly created user as my firebase.auth().currentUser.uid.

I do not do anything to log in as this new user. So I wonder what is happening under the hood.

Any idea or explanation would be helpful.

Answer 1

registerWithEmailAndPassword is not a built in Firebase SDK method according to the API Reference. However, based on the name of that method, it is probably implemented in a way that makes use of createUserWithEmailAndPassword (modern / legacy) and updateProfile (modern / legacy) under the hood.

Importantly, createUserWithEmailAndPassword both creates the new user AND signs them in immediately. Because a user has been signed in, any onAuthStateChanged (modern / legacy) listeners will fire and the Auth instance's currentUser (modern / legacy) property will return the user's details.

---

This registerWithEmailAndPassword function probably looks like:

// Modern Firebase Syntax
import { getAuth, createUserWithEmailAndPassword, updateProfile } from "firebase/auth";

export const registerWithEmailAndPassword = async (displayName: string, email: string, password: string) => {
  // gets default FirebaseAuth
  const auth = getAuth();

  // creates and signs in a new user with the given email and password, and grabs the new user's details
  const { user } = await createUserWithEmailAndPassword(auth, email, password);

  // update the user's details with their name
  await updateProfile(user, { displayName });
}

// Legacy Firebase Syntax
import * as firebase from "firebase";
import "firebase/auth";

export const registerWithEmailAndPassword = async (displayName: string, email: string, password: string) => {
  // gets default FirebaseAuth
  const auth = firebase.auth();

  // creates and signs in a new user with the given email and password, and grabs the new user's details
  const { user } = await auth.createUserWithEmailAndPassword(email, password);

  // update the user's details with their name
  await user.updateProfile({ displayName });
}

---

To adapt this code so that you can sign up another user instead of yourself, you need to initialize a second Firebase app in the background. As this second app will have its own authentication state, you can use it to create/update other users without affecting the user signed into the default app.

// Modern Firebase Syntax
import { getApp, getApps, initializeApp } from "firebase/app";
import { getAuth, createUserWithEmailAndPassword, updateProfile, signOut } from "firebase/auth";

// creates/reuses a secondary app as needed, based off the default app's configuration
// consider moving this to your 'firebase.ts' file
const getSecondaryApp = () => {
  return getApps().find(a => a.name === 'secondary')
    || initializeApp(getApp().options, 'secondary'); // .options is a copy of the object passed into the default app's initializeApp()
}

export const registerWithEmailAndPassword = async (displayName: string, email: string, password: string) => {
  // gets secondary FirebaseAuth
  const secondaryAuth = getAuth(getSecondaryApp());

  // creates and signs in a new user with the given email and password, and grabs the new user's details
  const { user } = await createUserWithEmailAndPassword(secondaryAuth, email, password);

  // update the user's details with their name
  await updateProfile(user, { displayName });

  // sign out the newly created user
  await signOut(secondaryAuth);

  // return the new user's info to the caller
  return user; // depending on use, consider returning user.toJSON()
}

// Legacy Firebase Syntax
import * as firebase from "firebase";
import "firebase/auth";

// creates/reuses a secondary app as needed, based off the default app, based off the default app's configuration
// consider moving this to your 'firebase.ts' file
const getSecondaryApp = () => {
  return firebase.apps.find(a => a.name === 'secondary')
    || firebase.initializeApp(firebase.app().options, 'secondary'); // .options is a copy of the object passed into the default app's initializeApp()
}

export const registerWithEmailAndPassword = async (displayName: string, email: string, password: string) => {
  // gets secondary FirebaseAuth
  const secondaryAuth = firebase.auth(getSecondaryApp());

  // creates and signs in a new user with the given email and password, and grabs the new user's details
  const { user } = await secondaryAuth.createUserWithEmailAndPassword(email, password);

  // update the user's details with their name
  await user.updateProfile({ displayName });

  // sign out the newly created user
  await secondaryAuth.signOut();

  // return the new user's info to the caller
  return user; // depending on use, consider returning user.toJSON()
}