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

[desiboli]

@woodsboe Thank you life saver!

I was not sure why it didn't work with passing the Story from the preview.ts file but I ended up adding the children prop instead of using Story in the authDecorator.tsx file. How do you use it in preview.tsx ? This is how it looks now:

import { SessionContext } from "next-auth/react"

export default function NextAuthDecorator({
  children,
}: {
  children: React.ReactNode
}) {
  const mockSessionData = {
    expires: "",
    user: {
      personContract: {
        firstName: "John",
        lastName: "Doe",
      },
      name: "Storybook",
      email: "storybook@stories.org",
    },
  }

  return (
    <SessionContext.Provider
      value={{
        update: () => {
          return Promise.resolve(mockSessionData) as any
        },
        data: mockSessionData as any,
        status: "authenticated",
      }}
    >
      {children}
    </SessionContext.Provider>
  )
}

and my preview.tsx file looks like this:

import "@/styles/globals.css"

import React from "react"
import { Lexend } from "next/font/google"
import { withThemeByClassName } from "@storybook/addon-themes"
import { Preview } from "@storybook/react"
import { NextIntlClientProvider } from "next-intl"
import { ThemeProvider } from "next-themes"

import messages from "../messages/en.json"
import NextAuthDecorator from "../src/authDecorator"
import { timeZone } from "../src/common/constants"

const lexend = Lexend({
  subsets: ["latin"],
  display: "swap",
  variable: "--font-lexend",
})

const preview: Preview = {
  parameters: {
    nextjs: {
      appDirectory: true,
    },
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/,
      },
    },
  },
  decorators: [
    (Story) => (
      <ThemeProvider attribute="class">
        <NextIntlClientProvider
          timeZone={timeZone}
          locale="en"
          messages={messages}
        >
          <div className={lexend.className}>
            <NextAuthDecorator>
              <Story />
            </NextAuthDecorator>
          </div>
        </NextIntlClientProvider>
      </ThemeProvider>
    ),
    withThemeByClassName<any>({
      // <Renderer>
      themes: {
        light: "",
        dark: "dark",
      },
      defaultTheme: "light",
    }),
  ],
}

export default preview

Thank you for your help!