Use NextAuth.js in your Storybook stories.

Respository created to learn more about Storybook Addons

Update .storybook/main.js and append to your list of addons:

// .storybook/main.js
module.exports = {
  addons: ['storybook-addon-next-auth']
}

After restarting your storybook, an additional icon will appear in the toolbar. It allows you to select the current session state:

You may now control and test your component state of useSession() by the toolbar items:

If you need to change your stories code while using session values, you may access those by the useSession hook.

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

export const MyStory = (props) => {
  // get access to current session data
  const session = useSession();

  ...

Author: Emilio Schaedler Heinzmann

Special thanks for Tom Freudenberg, the creator of next-auth-mock, where I've based my work for this library.