Create Axios instance with taking token from AsyncStorage

Question

In my React Native App, I want to create an Axios instance to send headers to the backend with a token taken from AsyncStorage. However, the following Token() always returns an object( Promise ) instead of actual token so that 'Authorization' header is something like [Object object].

    import axios from 'react-native-axios'
    import AsyncStorage from "@react-native-community/async-storage"
    
    const Token = async () => {
        try {
          await AsyncStorage.getItem("token").then(
            token => token
          );
        } catch (error) {
          return null;
        }
      }
    
    export default axios.create({
          baseURL: 'http://192.168.1.100:8080/api',
          headers: {
            'Authorization': 'Bearer '+ Token(),
            'Content-Type': 'application/json'
          }
    })

How can I take the actual token and use it in axios instance?

grreeenn · Accepted Answer · 2024-05-12 20:58:24Z

32

Below is how I managed to solve the problem.

As @Prithwee said, I decided to use axios( not react-native-axios) interceptors and set it up in App.js as follows.

    import React, {Component} from 'react';
    import DrawerNavigator from './Utils/DrawerNavigator'
    import {
      createAppContainer
    } from 'react-navigation';
    import axios from 'axios'
    import AsyncStorage from "@react-native-community/async-storage"
    
    axios.defaults.baseURL='http://192.168.1.100:8080/api'
    
    axios.interceptors.request.use(
      async config => {
        const token = await AsyncStorage.getItem('token')
        if (token) {
          config.headers.Authorization = "Bearer "+token
        }
        return config
      },
      error => {
        return Promise.reject(error)
      }
    );
    
    const App = createAppContainer(DrawerNavigator);
    
    export default App;

edited May 12, 2024 at 20:58

grreeenn

2,6031 gold badge25 silver badges35 bronze badges

answered Jul 16, 2019 at 16:49

Pavindu

3,1338 gold badges54 silver badges91 bronze badges

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

2 Comments

Vishal Jadav Over a year ago

Have you get null value for await AsyncStorage.getItem('token') anytime? I am use the same code like you but while using application sometimes await AsyncStorage.getItem('token') returns null token.

Pavindu Over a year ago

Maybe you haven't set the token first using AsyncStorage.setItem("token",value)?

Prithwee Das · Accepted Answer · 2019-07-15 05:28:05Z

4

A better way would probably be using axios interceptors. this way you can both intercept the request and send your tokens and also when you send refreshed tokens in response you can get that and save them in async storage.

answered Jul 15, 2019 at 5:28

Prithwee Das

5,3162 gold badges18 silver badges28 bronze badges

Comments

Jonathan Sanchez · Accepted Answer · 2020-09-04 15:44:40Z

By using @Pavindu's solution, I've implemented this solution that could be implemented all throughout any components needed.

base.js

import axios from 'axios'
import { AsyncStorage } from 'react-native'

axios.defaults.baseURL = 'http://yourAPIaddress.com'

const apiInstance = axios.create()

apiInstance.interceptors.request.use(
    async config => {
        const token = await AsyncStorage.getItem('token')
        //console.log(token)
        if (token) {
            config.headers.Authorization = 'Bearer ' + token
            //console.log(config.headers.Authorization)
        }
        return config
    },
    error => {
        return Promise.reject(error)
    }
)

export default apiInstance

Your component

import apiInstance from '../api/base'


export default () => {
    const [stores, setStores] = useState([])
    
    use Effect(() => {
        apiInstance
            .get('../api/stores')
            .then(res => {
                setStores(res.data)
            })
            .catch(err => {
                alert(err)
                console.log(err)
            })
    },    [])
    
    return [stores]
}

Collectives™ on Stack Overflow

Create Axios instance with taking token from AsyncStorage

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related