/storybook-addon-next-auth

🔐 Use NextAuth.js in your Storybook stories

Primary LanguageJavaScriptMIT LicenseMIT

NextAuth.js Storybook Addon

Use NextAuth.js in your Storybook stories.


Respository created to learn more about Storybook Addons

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:

ToolBar menu example

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

Session control example


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

  ...

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.