Is there any way to use NextAuth in class based component?

[MateuszWawrzynski]

Your question
Is there any way to use NextAuth in class based component? Maybe through props passing or something?

What are you trying to do
My app components are made using ES6 classes. As we know - we can't use hooks there. I have to implement this library to make auth system in this app, but that makes me to rebuild most of my app to function components.

Feedback
-

• Found the documentation helpful
• Found documentation but was incomplete
• Could not find relevant documentation
• Found the example project helpful
• Did not find the example project helpful

[balazsorban44]

You could create a HOC (Higher Order Component) that sends them as props to your class component:

import {useSession} from "next-auth/client"

const withSession = ClassComponent => props => {
  const session = useSession()
  
  if(ClassComponent.prototype.render) { // if the component has a render property, we are good
    return <ClassComponent session={session} {...props}/>
  }

  // if the passed component is a Function Component, there is no need for this wrapper
  throw new Error([
   "You passed a function component, `withSession` is not needed.",
   "You can `useSession` directly in your component."
  ].join("\n"))
}

// Usage

class ClassComponent extends React.Component {
  render() {
    const {session} = this.props
    return null
  }
}

const FuncComponent = ({session}) => {
  const session = useSession() // use this
  return null
}

const ClassComponentWithSession = withSession(ClassComponent)

const FuncComponentWithSession = withSession(FuncComponent) // will throw error, as this is not needed

[balazsorban44]

It's probably because of the hydration step. Nextjs renders a static version of the page. That gets sent to the user. When that is loaded, you'll get the undefined session in the terminal. Then when the interactive code is hydrated, the loading of the session starts. first it is undefined, (and loading is set to true) then it gets downloaded through the /api/auth/session endpoint, and this.props.session becomes the actual value.

[krisztianzagonyi-mintestio]

Exactly. Do you have any idea how can I prevent this?

[balazsorban44]

You can't, it's just Next.js. Don't see a reason why you would struggle preventing it anyway.

[krisztianzagonyi-mintestio]

Thanks for your help. 👍🏽 I have more to learn. :D

[balazsorban44]

I mean I might be wrong myself, but I don't think it is something to worry about. If you start seeing performance issues, then you can start debugging the cause, and if you end up here again, I'll gladly try to help 🙂