How do I refactor this into withAuth using HOC? Or is it possible to use hooks here?

[deadcoder0904]

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 LoginPage & 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?

How does everyone does this? This seems to be lot of redundant code.

Maybe a new API can be added to next-auth/react?

I did try doing:

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

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

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

	return AuthenticatedComponent
}

But I get an error:

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

on the line:

export default withAuth(Homepage)

[balazsorban44]

We might move this into a different section in the future (I think the name is misleading/wrong), but check this out:

https://next-auth.js.org/getting-started/client#custom-client-session-handling

You can also use the useSession hook with the required parameter: https://next-auth.js.org/getting-started/client#require-session

[deadcoder0904]

Yeah, withAuth or something might make more sense. Also, would love for it to be in TypeScript.

I tried the code that is mentioned there & it keeps redirecting with callbackUrl like the url keeps appending, eg: http://localhost:3000/?callbackUrl=http://localhost:3000/?callbackUrl=http://localhost:3000/ & it keeps going on until I kill the server. It logs signIn to the console which is where I put signIn.

Here's my code:

function Auth({ children }) {
	const { data: session, status } = useSession()
	const isUser = !!session?.user

	useEffect(() => {
		if (status === 'loading') return
		if (!isUser) {
			console.log('signIn')
			signIn()
		}
	}, [status, isUser])

	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

Also, how should I type children? I tried the usual suspects like ReactNode, ReactChild, ReactChildren that usually works but this time it gives TS error on <Auth> saying:

'Auth' cannot be used as a JSX component.
Its return type 'ReactNode' is not a valid JSX element.
Type 'undefined' is not assignable to type 'Element | null'.ts(2786)

I guess this is because of the undefined return inside useEffect. I checked the issue mentioned as well from top-to-bottom but there's no such mention of typed children at all. I tried empty interface Props {} but that doesn't work either.

Anything wrong I'm doing?

My login route lives on / & after login too, my route is /.

I also checked out https://simplernerd.com/next-auth-global-session which does it a little differently but still gives errors.

I even tried router.push('/') instead of signIn() but it still loops infinitely. Is this because my login & dashboard is on the same / route? How do I make it work then?

Furthermore, if I comment signIn(), I don't see redirects anymore. Just Loading...!

And I get these 3 logs:

{status: 'loading', session: undefined}
{status: 'loading', session: null}
{status: 'unauthenticated', session: null}

But still showing Loading...

[deadcoder0904]

since i am on / route after & before login, correct me if i'm wrong, i do think i need a separate /login page or repeated code for the / route to show login page if it's not logged in already.

maybe that's what caused redirection.

[deadcoder0904]

i removed .auth from my / route & kept it like earlier to show a landing when not logged in or app when logged in.

i made my /settings & other pages use .auth property.

1 question i do have is how do i keep clean urls? when i'm not logged in & i type http://localhost:3000/settings then i get redirected to http://localhost:3000/?callbackUrl=http://localhost:3000/settings but i don't want ?callbackUrl as a param.

do i need to remove it manually using router methods?

[wanglophile]

This article was very helpful for me: https://mahieyin-rahmun.medium.com/part-2-how-to-configure-social-authentication-in-a-next-js-183984761e97

[deadcoder0904]

thank you @wanglophile altho i do prefer the official method mentioned above. it probably doesn't work for same route login & dashboard / but let's see.

if that won't work, then i probably have to shift my app to /app route sadly :(