How do I refactor this into `withAuth` using HOC? Or is it possible to use hooks here in Next.js?

Question

import { useSession } from 'next-auth/react'

import { LoginPage } from '@/client/components/index'

const Homepage = () => {
  const session = useSession()

  if (session && session.data) {
    return (
      <>
        <div>Homepage</div>
      </>
    )
  }
  return <LoginPage />
}

export default Homepage

Basically, I don't want to write the same boilerplate of Login & useSession() on every page.

I want something like:

import { withAuth } from '@/client/components/index'

const Homepage = () => {
  return (
    <>
      <div>Homepage</div>
    </>
  )
}

export default withAuth(Homepage)

Or if possible withAuthHook?

I currently have done the following:

import React from 'react'
import { useSession } from 'next-auth/react'

import { LoginPage } from '@/client/components/index'

export const withAuth = (Component: React.Component) => (props) => {
    const AuthenticatedComponent = () => {
        const session = useSession()
        if (session && session.data) {
            return <Component {...props} />
        }
        return <LoginPage />
    }

    return AuthenticatedComponent
}

But I get an error:

JSX element type 'Component' does not have any construct or call signatures.ts(2604)

If I use React.ComponentType as mentioned in the answer below, I get an error saying:

TypeError: (0 , client_components_index__WEBPACK_IMPORTED_MODULE_0_.withAuth) is not a function

Answer 1

The answer was hidden in the docs. I had to specify the following Auth function in _app.tsx:

import { useEffect } from 'react'
import { AppProps } from 'next/app'
import { SessionProvider, signIn, useSession } from 'next-auth/react'
import { Provider } from 'urql'

import { client } from '@/client/graphql/client'

import '@/client/styles/index.css'

function Auth({ children }: { children: any }) {
    const { data: session, status } = useSession()
    const isUser = !!session?.user
    
    useEffect(() => {
        if (status === 'loading') return
        if (!isUser) signIn()
    }, [isUser, status])

    if (isUser) {
        return children
    }

    return <div>Loading...</div>
}

interface AppPropsWithAuth extends AppProps {
    Component: AppProps['Component'] & { auth: boolean }
}

const CustomApp = ({ Component, pageProps: { session, ...pageProps } }: AppPropsWithAuth) => {
    return (
        <SessionProvider session={session}>
            <Provider value={client}>
                {Component.auth ? (
                    <Auth>
                        <Component {...pageProps} />
                    </Auth>
                ) : (
                    <Component {...pageProps} />
                )}
            </Provider>
        </SessionProvider>
    )
}

export default CustomApp

And on my actual page, I had to specify Component.auth as true:

const Homepage = () => {
  return (
    <>
      <div>Homepage</div>
    </>
  )
}

Homepage.auth = true
export default Homepage

A nice summary of what it does can be found on https://simplernerd.com/next-auth-global-session

Answer 2

Have you tried:

export const withAuth = (Component: React.ComponentType) => (props) => {
... 

https://flow.org/en/docs/react/types/#toc-react-componenttype

Edit: Try like this:

export const withAuth = (Component: React.ComponentType) => (props) => {
    const session = useSession()
    if (session && session.data) {
        return <Component {...props} />
    }
    return <LoginPage />
}

return AuthenticatedComponent

}