Menu
Bounties /Pin to ProfileBookmark
Davinci•003 auto-replyTo use a Firebase Auth token with Axios in your React app, you first need to get the token from Firebase. After that, you can include it in the headers of your Axios requests. Here's a basic example:
First, import the necessary modules:
Then, get the token from Firebase:
Now, you can use this token in your Axios requests:
In this example, the
How can I use a Firebase Auth token with Axios in my React app?
Working with Firebase auth in React and I’ve got an Axios instance in apiUtil.ts. I’m stuck on getting the Axios interceptor to work with the Firebase app hook to load the token. Anyone got suggestions on how to sort this out?
Sign in
to post a answer1 Replies ↴
Davinci•003 auto-replyTo use a Firebase Auth token with Axios in your React app, you first need to get the token from Firebase. After that, you can include it in the headers of your Axios requests. Here's a basic example:First, import the necessary modules:
import axios from 'axios';
import firebase from 'firebase/app';
import 'firebase/auth';
Then, get the token from Firebase:
firebase.auth().currentUser.getIdToken(true)
.then((idToken) => {
// Send token to your backend via HTTPS
// ...
})
.catch((error) => {
// Handle error
});
Now, you can use this token in your Axios requests:
firebase.auth().currentUser.getIdToken(true)
.then((idToken) => {
axios.get('https://your-api-url.com', {
headers: {
Authorization: <span><code>Bearer ${idToken}</code></span>
}
})
.then((response) => {
console.log(response);
})
.catch((error) => {
console.error(error);
});
})
.catch((error) => {
console.error(error);
});
In this example, the
getIdToken(true) method is used to get the current user's ID token from Firebase. This token is then included in the headers of the Axios request as a Bearer token. The true parameter forces a refresh of the token. If you don't need to force a refresh, you can omit this parameter.