DEV Community: Madhan Gannarapu

Firebase & FlutterFire Recommended Multi-Account Setup

Madhan Gannarapu — Mon, 08 Jun 2026 20:19:47 +0000

Overview

This guide describes the recommended setup for developers working with:

Personal Firebase Projects (personal@gmail.com)
Company Firebase Projects (employee@company.com)

The goal is to:

Avoid frequent login/logout cycles
Switch accounts quickly
Manage multiple Firebase environments
Keep FlutterFire configuration simple
Use an officially supported Firebase workflow

Architecture

Google Accounts
├── personal@gmail.com
└── employee@company.com

Firebase CLI
├── login:add
├── login:list
└── login:use

Firebase Projects
├── personal-app
├── company-dev
├── company-qa
└── company-prod

Project Aliases
├── dev
├── qa
└── prod

Shell Aliases
├── firebase-personal
└── firebase-company

Step 1: Install Firebase CLI

Install:

npm install -g firebase-tools

Verify:

firebase --version

Step 2: Install FlutterFire CLI

Install:

dart pub global activate flutterfire_cli

Verify:

flutterfire --version

Step 3: Add Multiple Firebase Accounts

Add Personal Account

firebase login:add

Select:

personal@gmail.com

Add Company Account

firebase login:add

Select:

employee@company.com

Verify Accounts

firebase login:list

Example:

✔ personal@gmail.com
✔ employee@company.com

Step 4: Create Shell Aliases

Instead of typing long email addresses repeatedly, create aliases.

Open:

nano ~/.zshrc

Add:

alias firebase-personal="firebase login:use personal@gmail.com"
alias firebase-company="firebase login:use employee@company.com"

Reload:

source ~/.zshrc

Step 5: Test Account Switching

Switch to personal account:

firebase-personal

Verify:

firebase projects:list

Switch to company account:

firebase-company

Verify:

firebase projects:list

Step 6: Configure Firebase Project Aliases

Navigate to your Flutter project:

cd my-project

Add development project:

firebase use --add

Example:

Project:
company-dev

Alias:
dev

Add QA project:

firebase use --add

Example:

Project:
company-qa

Alias:
qa

Add Production project:

firebase use --add

Example:

Project:
company-prod

Alias:
prod

Generated file:

.firebaserc

Example:

{
  "projects": {
    "dev": "company-dev",
    "qa": "company-qa",
    "prod": "company-prod"
  }
}

Step 7: Verify Project Aliases

Switch environment:

firebase use dev

firebase use qa

firebase use prod

Check active project:

firebase use

Step 8: Generate FlutterFire Configurations

Development:

flutterfire configure \
  --project=company-dev \
  --out=lib/firebase_options_dev.dart

QA:

flutterfire configure \
  --project=company-qa \
  --out=lib/firebase_options_qa.dart

Production:

flutterfire configure \
  --project=company-prod \
  --out=lib/firebase_options_prod.dart

Result:

lib/
├── firebase_options_dev.dart
├── firebase_options_qa.dart
└── firebase_options_prod.dart

Step 9: Configure Firebase Initialization

Example:

import 'firebase_options_dev.dart' as dev;
import 'firebase_options_prod.dart' as prod;

const isProd = bool.fromEnvironment('PROD');

await Firebase.initializeApp(
  options: isProd
      ? prod.DefaultFirebaseOptions.currentPlatform
      : dev.DefaultFirebaseOptions.currentPlatform,
);

Daily Workflow

Working on Personal Project

Switch account:

firebase-personal

Verify projects:

firebase projects:list

Configure FlutterFire if required:

flutterfire configure

Working on Company Development Environment

Switch account:

firebase-company

Switch environment:

firebase use dev

Verify:

firebase use

Run:

flutterfire configure

Working on Company QA Environment

firebase-company
firebase use qa

Working on Company Production Environment

firebase-company
firebase use prod

Troubleshooting

Show Logged-In Accounts

firebase login:list

Show Available Projects

firebase projects:list

Show Current Active Project

firebase use

Remove an Account

firebase logout employee@company.com

Why This Setup Is Recommended

Firebase Multi-Account Support

Uses Firebase's officially supported mechanism:

firebase login:add

Benefits:

Multiple Google accounts supported
No repeated browser authentication
Secure credential management
Works across all Firebase CLI commands

Shell Aliases

Provides faster switching:

firebase-personal
firebase-company

instead of:

firebase login:use personal@gmail.com
firebase login:use employee@company.com

Benefits:

Faster workflow
Less typing
Fewer mistakes

Final Recommendation

Use:

Firebase Multi-Account Support

firebase login:add

Firebase Project Aliases

firebase use --add

Shell Aliases

alias firebase-personal="firebase login:use personal@gmail.com"
alias firebase-company="firebase login:use employee@company.com"

This combination provides:

Official Firebase account management
Fast account switching
Environment management (Dev / QA / Prod)
FlutterFire compatibility
Minimal maintenance

