Source: https://next-auth.js.org/tutorials/usage-with-class-components

🎉 NextAuth.js is now part of Better Auth !

Version: v4

On this page

If you want to use the useSession() hook in your class components you can do so with the help of a higher order component or with a render prop.

Higher Order Component

import { useSession } from "next-auth/react"const withSession = (Component) => (props) => {  const session = useSession()  // if the component has a render property, we are good  if (Component.prototype.render) {    return <Component 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")  )}// Usageclass ClassComponent extends React.Component {  render() {    const { data: session, status } = this.props.session    return null  }}const ClassComponentWithSession = withSession(ClassComponent)

Render Prop

import { useSession } from "next-auth/react"const UseSession = ({ children }) => {  const session = useSession()  return children(session)}// Usageclass ClassComponent extends React.Component {  render() {    return (      <UseSession>        {(session) => <pre>{JSON.stringify(session, null, 2)}</pre>}      </UseSession>    )  }}