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.
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'
}
}
