Firebase Auth Registration

How to Register users with Firebase and React?

Hi 👋🏼, in this tutorial, we'll learn how to register users with the Firebase Authentication System and React. If you want to check how to log in users and set up the tutorial from the start, visit How to create an Auth system with Firebase and React?. Our working environment is Vite, React with TypeScript, and the Firebase npm package.
Let's start!

Set Up the Firebase Create User Functions.

In the firebase.ts file that we previously created, add the createUserWithEmailAndPassword() function. The minimal information to open an account using the Firebase auth is the email and password; you can also collect the user name outputted as a displayName, the phone number, and a photo hosted somewhere on the internet.

In the following code, create the user, send the email verification to the user's inbox, and update his profile with the username and an example image from


The following code demonstrates how to collect the email verification code we send to the user's inbox. Import the applyActionCode() from Firebase and extract the oobCode from the URL. After the user has registered successfully, he will be login by Firebase automatically regardless of his email verification status.


Create the routes and components for the Firebase email verification.

  • Create the register.tsx and confirmEmail.tsx routes.
Git Bash
cd src cd routes touch register.tsx && touch confirmEmail.tsx
  • Collect the user information and remember to validate the inputs according to your application needs.

Extract the oobCode from the URL, and send it to the Firebase file through the useEffect() hook. Delete the React StrictMode if running twice in development, or use a cleanup function to clear the oobCode after running it for the first time. You can learn more about the cleanup function in the React docs.


Create a landing page for the Firebase User Actions.

While creating this tutorial, I notice that Firebase only allows one URL for all user actions like email verification, password reset, etc. In order to redirect the user to the correct action (email verification), we need to build a higher-order component.

  • Create a landing page for the user actions. Go to routes and add authUserActions.tsx.

Go to the components folder, create the auth-actions.tsx, and get the mode from the URL and the oobCode. Navigate to different routes depending on the URL mode. Remember, in this tutorial, we're focusing on email verification.

  • Now that we have all the components and routes, add them to the App.tsx file.

To finish this tutorial, go to the Firebase console, authentication, and customize your action URL template to point to our user actions landing page. Remember! You can always test this registration process using the Firebase Emulators, change the path to emulator/action, and you're good to go. See you next Time!

Customize Action URL Firebase