Storybook Addon Authorization

Storybook Addon Authorization can be used to getting data from REST API

Installation

npm i -D @itcase/storybook-addon-auth

Configuration

Then, add following content to .storybook/main.ts:

export default {
  addons: ['@itcase/storybook-addon-auth'],
};

Add @itcase/storybook-addon-auth options .storybook/preview.jsx

import type { Preview } from '@storybook/react'

import axios from 'axios'
import { axiosInstanceITCase } from '@itcase/common'

import { RootStoreProvider } from '../src/providers/RootStoreProvider'
import rootStore from '../src/stores/RootStore'

import { USERS } from './config/users'

axios.defaults.headers.post['Content-Type'] = 'application/json'
axios.defaults.headers.post.Accept = 'application/json'
axios.defaults.headers.common.Authorization = `Token ${process.env.AUTH_TOKEN}`
axiosInstanceITCase.defaults.headers.post['Content-Type'] = 'application/json'
axiosInstanceITCase.defaults.headers.post.Accept = 'application/json'

const preview: Preview = {
  parameters: {
    authorization: {
      options: {
        values: USERS,
        signInUrl: `${process.env.REST_BASE_URL}/rest/sign-in/`,
        profileUrl: `${process.env.REST_BASE_URL}/rest/profile/`,
      },
    },
  },
  decorators: [
    (Story: FC, storybookState) => {
      return (
        <RootStoreProvider>
          <Story />
        </RootStoreProvider>
      )
    },
  ],
  loaders: [
    async (storybookState) => {
      const authToken = storybookState.globals.authorization?.token
      if (rootStore.userStore.token !== authToken) {
        rootStore.userStore.update({ token: authToken })
      }
    },
  ],
}

Create user list config/users.ts

import { DEFAULT_USERS } from '@itcase/storybook-addon-auth/defaults'

const USERS = {
  user: {
    name: 'User',
    // 👇 User Token from env
    token: process.env.USER_AUTH_TOKEN,
    color: '#777777'
  },
  manager: {
    name: 'Manager',
    // 👇 User Token from env
    token: process.env.MANAGER_AUTH_TOKEN,
    color: '#D80E4F'
  },
  admin: {
    name: 'Admin',
    // 👇 User Token from env
    token: process.env.ADMIN_AUTH_TOKEN,
    color: '#1EA5FC'
  },
  ...DEFAULT_USERS,
}

export { USERS }

Usage

By default, the authorization toolbar includes a unregistred user.

Use via Authorization tab

You can use the login form to get any user token.

Use via tool

Use a predefined list of users with tokens in config/users.ts