How to use NextAuth useSession on Storybook 8

If you want to mock some NextAuth session data so a Story on Storybook 8 behaves as the user is logged in, you can use the <SessionContext> provider in the Story decorator as follows:

  decorators: [
    (Story, context) => {
      return (
        <NextAuthProvider>
          // Put your mocked session data here
          <SessionContext.Provider value={{ data: {} }}>
            <Story />
          </SessionContext.Provider>
        </NextAuthProvider>
      )
    },
  ],

A guy made an addon once, but it's now outdated:
https://github.com/TomFreudenberg/next-auth-mock

Blog

How to use NextAuth useSession on Storybook 8

Mark Kop

Join Our Newsletter. No Spam, Only the good stuff.

Related