New
NextJS, SvelteKit, Remix and the future of StorybookAutomate with Chromatic
Star75,387
Back to integrations
Add your integration
Categories
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
Nextjs auth0
Managed userProvider decorator for nextjs-auth0
npm install storybook-addon-next-auth0
Last updated over 1 year ago
862
Downloads per week
Readme View on GitHub

storybook-addon-next-auth0

Allows you to use useUser from @auth0/nextjs-auth0

It decores your stories with a mocked UserProvider that you can control on a storybook panel.

screencap

Install

npm i -d storybook-addon-next-auth0

configuration

add "storybook-addon-next-auth0" to you .storybook/main.js addons

That's all.

example

module.exports = {
const path = require("path");

module.exports = {
  "stories": [
    "../components/**/*.stories.@(js|jsx)",
    "../pageStories/**/*.stories.@(js|jsx)",
  ],
  "addons": [
    'storybook-addon-next-auth0',
    "@storybook/addon-links",
    "@storybook/addon-essentials",
  ],
}

Stories

You can pass the initial useUser value to any story though story's parameters

example

stories/Example.stories.js

import React from "react";
import { UserPrint } from "./Example";

export default {
  title: "Example/User",
  component: UserPrint,
  parameters: {
    initialUser: {
      isLoading: true,
    }
  }
};

export const Loading = () => <UserPrint />

export const Logged = () => <UserPrint />
Logged.parameters = {
  initialUser: {
    isLoading: false,
    user: {
      email: 'john@doe.com',
      email_verified: true,
      nickname: 'Joe',
      picture: 'https://picsum.photos/200',
      sub: 'mock:johndoe',
      updated_at: '2021-04-02T12:42:42.042Z',
    }
  }
}

export const ErrorStory = () => <UserPrint />
ErrorStory.parameters = {
  initialUser: {
    isLoading: false,
    error: 'Something went wrong'
  }
}
Join the community
5,862 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI