Skip to main content
Version: v3

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