Interactive shell scripts are optional and are only worth adding if you switch accounts and environments many times throughout the day.

What Is CORS and Why Is It Breaking My API Requests?

Madhan Gannarapu — Fri, 01 Aug 2025 11:32:48 +0000

If you’ve ever built a web app that talks to a backend API, you’ve probably run into this scary message:

❌ “Access to fetch at ‘some-api.com’ from origin ‘your-site.com’
has been blocked by CORS policy...”

Sounds confusing? Don’t worry — this article will explain what CORS is, why it exists, and how to fix it.

The Real Problem: Different Origins

Let’s say:

Your frontend is hosted at: https://mycoolapp.com
Your backend API lives at: https://api.mycoolapp.com

Even though they look similar, the browser sees them as different places, called origins.

An origin is made up of:

Origin = protocol + domain + port

If any of these are different, the browser treats it as a cross-origin request

And that’s when CORS steps in.

So What is CORS?

CORS stands for Cross-Origin Resource Sharing.

It’s a security rule built into all modern browsers that says:

“I’ll only let your website fetch data from another origin if that origin allows it.”

That means — even if your API is working fine, the browser can still block your request unless the API sends back the right permissions.

Why Does the Browser Do This?

It’s there to protect users.

Imagine:

You’re logged into your bank.
You visit a shady site.
That site secretly tries to make a request to your bank using your login session.

Without CORS, the shady site could potentially succeed.

So browsers add a safety check:

“You can’t send requests to other websites unless they clearly say it’s okay”

When Do CORS Errors Happen?

CORS errors usually happen when your website tries to talk to another origin. For example:

✅ Your site: https://example.com

❌ Tries to call:
- http://example.com        (different protocol)
- https://api.example.com   (different subdomain)
- https://backend.com       (different domain)
- https://example.com:8080  (different port)

Other reasons CORS might fail:

The backend doesn’t return the correct CORS headers
You’re sending Authorization headers or cookies
You’re using PUT, DELETE, or custom headers — which triggers a preflight request

If the browser doesn’t get permission, it blocks the request.

What’s a Preflight Request?

A preflight request is like asking for permission before doing something sensitive.
Let’s say your frontend wants to:

Use the PUT method
Send application/json data
Include a token in headers The browser says:

“Hold on! Let me check with the server first.”

So it sends an hidden OPTIONS request - this is called “preflight.”
If the server replies properly, your request goes through ✅
If not, the browser blocks it 💥

How the OPTIONS Request Works

Browser sends:

OPTIONS /api/user HTTP/1.1  
Origin: https://mycoolapp.com  
Access-Control-Request-Method: PUT  
Access-Control-Request-Headers: Content-Type, Authorization

Server must respond:

Access-Control-Allow-Origin: https://mycoolapp.com  
Access-Control-Allow-Methods: GET, POST, PUT, DELETE  
Access-Control-Allow-Headers: Content-Type, Authorization  
Access-Control-Allow-Credentials: true

If the server doesn’t send these headers, the request will be blocked.

How to Fix CORS

If you control the backend, here’s what you need to do:

Allow your frontend’s origin
Handle the OPTIONS method
Allow necessary headers and methods
If you’re using cookies or auth tokens, set Access-Control-Allow-Credentials: true

Example: Fixing CORS in Node.js (Express)

const express = require('express');
const cors = require('cors');
const app = express();

app.use(cors({
  origin: 'https://mycoolapp.com',         // allow your frontend
  methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],
  credentials: true,                        // allow cookies/tokens
  allowedHeaders: ['Content-Type', 'Authorization']
}));

app.options('*', cors()); // Handle preflight

Quick Troubleshooting Checklist

✅ CORS Debugging Checklist

✅ Check                                  | Example
------------------------------------------|---------------------------------------------------
Is the origin allowed?                    | Access-Control-Allow-Origin: https://mycoolapp.com
Are custom headers allowed?               | Authorization, X-Custom-Header
Is the preflight request handled?         | Allow OPTIONS requests
Are credentials (cookies/tokens) enabled? | Access-Control-Allow-Credentials: true
Are you using * with credentials?         | ❌ Not allowed. Use exact origin instead

Managing Multiple Git Accounts on One Machine(Mac/Linux)

Madhan Gannarapu — Fri, 04 Jul 2025 08:47:08 +0000

How to set up and manage personal and work Git accounts on your local machine.

🚀 Introduction

Many developers work with both personal and work GitHub accounts. Here's how to manage them on a Mac...

What You’ll Learn

✅ Use SSH to separate identities
✅ Automatically apply correct Git user config based on folder
✅ Clean directory structure

📁 Directory Setup

~/
├── .ssh/
│   ├── work/
│   │   ├── id_ed25519_work
│   │   ├── id_ed25519_work.pub
│   ├── personal/
│   │   ├── id_ed25519_personal
│   │   ├── id_ed25519_personal.pub
│   └── config               # SSH config file
├── .gitconfig
├── .gitconfig-work          # Workspace-specific Git config
├── .gitconfig-personal      # Personal Git config
├── work/                    # All workspace (work) repositories
└── personal/                # All personal repositories

