DEV Community: Aman Kumar

[Boost]

Aman Kumar — Fri, 06 Jun 2025 08:00:28 +0000

Aman Kumar

Jun 6 '25

Firebase: Migrate users from one project to another using Firebase CLI

#firebase #authentication #webdev #programming

Comments

2 min read

Firebase: Migrate users from one project to another using Firebase CLI

Aman Kumar — Fri, 06 Jun 2025 07:59:24 +0000

Firebase is a popular service used by developers for various backend functionalites which provides a user freindly interface to manage your projects and one them is authentication.

Firebase authentication is very populary service which provides a bunch of authentication methods like email/password, google, facebook, twitter, phone, etc.

Using this we can manage users in our project and provide a seamless authentication experience. But in some cases you might need to move users from one project to another project, like, when you are merging a smaller project into a larger one to keep track of all your mini-projects in one place.

Firebase does not provide any way to migrate users from one project to another but we can do so using the Firebase CLI, which is very easy to follow with a very few steps.

Environment setup

Install Firebase CLI Tools

Run command in command prompt to install firebase-tools globally:

npm install -g firebase-tools

Login to Firebase via CLI

To login to your firebase account via the command line, run command:

firebase login

This will redirect you to Firebase CLI login website. Complete the login process using your Firebase account where you have access to your projects.

Export users from older project

Find the Project ID of the older project

You can find the Project ID of your project though Firebase console > Project Settings > General.

Find a list of your project using CLI using command:

firebase projects:list

Find your older project name and its respective Project ID from the results.

Use CLI to export users

Run the following command to export user from your older project:

firebase auth:export firebase-users.json --format=json --project <YOUR_PROJECT_ID>

firebase auth:export: It tells Firebase you're trying to export users.
firebase-users.json: File name of the file where you want to export users.
--format=json: Specifies the file format of the destination file.
--project <YOUR_PROJECT_ID>: It tells Firebase which project you are exporting the users from. Replace with the Project ID of your older project.

Retrieving the Password hash parameters

To successfully import the user into your new project you need some secret keys and values used in your older project.

Go to Authentication > Users > Three dots beside Add User button > Password hash parameters.

This will open a popup with secret keys and their values.

Make note of all the values:

hash_config {
  algorithm: <HASH_ALGO>,
  base64_signer_key: <YOUT_SIGHER_KEY>,
  base64_salt_separator: <YOUR_SALT_SEPARATOR>,
  rounds: <ROUNDS>,
  mem_cost: <MEM_COST>,
}

Import users into your new project

To import users from the file firebase-users.json file to your new project, run the following command:

firebase auth:import firebase-users.json --project=<NEW_PROJECT_ID> --hash-algo=<HASH_ALGO> --hash-key=<YOUR_SIGHER_KEY> --salt-separator=<YOUR_SALT_SEPARATOR> --rounds=<ROUNDS> --mem-cost=<MEM_COST>

firebase auth:import: It tells Firebase you'are trying to iport users.
firebase-users.json: Path to File with filename to the file where you have exported user data.
--project=<NEW_PROJECT_ID>: Project ID of your new project, replace with .
<HASH_ALGO>, <YOUR_SIGHER_KEY>, <YOUR_SALT_SEPARATOR>, <ROUNDS>, <MEM_COST>: Refer to the values retrieved from your older project.

After running this command, refresh your users in Firebase console. Now you can see all the users from older project in your new project.

Group routes according to the categories and apply different layouts with layout.tsx in NextJs App Routing.

Aman Kumar — Fri, 26 Apr 2024 07:19:40 +0000

Problem:

While making a project in NextJs you sometimes need specific components which you want to render within your route path. For example: You want to show a Header and a Sidebar along with the data required on the specific route path. To do that you might add those Components in /app/layout.tsx like this:

import Header from "./components/Header";
import Sidebar from "./components/Sidebar";

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <Header />
          <div className="w-full h-[calc(100%-56px)] flex flex-nowrap justify-start items-start ">
            <Sidebar />
            {children}
          </div>
      </body>
    </html>
  );
}

You might also want to add a Login and SignUp page to your NextJs project to authenticate a user. Then you will get a folder layout like this:

But if we make a folder named login and create a page.tsx file in it and go the the "/login" path, there you see that Header and Sidebar are present as well, which is not necessary here.

The preview for such case would be something like this:

Now you can say that we can make folders for each route and add a layout file in which the Header and Sidebar components can be added. You can do this but it will increase the number of layout files required and also there will be a repetitive code in each such layout file. You will also run into a situation where you want to add Header and Sidebar components to page on your "/" path. And if you want to add these components you will have to add them to the /app/layout.tsx file, then these components will also appear on your Login and SignUp pages.

So how do we solve this problem?

Solution:

To solve this problem we have learn about Route Groups which you can read more about here.
NextJs Route Groups in App Routing are folders which act as a group of similar type of contents and the folder name is enclosed in parenthesis for example: (auth). This folder does not make any routes in the App Routing. If a login route is to be created in the (auth) Route Group, its route will look like: project.com/login, the (auth) does not come into the route uri as it is just a group. You can define a layout.tsx file in this (auth) folder and all the routes created in this (auth) group will follow the same layout. As such you can create another group named (loggedIn) where you can define the layout.tsx file with Header and Sidebar components as such:

import Header from "../components/Header";
import Sidebar from "../components/Sidebar";

export default function LoggedInLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <>
      <Header />
      <div className="w-full h-[calc(100%-56px)] flex flex-nowrap justify-start items-start ">
        <Sidebar />
        {children}
      </div>
    </>
  );
}

And the layout.tsx file in (auth) group without Header and Sidebar components can be defined as:

export default function AuthLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <>
      <div className="w-screen h-screen">{children}</div>
    </>
  );
}

Finally you can define the root layout.tsx file directly in the app folder as:

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <div className="w-full h-screen">{children}</div>
      </body>
    </html>
  );
}

Now, if you want to show a page at route "/" with Header and Sidebar components, then create a "page.tsx" file directly inside the (loggedIn) Route Group and keep in mind that no direct Route Groups without a parent route should directly contain a page.tsx file as it can give rise to conflicting route scenarios. Also, make sure that the "app" folder should not contain a "page.tsx" file in it, directly.

At the end, the "app" folder layout should look like this:

You can check the code for the above explanation on my github repository here.