token.js

// in /pages directory
import React, { useContext, useEffect } from 'react'
import { useRouter } from 'next/router'
import { AWS_ACCESS_TOKEN } from '../utils/constants'
import Auth from '@aws-amplify/auth'
import UserContext from '../lib/UserContext'
import { Loading } from '../components/QueryHandling'

const getAccessToken = hash => {
  const hashStart = hash.substr(hash.indexOf('access_token=') + 'access_token='.length, hash.length)
  return hashStart.substr(hashStart, hashStart.indexOf('&'))
}

// When a user comes back from authenticating, the url looks like this:
//   /token#id_token=....
export default function TokenSetter() {
  const router = useRouter()
  const { setUserContext } = useContext(UserContext)

  useEffect(() => {
    const access_token = getAccessToken(window.location.hash)
    const updateUser = async nothing => {
      try {
        const user = await Auth.currentAuthenticatedUser()
        setUserContext({ user })
        router.replace('/protectedpage')
      } catch {
        router.replace('/unprotectedpage')
      }
    }
    if (access_token) {
      localStorage.setItem(AWS_ACCESS_TOKEN, access_token)
    }
    updateUser()
  }, [])

  return <Loading />
}