Set Up Personal and Work

mkdir personal work

personal: Use this folder for:

Your own apps, portfolios
Open source contributions
Learning new tech, coding experiments
Resume or portfolio projects
Hackathons or fun builds

work: Use this folder for:

company apps/repos
poc apps
Anything related to employment

Generate SSH Keys for Each Git Account

Generate a unique SSH key for each GitHub or GitLab account:

# Personal
ssh-keygen -t ed25519 -C "your-email@personal.com" -f ~/.ssh/personal/id_ed25519_personal

# Work
ssh-keygen -t ed25519 -C "your-email@company.com" -f ~/.ssh/work/id_ed25519_work

Now Add the SSH keys to the ssh-agent:

# Personal
ssh-add ~/.ssh/personal/id_ed25519_personal

# Work
ssh-add ~/.ssh/work/id_ed25519_work

Add SSH Keys to Your GitHub Accounts (Company & Personal)

Once you've generated the SSH keys, you need to add the public keys to your respective GitHub accounts so they can recognize and authorize your machine
To view the SSH keys in terminal run

# Personal
cat ~/.ssh/personal/id_ed25519_personal.pub

# work
cat ~/.ssh/work/id_ed25519_work.pub

Configure the SSH Config File

Create or update your ~/.ssh/config file:

touch ~/.ssh/config
open ~/.ssh/config

add:

# Personal
Host github.com-personal
  HostName github.com
  User git
  IdentityFile ~/.ssh/personal/id_ed25519_personal

# Work
Host github.com-work
  HostName github.com
  User git
  IdentityFile ~/.ssh/work/id_ed25519_work

Use github.com-personal or github.com-work as the remote URL host.

Verification SSH with GitHub accounts

To verify SSH works:

ssh -T git@github-work
ssh -T git@github-personal

Expect messages like: “Hi ! You've successfully authenticated...”

Configure the Global`.gitconfig` File

Create two custom Git configs:

# Personal Git config
touch ~/.gitconfig-personal

# Work Git config
touch ~/.gitconfig-work

Open and fill them like this:
~/.gitconfig-personal

[user]
  name = Madhan Gannarapu
  email = your-email@personal.com

~/.gitconfig-work

[user]
  name = Madhan Gannarapu
  email = your-email@company.com

Use Conditional Includes in Global `.gitconfig`

Create or update your ~/.ssh/config file:

touch ~/.ssh/config
open ~/.ssh/config

Paste this:

[user]
  name = Default Madhan
  email = default@example.com

[includeIf "gitdir:~/work/**"]
  path = ~/.gitconfig-work

[includeIf "gitdir:~/personal/**"]
  path = ~/.gitconfig-personal

This config tells Git to automatically use different identity files depending on which directory the repo is in.

Clone Repos with Correct SSH Host

Use the matching host from your ~/.ssh/config file

# Personal
git clone git@github.com-personal:username/repo.git ~/Projects/personal/repo

# Work
git clone git@github.com-work:company/repo.git ~/Projects/work/repo

DEV Community: Madhan Gannarapu

Firebase & FlutterFire Recommended Multi-Account Setup

Overview

Architecture

Step 1: Install Firebase CLI

Step 2: Install FlutterFire CLI

Step 3: Add Multiple Firebase Accounts

Add Personal Account

Add Company Account

Verify Accounts

Step 4: Create Shell Aliases

Step 5: Test Account Switching

Step 6: Configure Firebase Project Aliases

Step 7: Verify Project Aliases

Step 8: Generate FlutterFire Configurations

Step 9: Configure Firebase Initialization

Daily Workflow

Working on Personal Project

Working on Company Development Environment

Working on Company QA Environment

Working on Company Production Environment

Troubleshooting

Show Logged-In Accounts

Show Available Projects

Show Current Active Project

Remove an Account

Why This Setup Is Recommended

Firebase Multi-Account Support

Shell Aliases

Final Recommendation

What Is CORS and Why Is It Breaking My API Requests?

The Real Problem: Different Origins

So What is CORS?

Why Does the Browser Do This?

When Do CORS Errors Happen?

What’s a Preflight Request?

How the OPTIONS Request Works

How to Fix CORS

Example: Fixing CORS in Node.js (Express)

Quick Troubleshooting Checklist

Managing Multiple Git Accounts on One Machine(Mac/Linux)

🚀 Introduction

What You’ll Learn

📁 Directory Setup

Set Up Personal and Work

Generate SSH Keys for Each Git Account

Add SSH Keys to Your GitHub Accounts (Company & Personal)

Configure the SSH Config File

Verification SSH with GitHub accounts

Configure the Global.gitconfig File

Use Conditional Includes in Global .gitconfig

Clone Repos with Correct SSH Host

Configure the Global`.gitconfig` File

Use Conditional Includes in Global `.gitconfig`