React Native Async Await returns null when called

Question

I am new to React Native and coming from a PHP background.

storage.js

const getToken = async () => {
    try {
        return await SecureStore.getItemAsync(authKey);

    } catch (error) {
        console.log('Error getting auth token:', error)
    }
}

Client.js

const authToken = async () => await storage.getToken();

console.log('clientjs authtoken -->', authToken());

const apiClient = create({
    baseURL: 'http://www.example.com/mobile',
    headers: { Authorization: 'Bearer ' + authToken() },
});

This console.log shows me this: clientjs --> {"_U": 0, "_V": 0, "_W": null, "_X": null}.

I've also simply tried writing: const authToken = storage.getToken(); but getting the same result. What am I doing wrong? Any help would be appreciated.

This output does not seem possible. authToken, being defined as an async function, would always return a promise. Is this your actual code? — Bergi
– Bergi, Commented Sep 13, 2022 at 4:59
can you please let me know what should be the actual code? I tried this and this also did not work: ibb.co/qygwwQ7 — Nihilarian
– Nihilarian, Commented Sep 13, 2022 at 12:27

Abe · Accepted Answer · 2022-09-15 06:40:47Z

2

Since authToken is marked as an async method, its result needs to be awaited or .thened.

const token = await authToken();
const apiClient = create({
    baseURL: 'http://www.example.com/mobile',
    headers: { Authorization: 'Bearer ' + token },
});

The above syntax relies on being inside an async method. You can use .then in a synchronous context:

let apiClient;

authToken().then(token => {
  apiClient = create({
    baseURL: 'http://www.example.com/mobile',
    headers: { Authorization: 'Bearer ' + token },
  });
});

{"_U": 0, "_V": 0, "_W": null, "_X": null} represents an unresolved promise. I wish this was clearer, as it causes a lot of confusion in learning javascript.

Edit: another method to export the client: export a function that returns it.

const getClient = async () => {
  const token = await authToken();
  const apiClient = create({
    baseURL: 'http://www.example.com/mobile',
    headers: { Authorization: 'Bearer ' + token },
  });
  return apiClient;
});

export default getClient;

And then in the component:

  getClient.then(client => {
    client.post( // ...

edited Sep 15, 2022 at 6:40

answered Sep 13, 2022 at 5:06

Abe

5,6082 gold badges18 silver badges28 bronze badges

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

11 Comments

Nihilarian Over a year ago

how can I pass this token variable as the Bearer value? define a new global variable authenticationToken outside then and pass the value of token to authenticationToken inside then and then use authenticationToken variable inside create? If so, I tried this and it did not work. It says undefined.

Abe Over a year ago

It still has to be awaited in that context. I'll update my answer to include the client creation

Gaurav Roy Over a year ago

@Abe is correct, you need to wait for the promise results

Nihilarian Over a year ago

ibb.co/tZvzY6b I tried this as well but the export is then failing as you can see in the image attached.

Abe Over a year ago

I don't see that anything is failing in the image, are you seeing an error somewhere?

|

Collectives™ on Stack Overflow

React Native Async Await returns null when called

1 Answer 1

11 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

11 Comments

Your Answer

Sign up or log in

Post as a guest

Related