Skip to main content
Version: v4

Usage with class components

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>    )  }}