DEV Community

Wahee Al-Jabir
Wahee Al-Jabir

Posted on

How I Fixed CodePod When Firebase Auth Wasn't Working (and Migrated to Auth0)

#webdev #javascript #mongodb #node

When I first built my CodePod app, I used Firebase Authentication to manage users and Firestore for storing their data. Everything worked fine until I started running into permission errors and authentication issues—especially after trying to add more advanced login features.

The Problems I Faced

  • Firebase Permission Errors : My frontend was trying to access Firestore directly, but without a valid Firebase Auth session, I kept getting "Missing or insufficient permissions" errors.
  • Auth0 Integration Issues : When I switched to Auth0 for authentication, the user object structure changed ( uid became sub ), which broke my existing code.
  • Content Security Policy (CSP) Violations : Auth0's login popups and iframes were blocked by my server's CSP settings.
  • Session Management : Auth0 cached login state, making it hard to switch accounts or test different users. ## How I Fixed It ### 1. Mapped Auth0 User to Firebase Format I updated my Auth context so that the Auth0 user object matched what my app expected from Firebase. This meant mapping user.sub to currentUser.uid and including other properties like email , displayName , and photoURL . 
const currentUser = user ? {
  uid: user.sub,
  email: user.email,
  displayName: user.name,
  photoURL: user.picture,
  emailVerified: user.email_verified
} : null;
Enter fullscreen mode Exit fullscreen mode

2. Stopped Direct Firestore Access from the Frontend

Instead of letting the frontend talk directly to Firestore, I created backend API endpoints for user data. This way, the backend could use the Firebase Admin SDK to securely access Firestore, and the frontend just called the API.

// routes/users.js
router.get('/api/users/:id', 
authenticateToken, async (req, res) 
=> {
  // ...fetch user from Firestore 
  using Admin SDK...
});
Enter fullscreen mode Exit fullscreen mode

3. Fixed Content Security Policy (CSP) Settings

I updated my server's CSP headers to allow Auth0 domains in frame-src and connect-src , and changed the Cross-Origin-Opener-Policy to "unsafe-none" so Auth0 popups could communicate with my app.

app.use(helmet({
  crossOriginOpenerPolicy: { 
  policy: "unsafe-none" },
  contentSecurityPolicy: {
    directives: {
      frameSrc: [
        "'self'",
        "https://your-domain.auth0.
        com"
      ],
      connectSrc: [
        "'self'",
        "https://your-domain.auth0.
        com"
      ]
    }
  }
}));
Enter fullscreen mode Exit fullscreen mode

4. Improved Session Management

To make sure users could select their account and avoid auto-login, I used Auth0's prompt: "select_account" option.

What I Learned

  • Migrating from Firebase Auth to Auth0 isn't just swapping libraries—you need to update user object mapping, backend APIs, and security policies.
  • Backend APIs are safer and more flexible than direct database access from the frontend.
  • Always check your CSP and CORS settings when integrating third-party authentication.
  • Testing authentication flows with multiple accounts is much easier with proper session management

Top comments (0)