Clarification about using firebase and react js

Question

So lately I'm working on a react js project, before I start everything I searched and found that best way to use firebase with react is through express, everything was fine untill someone told me that I'm using it wrong, he explained that there's a firebase auth (which I'm using ) and firebase admin sdk, the first one must be used on the client side and the second one must be used on server side.

Basically I'm using Axios to send data to express and then run my firebase Authentication and then responding to my client side, is it wrong? Here's an example of checking if the user is logged in :

Server.js

const firebaseDb=require("firebase/database");
const firebaseAuth=require("firebase/auth");
const path = require('path');
const express= require("express");
var cors = require('cors');
const bodyParser = require("body-parser");

const app=express();

app.use(express.json());
app.use(cors());
app.use(bodyParser.urlencoded({extended: true}));

const db=firebaseDb.getDatabase();
const auth=firebaseAuth.getAuth();
app.get('/checkAuth',(req, res)=>{  

const user=auth.currentUser;
  if (user) {
    // User is signed in.      
    return res.status(200).send("auth ok");

  } else {
    // User is signed out
    return res.status(404).send("auth error");
  }

});

Does this work ? Or should I implement firebase on the client side directly? Or should I use firebase admin sdk here on my server?
Does using firebase on my client side makes my app vulnerable?? I appreciate any help I felt lost even after hours reading documentations.

Bhavesh Daswani · Accepted Answer · 2022-07-03 09:20:06Z

The flow I use when integrating firebase auth in my project is as follows

I do the authentication on the front end side and pass auth token provided by Firebase SDK to the server in the Authorization header

On the server-side, I use Firebase Admin SDK to verify the token

 const admin = require("firebase-admin");
 const serviceAccount = require('firebaseadmincredential.json'));
admin.initializeApp({
  credential: admin.credential.cert(serviceAccount),
});
function firebaseTokenVerification(req, res, next) {

const authHeader = req.headers["authorization"];
const token = authHeader && authHeader.split(" ")[1];

admin
  .auth()
  .verifyIdToken(token)
  .then((response) => {
    // The token provided in the header is valid, if its reach the then block
    next(); 
  })
  .catch((e) => {
    // The token is invalid.
    return res
      .status(403)
      .send(
        'Invalid token'
      ); 

  });    }

The above code is used as an express middleware to the firebase token provided by the frontend, once authenticated then I am sure that the token provided by the frontend is valid and the request can be processed.

On the frontend I use the firebase/auth library and on the backend I use Firebase Admin SDK

Hope this answers your query.

Collectives™ on Stack Overflow

Clarification about using firebase and react js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related