NextJS+TypeScript+FC Authentication HOC example

withAuth-HOC.md

NextJS TypeScript Higher Order Functional Component

import { useState, useEffect, FC } from 'react';
import { useRouter } from 'next/router';

export const withAuth = <P extends object>(C: FC<P>) => {
    return (props: P) => {
        const router = useRouter();
        useEffect(() => {
            const token = window.localStorage.getItem("token");
	    // Authentication Checking ...
            fetch('/validate', {
                method: 'post',
                body: JSON.stringify({ token })
            }).then(res => {
                if (res.status !== 200) {
                    router.replace("/login")
                }
            })
        }, [])
        return <C {...props} />
    }
}

Additionally a useState can be used to conditionally show Preloading skeleton while auth checking

Thank you. It's quite helpful