how can i save my json data into a firebase current UID in angular?-CodePudding

I am trying to make every user has his own data , but I have my users saved on firebase and my data saved on JSON server, is there a way to connect them? to make every time a user register and login have his own data separated from the other users. I hope you got what I am trying to do :)

here is my service for storing the data on json server .service.ts:

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class ApiService {

  constructor(private http : HttpClient,) { }
// order Table
 postOrder(data : any){
  return this.http.post<any>("http://localhost:3000/OrderList/",data);
 }
 getOrder(){
  return this.http.get<any>("http://localhost:3000/OrderList/");
 }
// order detials

 postOrderDetials(data : any){
  return this.http.post<any>("http://localhost:3000/OrderDetials/",data);
 }
 getOrderDetials(){
  return this.http.get<any>("http://localhost:3000/OrderDetials/");
 }
// item table

 postItemTable(data : any){
  return this.http.post<any>("http://localhost:3000/itemTable/",data);
 }

 getItemTable(){
  return this.http.get<any>("http://localhost:3000/itemTable/");
 }
// delete a row in the order table
 DeleteOrder(id : number){
  return this.http.delete<any>("http://localhost:3000/OrderList/" id)
 }
// to edit the item table 
 PutItem(data : any , id : number){
  return this.http.put<any>("http://localhost:3000/itemTable/" id,data);
 }
//  to add to the operation table
postOperation(data : any){
  return this.http.post<any>("http://localhost:3000/OperationTable/",data);
}
getOperation(){
  return this.http.get<any>("http://localhost:3000/OperationTable/");
}
}

and here is my service.ts for saving the user into firebase :

interface authResponeData {
  kind: string;
  idToken: string;
  email : string;
  refreshToken : string;
  expiresIn: string;
  localId:string;
}

@Injectable({
  providedIn: 'root'
})
export class AuthService {
  userData: any;

  constructor(
    private fireAuth : AngularFireAuth, private router : Router,
    public angularFireAuth: AngularFireAuth,
    private api : ApiService) {}

    login(email : string , password : string) {
      this.fireAuth.signInWithEmailAndPassword(email,password).then( ()=> {
        localStorage.setItem('AIzaSyC6Y3IuqNUMfEe-xQFpmviAD2dWeBCuztI' , 'true');
        this.router.navigate(['Order-table']);
        this.angularFireAuth.currentUser.then( data  => {
          console.log(data?.uid);
      })
      },err => {
        alert(err.message);
        this.router.navigate(['/login']);
      })
    }

  register(email : string , password : string){
    this.fireAuth.createUserWithEmailAndPassword(email , password).then( () => { 
      alert("registration successful")
      this.router.navigate(['/login']);
    }, err => {
      alert(err.message);
      this.router.navigate(['/register']);
    })
  }

  SignOff() {
    this.fireAuth.signOut().then( () => {
      localStorage.removeItem('AIzaSyC6Y3IuqNUMfEe-xQFpmviAD2dWeBCuztI');
      this.router.navigate(['/login']);
    }, err => {
      alert(err.message); 
    })
  }

hopefully, I put all the information needed, if any information needed just let me know

CodePudding user response：

Here are a few possible approaches you could take:

One option would be to include a field in your data objects on the JSON server that stores the user's Firebase ID. When a user logs in, you can retrieve their Firebase ID and use it to filter the data that you retrieve from the JSON server, only returning the data that belongs to that user.
Alternatively, you could store a reference to the user's data on the JSON server in a field on their user document in Firebase. For example, you could store the URL of the user's data on the JSON server in a field on their user document. When the user logs in, you can retrieve this URL and use it to access the user's data on the JSON server.

CodePudding user response：

To implement the first solution, you can follow these steps:

In your Angular app, use the Firebase authentication API to authenticate the user and retrieve their Firebase ID.

When making requests to the JSON server, include the Firebase ID in the request as a query parameter or in the request body.

On the JSON server, use the Firebase ID to filter the data that is returned to the client. For example, you could use the ID to retrieve only the data that belongs to the user with that ID from the database.

In your Angular app, use the filtered data to populate the UI.

Here is some sample code to illustrate this approach:

// Authenticate the user and retrieve their Firebase ID
firebase.auth().onAuthStateChanged((user) => {
  if (user) {
    const firebaseId = user.uid;

    // Make a request to the JSON server, including the Firebase ID in the request
    http.get(`/api/data?firebaseId=${firebaseId}`).subscribe((data) => {
      // Use the filtered data to populate the UI
      this.data = data;
    });
  }
});

// On the JSON server

app.get('/api/data', (req, res) => {
  const firebaseId = req.query.firebaseId;

  // Use the Firebase ID to filter the data that is returned to the client
  db.collection('data').find({ firebaseId }).toArray((err, docs) => {
    if (err) {
      res.send(err);
    } else {
      res.send(docs);
    }
  });
});

This approach allows you to easily retrieve only the data that belongs to the authenticated user, without having to worry about implementing server-side authentication or managing user sessions