Can't return value inside Async Function

Question

I have a file dedicated to handling Authentication functions for my React Native App. One of these functions getJWToken is an anonymous async function that tries to get the current user token by the following means:

const auth = db.auth() 
// db === (Firebase.apps.length === 0 ? Firebase.initializeApp(config) : Firebase.app())
// the configuration of the Firebase DB occurs in a config file and db is exported.

const getJWToken = async () => {
    auth.onAuthStateChanged(function(user) {
        if (user) {
            user.getIdToken()
                .then(function(idToken) {
                    return idToken;
                })
                .catch(
                    (error) => {
                        console.log("Cannot get User Token: ", error);
                    }
                )
        }
    });
}

Through console.log I'm able to see that the function returns the token as it's suppose to. The issues arrives when I'm using it in another async function in another file like so:

Service Folder index.js

import * as Auth from './AuthServices'

export {Auth}

App.tsx

// App.tsx
import {Auth} from './src/services'
// The rest in inside an Async Function
signOut: async () => {
 let token
 token = await Auth.getJWToken()
 console.log("token: ", token) // results in undefined
}

Token results in undefined. I have no means of returning the token value from the promise function. I've tried using return on auth.onAuthStateChanged but that results in token evaluating to [Function Bound]. await on auth.onAuthStateChanged does nothing either. I'm truly stumped.

Not sure if promises are the best use for this. (1) You probably want onIdTokenChanged instead of onAuthStateChanged if you're grabbing the idToken. (2) These trigger every time there's a change—a promise can only resolve a value once. You should be listening for this event and storing the result somewhere. Then, getJWToken() can fetch wherever you've cached the token. — DemiPixel
– DemiPixel, Commented Oct 12, 2021 at 8:50

Vivek Vs · Accepted Answer · 2021-10-12 08:54:50Z

1

You have to return at two more places as show in the code . Please reply with this modification, ket us c

const auth = db.auth() 
// db === (Firebase.apps.length === 0 ? Firebase.initializeApp(config) : Firebase.app())
// the configuration of the Firebase DB occurs in a config file and db is exported.

const getJWToken = async () => {
   return  auth.onAuthStateChanged(function(user) {
        if (user) {
           return  user.getIdToken()
                .then(function(idToken) {
                    return idToken;
                })
                .catch(
                    (error) => {
                        console.log("Cannot get User Token: ", error);
                    }
                )
        }
    });
}

answered Oct 12, 2021 at 8:54

Vivek Vs

907 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jevon Cowell · Accepted Answer · 2022-02-20 21:27:24Z

0

While I no longer use this code snippet I was able to solve it like so:

getJWToken 
export const getJWToken =  async () => {
 let result;
 // await is needed here
  await auth.onAuthStateChanged(function(user) {
      if (user) {
          console.log("user")
          // save this promise to result
          result = user.getIdToken()
              .then(function(idToken) {
                  return idToken;
              })
              .catch(
                  (error) => {
                      console.log("Cannot get User Token: ", error);
                  }
              )
      }

});
// return the user.getToken() promise
return result

answered Feb 20, 2022 at 21:27

Jevon Cowell

4111 gold badge4 silver badges15 bronze badges

Collectives™ on Stack Overflow

Can't return value inside Async Function

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related