Storybook v8 + Next.js 14 + Auth.js setup help

[desiboli]

Summary

Hi!

With Storybook V6 and V7 I was able to use this plugin @tomfreudenberg/next-auth-mock to mock auth data in order to be able to show/create stories of components using session.

When upgrading to V8 everything stopped working, the plugin is not up to date with all the changes from the Storybook team.

Is there anyway I can make components/stories using session work again ?
I need guide on how to set this up with Next.js + Auth.js. If anyone has successfully tried this already with Storybook v8 🙏

I need guidance 🙏

Additional information

No response

Create a reproduction

No response

[woodsboe]

Hi @desiboli,
This may not be the perfect solution, but more of a workaround.

Create a decorator file (ex. authDecorator.tsx) and load this in your preview.ts file.

The file should contain the following:

import {SessionContext} from 'next-auth/react';

export const NextAuthDecorator = (Story) => {
  const mockSessionData = {
    expires: '',
    user: {
      name: 'Storybook',
      email: 'storybook@stories.org',
    },
  };

  return (
    <SessionContext.Provider
      value={{
        update: () => {
          return Promise.resolve(mockSessionData);
        },
        data: mockSessionData,
        status: 'authenticated',
      }}
    >
      <Story/>
    </SessionContext.Provider>
  );
};