storybook-addon-next-auth

NextAuth.js Storybook Addon

Use NextAuth.js in your Storybook stories.

Getting Started

Install this library by adding it to your devDependencies:

yarn:

yarn install --dev storybook-addon-next-auth

npm:

npm install --save-dev storybook-addon-next-auth

pnpm:

pnpm add --save-dev storybook-addon-next-auth

Storybook

Add to your storybook preview

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

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

Use toolbar menu

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:

Access current session data in stories

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

  ...

Customize session auth states

This component brings a default set of auth states: unknown, loading, unauthenticated and authenticated.

⏱ Coming Soon

Contributing

⏱ Coming Soon

Author & Credits

Author: Emilio Schaedler Heinzmann

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