refresh token aws amplify

app.js

import React, { useEffect, useState } from 'react'
import { hot } from 'react-hot-loader/root'
import { setConfig } from 'react-hot-loader'
import { CssBaseline } from 'lib_site/components'
import {
  ThemeProvider,
  makeStyles,
} from 'lib_site/styles'

import { Auth, Hub } from 'aws-amplify'
import { useQuery, useMutation } from '@apollo/client'
import { ENV } from './config'

import Header from './components/header'
import SideMenu from './components/side-menu'
import Background from './components/background'
import RoutesAdmin from './routes-admin'
import RoutesNotLoggedIn from './routes-not-loggedin'
import { sessionCheck } from '~/src/utils/session-check'

import { GET_ACCESS_TOKEN } from './operations/queries'
import { MUTATION_ACCESS_TOKEN, MUTATION_CURRENT_USER } from './operations/mutations'
import { CURRENT_PERSON } from '~/src/graphql'
import LoadingFetch from '~/src/components/loading/fetch'
import styles from './styles'
import theme from './theme'

const useStyles = makeStyles(styles)

const App = () => {
  const classes = useStyles()
  const [load, setLoad] = useState(true)
  const { data: session } = useQuery(GET_ACCESS_TOKEN)
  const [currentPerson] = useMutation(CURRENT_PERSON)
  const [addCurrentUser] = useMutation(MUTATION_CURRENT_USER)

  const [addAccessToken] = useMutation(MUTATION_ACCESS_TOKEN)

  const refreshToken = (cognitoUser, currentSession) => {
    return new Promise((resolve, reject) => {
      cognitoUser.refreshSession(currentSession.refreshToken, (err, data) => {
        if (err) reject(err)
        const { accessToken } = data
        addAccessToken({ variables: { token: accessToken.jwtToken } })
        resolve(true)
      })
    })
  }

  const checkSession = async () => {
    try {
      setLoad(true)
      const cognitoUser = await Auth.currentAuthenticatedUser()
      const currentSession = await sessionCheck()

      const responseUser = await currentPerson()
      if (!responseUser) throw new Error('data error')

      await refreshToken(cognitoUser, currentSession)

      addCurrentUser({ variables: { user: currentSession?.idToken?.payload, person: responseUser?.data?.currentPerson?.person } })

    } catch (e) {
      console.log('Unable to refresh Token', e)
    } finally {
      setLoad(false)
    }
  }

  useEffect(() => {
    Hub.listen('auth', async (data) => {
      const { payload } = data
      // eslint-disable-next-line default-case
      switch (payload.event) {
      case 'signIn':
        console.log('user signed in')
        break
      case 'cognitoHostedUI':
        break
      case 'signUp':
        console.log('user signed up')
        break
      case 'signOut':
        console.log('user signed out')
        break
      case 'signIn_failure':
        console.log('user sign in failed')
        break
      case 'configured':
        console.log('the Auth module is configured')
        break
      }
    })
  }, [])

  useEffect(() => {
    checkSession()
  }, [])

  const main = () => {
    if (load) return null
    return (
      <>
        {session?.accessToken ? (
          <>
            <SideMenu />
            <div className={classes.app}>
              <Header />
              <main className={classes.main}>
                <Background />
                <RoutesAdmin />
              </main>
            </div>
          </>
        ) : <RoutesNotLoggedIn />}
      </>
    )
  }

  const loadComponent = () => {
    return (
      <LoadingFetch />
    )
  }

  return (
    <>
      <ThemeProvider theme={theme}>
        <div className={classes.root}>
          <CssBaseline />
          {load ? loadComponent() : main()}
        </div>
      </ThemeProvider>
    </>
  )
}

if (ENV !== 'PROD') setConfig({ logLevel: 'debug', trackTailUpdates: false })

export default hot(App)