Search code examples
reactjsfirebasetoken

How to send firebase refreshToken ? React


I am using firebase for the first time. (React app) I have 3 social Auth Provider for sign-in. Google, Facebook and Apple. Everything works great until here. But after 1 hour my token expires and I have to sign-out and sign-in again for refreshing my token. I saved the expiration time to my localStorage to check if token expires or not, if yes I invoke the signOut() function manually. But it doesn't solve the problem and not a good approach. I can't find how to refreshToken in firebase. And also, am I need to check expires again and send refreshToken or I have to refresh token on every time page refresh ?

import React from 'react'
import { useHistory } from "react-router";
import auth from "../utils/Auth";

export const useSocialAuth = () => {
    
    const history = useHistory();
    const providerFunc = (socialProvider:any) => {
        const provider = socialProvider();
        provider
          .then((result: any) => {
            console.log(result)
            auth.login(() => {
              localStorage.setItem('exp', result.user._delegate.stsTokenManager.expirationTime)
              localStorage.setItem("userID", result.user.uid);
              localStorage.setItem("tocaToken", result.user.multiFactor.user.accessToken);
              history.push("/");
            });
          })
          .catch((err:any) => console.log(err));
    }

      return providerFunc;
  };


Solution

  • I solved the refresh token problem. All you guys need to add:

    firebase.auth().currentUser.getIdToken(true)
    

    When you make call from a browser .getIdToken(true) will automatically refresh your token. Make call like this:

    firebase.auth().currentUser.getIdToken(/ forceRefresh / true)
    .then(function(idToken) {
    
    }).catch(function(error) {
    
    });
    

    More info: https://firebase.google.com/docs/reference/js/v8/firebase.User#getidtoken