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

🎉 NextAuth.js is now part of Better Auth !

This is documentation for NextAuth.js v3, which is no longer actively maintained.

For up-to-date documentation, see the **latest version ** (v4).

Version: v3

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/client"const withSession = (Component) => (props) => {  const [session, loading] = useSession()  // if the component has a render property, we are good  if (Component.prototype.render) {    return <Component session={session} loading={loading} {...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 { session, loading } = this.props    return null  }}const ClassComponentWithSession = withSession(ClassComponent)

Render Prop

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