Search code examples
angularfirebaseauthenticationfirebase-realtime-databasetoken

Angular use of tokens when writing/reading from firebase rules-protected data


The question: What is the model for using auth tokens to read/write from Firebase data?

Long form question: I have successfully logged-in to Firebase and I have a set of auth token data in response to that login. I presume that when I do an http.get() or http.patch() to the Firebase document, I need to pass that token back. But I haven't sorted out how to do this properly.

Framework ionic w/ angular

Setup I have a Firebase data set established and I have set the access rules as follows:

{


  "rules": {
      "mission-cafe" : {
        ".read": "auth != null", 
        ".write": false
    },
      "issues" : {
        ".read": "auth != null", 
        ".write": "auth != null"
    }
  }
}

When I make an auth request to firebase, I get back a set of user data that looks like this:

Object
accessToken: "eyJhbI-long string-ww3w"

expirationTime: 1631656873062

refreshToken: "ACzBnC another long string dUJHK-"


[[Prototype]]: Object

So, now when I read/write from the Firebase Realtime Database, I think I should pass back one of the tokens as part of the JSON payload in the html.get() or html.patch() statements.

const getString='https://freelance-xxxx-default-tdb.firebaseio.com/xxxxxx.json';
return this.http.get<{ [key: string]: MyData }>(getString).pipe(...)

Key question 1: What is the proper syntax for placing the token data that I got back from the original auth?

As I read the documentation, I should evidently send back an &auth='long-token-string" in the http.get() or patch() statement... but I haven't been able to find documentation about which token to return and whether the keyword auth is in fact the right identifier for that string.

Key Question 2: Apparently sending a uid is an option in lieu of an auth token. In my application, I want to begin with anonymous login, so I won't have a uid at the time of the first data access. Am I missing a concept?

Thanks for the help.

Paul


Solution

  • You need to retrieve the Firebase ID token from the client, by following the method described here in the doc, i.e. firebase.auth().currentUser.getIdToken(/* forceRefresh */ true).

    Then, as explained here, you add it at the end of the url as a query string parameter: const getString = 'https://freelance-xxxx-default-tdb.firebaseio.com/xxxxxx.json?auth=' + idToken

    Since you don't share that much code, here is a generic JS example with the axios library:

     firebase     // use this.fireAuth.signInAnonymously() in your case
        .auth()
        .signInAnonymously()
        .then((userCredential) => {
          // We get the user from the userCredential,
          // but we could very well do firebase.auth().currentUser as well
          return userCredential.user.getIdToken(/* forceRefresh */ true);
        })
        .then((idToken) => {
          return axios.get(
            'https://freelance-xxxx-default-tdb.firebaseio.com/xxxxxx.json?auth=' + idToken
          );
        })
        .then((response) => {
          // handle success
          console.log(response);
        })
        .catch((error) => {
          // handle error
          console.log(error);
        });
    

    Side note: Is there any specific reason for not using the JS SDK for interacting with the RTDB? It is easier than using the REST API.