javascriptstorybook

Add Auth to a Storybook project

Is there a way to add authentication to Storybook? I'd want to use authentication in my Storybook project (my preferred auth provider being Auth0).

Is there any add-on that could help me with that? I believe that it's a usual use case and there should be something already built.

Solution

  • There is no Auth add-on for Storybook and most probably won't ever be, because it is not in the scope of what Storybook is meant for: To be a scaffolding toolset for building out your own component library.

    Auth functionality would be in the scope of what your application / components do.

    Also Storybook is a multi-framework tool, so you can build components with frameworks like Vue, React, Angular etc. or even pure webcomponents. Choosing an auth library depends on which framework are you using with Storybook.

    But to elaborate how you would add a plugin to be available in the scope of your stories, you can do like this (a Vue in TypeScript example):

    // File: src/plugins/some-auth.ts
import Vue from 'vue';
import SomeAuthPluginForVue from 'SomeAuthPluginForVue';

Vue.use(SomeAuthPluginForVue);

    // File: src/plugins/index.ts
import './some-auth';

    // File: config/storybook/config.js
import { configure } from '@storybook/vue';

// Import Vendor Plugins
import '../../src/plugins';

// Import Styles
import '../../src/assets/styles/index.scss';

const req = require.context('../../src/stories', true, /.stories.js$/);

function loadStories() {
  req.keys().forEach((filename) => req(filename));
}

configure(loadStories, module);