import axios from 'axios' import Head from 'next/head' import Image from 'next/image' import { useRouter } from 'next/router' import { useEffect, useState } from 'react' import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' import siteConfig from '../../config/site.json' import Navbar from '../../components/Navbar' import Footer from '../../components/Footer' import { obfuscateToken, requestTokenWithAuthCode } from '../../utils/oAuthHandler' import { LoadingIcon } from '../../components/Loading' export default function OAuthStep3({ accessToken, expiryTime, refreshToken, error, description, errorUri }) { const router = useRouter() const [expiryTimeLeft, setExpiryTimeLeft] = useState(expiryTime) useEffect(() => { if (!expiryTimeLeft) return const intervalId = setInterval(() => { setExpiryTimeLeft(expiryTimeLeft - 1) }, 1000) return () => clearInterval(intervalId) }, [expiryTimeLeft]) const [buttonContent, setButtonContent] = useState( <> Store tokens ) const sendAuthTokensToServer = async () => { setButtonContent( <> Storing tokens ) await axios .post( '/api', { obfuscatedAccessToken: obfuscateToken(accessToken), accessTokenExpiry: parseInt(expiryTime), obfuscatedRefreshToken: obfuscateToken(refreshToken), }, { headers: { 'Content-Type': 'application/json', }, } ) .then(_ => { setButtonContent( <> Stored! Going home... ) setTimeout(() => { router.push('/') }, 2000) }) .catch(_ => { setButtonContent( <> Error storing the token ) }) } return (
{`OAuth Step 3 - ${siteConfig.title}`}
fabulous celebration

Welcome to your new onedrive-vercel-index 🎉

Step 3/3: Get access and refresh tokens

{error ? (

Whoops, looks like we got a problem: {error}.

{description}

{errorUri && (

Check out{' '} Microsoft's official explanation {' '} on the error message.

)}
) : (

Success! The API returned what we needed.

    {accessToken && (
  1. {' '} Acquired access_token:{' '} {`${accessToken.substring(0, 60)}...`}
    2. )} {refreshToken && (
  2. {' '} Acquired refresh_token:{' '} {`${refreshToken.substring(0, 60)}...`}
    3. )}

These tokens may take a few seconds to populate after you click the button below. If you go back home and still see the welcome page telling you to re-authenticate, revisit home and do a hard refresh.

Final step, click the button below to store these tokens persistently before they expire after{' '} {Math.floor(expiryTimeLeft / 60)} minutes {expiryTimeLeft - Math.floor(expiryTimeLeft / 60) * 60}{' '} seconds. Don't worry, after storing them, onedrive-vercel-index will take care of token refreshes and updates after your site goes live.

)}
) } export async function getServerSideProps({ query }) { const { authCode } = query // Return if no auth code is present if (!authCode) { return { props: { error: 'No auth code present', description: 'Where is the auth code? Did you follow step 2 you silly donut?', }, } } const response = await requestTokenWithAuthCode(authCode) // If error response, return invalid if ('error' in response) { return { props: { error: response.error, description: response.errorDescription, errorUri: response.errorUri, }, } } const { expiryTime, accessToken, refreshToken } = response return { props: { error: null, expiryTime, accessToken, refreshToken, }, } }