Having trouble getting the accessToken from the user object in Firebase + Typescript?

Question

Having trouble getting the accessToken from the user object in Firebase + Typescript?

I'm facing an issue in my MobX store where I can't retrieve the accessToken from Firebase login, even though the data is present. This pertains to a React-Native environment.

Example:

class GlobalStore {

    @observable loggedIn: boolean;

    @observable user: any;

    @action firebaseStatup = () => {

        firebase.initializeApp({
            apiKey: "somestring",
            authDomain: "app.firebaseapp.com",
            databaseURL: "https://app.firebaseio.com",
            projectId: "app",
            storageBucket: "app.appspot.com",
            messagingSenderId: "1234
         });
         firebase.auth().onAuthStateChanged((user) => {
             this.loggedIn = !!user;
             if (user) {
                  this.user = firebase.auth().currentUser;
                  console.log(this.user); // Displays an Object containing stsTokenManager.accessToken which is the JWT?
                  console.log(this.user.stsTokenManager.accessToken)
              }
          })
     };

console.log(this.user); shows a detailed user object with all information. However, trying to access stsTokenManager.accessToken directly throws an error:

undefined is not an object (evaluating '_this.user.stsTokenManager.accessToken')

How can I successfully retrieve the accessToken that is clearly available?

typescript firebase react-native firebase-authentication

Answer 1

Answer №1

The main issue arose with the fact that the variable user was returning a promise instead of the expected value. To address this, I found a solution that involved storing it in AsyncStorage:

// ... Working with Firebase

    firebase.auth().onAuthStateChanged((user) => {
        this.loggedIn = !!user;
        if (user) {
            this.user = firebase.auth().currentUser;
            user.getIdToken()
                .then(token => this.saveTokenToStorage(token))

        }
    });

@action async saveTokenToStorage(token: string) {
    try {
        await AsyncStorage.setItem('authentication', token);
    } catch (error) {
        // An error occurred while trying to save the data
    }
};

Answer 2

The main issue arose with the fact that the variable user was returning a promise instead of the expected value. To address this, I found a solution that involved storing it in AsyncStorage:

// ... Working with Firebase

    firebase.auth().onAuthStateChanged((user) => {
        this.loggedIn = !!user;
        if (user) {
            this.user = firebase.auth().currentUser;
            user.getIdToken()
                .then(token => this.saveTokenToStorage(token))

        }
    });

@action async saveTokenToStorage(token: string) {
    try {
        await AsyncStorage.setItem('authentication', token);
    } catch (error) {
        // An error occurred while trying to save the data
    }
};

Having trouble getting the accessToken from the user object in Firebase + Typescript?

Answer №1

Similar questions

What is the process of creating a new array by grouping data from an existing array based on their respective IDs?

The Firebase/Firestore security rule seems to be malfunctioning in my case

What is the proper way to define the properties for a higher-order component that will encompass the Route component from React Router?

The object returned by bodyParser is not a string but a data structure

Is there an alternative method to invoke the function aside from setTimeOut()?

Observing network events with Ionic 2, RxJS5, and the Cordova network plugin

Webpack 2.7.0 throws an error: "Unexpected parameter: theme"

Is there a way for me to trace the source of an unclear typescript error message about redeclaring a block-scoped variable named 'length'?

Troubleshooting the clonewithrows array problem in react-native

Unlocking the Secrets of AnimatedInterpolation Values

Creating a checkbox list in Angular tied to ngModel and additional attributes sourced from a JSON array

Loop through object properties with *ngFor

When multiple tabs of a Chrome extension are opened, the onMessage.addListener in the service worker is triggered twice for each tab

What is preventing me from including an additional parameter in a function in TypeScript?

Is it possible to create a data structure that enforces specific keys and values types during initialization?

The error message "Property 'getPickerData' is not found on type 'RefObject>'" indicates that the function getPickerData is not available on

What is the correct way to enhance a generic interface by adding a new generic parameter using declaration merging in TypeScript?

Building a versatile setting within a child component by incorporating TypeScript and deriving state data from the parent component

Error TS2307: Module 'angular' could not be located

Exploring ways to retrieve checkbox values instead of boolean values upon submission in Angular