Auth0 - Refreshing token for google-oauth2 connections

Question

I have a SPA react application where I am using auth0 for authentication. I would like to do a silent authentication and get a new token whenever site is refreshed, like it is suggested in this answer. I have an Auth class responsible for handling tokens:

import auth0 from 'auth0-js'
import { authConfig } from '../config'

export default class Auth {
  accessToken
  idToken
  expiresAt

  auth0 = new auth0.WebAuth({
    domain: authConfig.domain,
    clientID: authConfig.clientId,
    redirectUri: authConfig.callbackUrl,
    responseType: 'token id_token',
    scope: 'openid'
  })

  constructor(history) {
    this.history = history

    this.login = this.login.bind(this)
    this.logout = this.logout.bind(this)
    this.handleAuthentication = this.handleAuthentication.bind(this)
    this.isAuthenticated = this.isAuthenticated.bind(this)
    this.getAccessToken = this.getAccessToken.bind(this)
    this.getIdToken = this.getIdToken.bind(this)
    this.renewSession = this.renewSession.bind(this)
  }

  login() {
    this.auth0.authorize()
  }

  handleAuthentication() {
    this.auth0.parseHash((err, authResult) => {
      if (authResult && authResult.accessToken && authResult.idToken) {
        console.log('Access token: ', authResult.accessToken)
        console.log('id token: ', authResult.idToken)
        this.setSession(authResult)
      } else if (err) {
        this.history.replace('/')
        console.log(err)
        alert(`Error: ${err.error}. Check the console for further details.`)
      }
    })
  }

  getAccessToken() {
    return this.accessToken
  }

  getIdToken() {
    return this.idToken
  }

  setSession(authResult) {
    // Set isLoggedIn flag in localStorage
    localStorage.setItem('isLoggedIn', 'true')

    // Set the time that the access token will expire at
    let expiresAt = authResult.expiresIn * 1000 + new Date().getTime()
    this.accessToken = authResult.accessToken
    this.idToken = authResult.idToken
    this.expiresAt = expiresAt

    // navigate to the home route
    this.history.replace('/')
  }

  renewSession(cb) {
    this.auth0.checkSession({}, (err, authResult) => {
      if (authResult && authResult.accessToken && authResult.idToken) {
        this.setSession(authResult)
        cb(err, authResult)
      } else if (err) {
        this.logout()
        console.log(
          `Could not get a new token (${err.error}: ${err.error_description}).`
        )
      }
    })
  }

  logout() {
    // Remove tokens and expiry time
    this.accessToken = null
    this.idToken = null
    this.expiresAt = 0

    // Remove isLoggedIn flag from localStorage
    localStorage.removeItem('isLoggedIn')

    this.auth0.logout({
      return_to: `${window.location.origin}/login`
    })
  }

  isAuthenticated() {
    // Check whether the current time is past the
    // access token's expiry time
    let expiresAt = this.expiresAt
    return new Date().getTime() < expiresAt
  }
}

In my main App component in componentDidMount I am calling the renewSession method from Auth class:

export default class App extends Component<AppProps, AppState> {
  constructor(props: AppProps) {
    super(props)

    this.handleLogin = this.handleLogin.bind(this)
    this.handleLogout = this.handleLogout.bind(this)
    this.createNewPost = this.createNewPost.bind(this)
  }

  state: AppState = {
    tokenRenewed: false
  }

  componentDidMount() {
    this.props.auth.renewSession(() => {
      this.setState({ tokenRenewed: true })
    })
  }

  handleLogin() {
    this.props.auth.login()
  }

  handleLogout() {
    this.props.auth.logout()
  }

  async createNewPost() {
    const idToken = this.props.auth.getIdToken()
    try {
      const newPost = await createPost(idToken)
      this.props.history.push(`/posts/${newPost.postId}/edit`)
    } catch {
      alert('Post creation failed')
    }
  }

  render() {
    if (!this.state.tokenRenewed) return 'loading...'
    const userAuthenticated = this.props.auth.isAuthenticated()
    return (
      <div>
        <Segment vertical>
          <Grid container stackable verticalAlign="middle">
            <Grid.Row>
              <Grid.Column width={16}>
                <Router history={this.props.history}>
                  {this.generateMenu(userAuthenticated)}
                  {this.generateCurrentPage(userAuthenticated)}
                </Router>
              </Grid.Column>
            </Grid.Row>
          </Grid>
        </Segment>
      </div>
    )
  }

And this are my routes:

<Router history={history}>
  <Switch>
    <Route
      path="/callback"
      render={props => {
        handleAuthentication(props)
        return <Callback />
      }}
    />
    <Route
      path="/login"
      render={props => {
        return <LogIn auth={auth} {...props} />
      }}
    />
    <Route
      path="/"
      render={props => {
        return <App auth={auth} {...props} />
      }}
    />
  </Switch>
</Router>

That works fine if I login with username/password. But, if I use a social login like Google/Gmail then whenever I login in to the app, I get an error from auth0.checkSession in Auth class:

Could not get a new token (login_required: Login required).

How can I make this work with Google/Gmail login as well?