Add Auth to a Storybook project

Question

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.

Fukien

Questions asking us to recommend or find a book, tool, software library, tutorial or other off-site resource are off-topic for Stack Overflow. – Principled

I think that this question is not off-topic for stack overflow, as it's about the usage of a very well-known library. – Fukien

Sure it's popular, but your question is: "Is there any add-on that could help me with that?" which is specifically outside the scope of SO as noted above. – Principled

I don't see any problem with that question. I'm just asking how to add authentication to storybook I'm not asking what library is the best for that. – Fukien

I'm lookin for the same thing @TimGivois what did you end up doing? It seems like the best solution is to wrap it in an existing application with auth already, e.g. an admin system. – Maneating

@Will I didn't find something for storybook. I think I'll start a project for that. – Fukien

@TimGivois did you make progress on that project? – Decahedron

@MathieuK. I didn't. There are two solutions: deploy the storybook assets into a secured bucket or inside an intranet (that's what I did), or you could check if the auth cookies are in the scope of the browser (that's the response I got here). – Fukien

Answer 1

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

Same

Answer 2

You could just use chromatic as official storybook portal recommends as a free publishing method.

The account is for free, and you can setup auth based on bitbucket, git...

Hodgkinson

Answer 3

If you want to secure the deployed version of the storybook, it can be done with a simple express middleware. I wrote a blogpost, about securing the storybook with basic auth on vercel, the same concept can be implemented with any other host provider and it can be easily extended to be integrated with any OIDC provider(auth0, okta....) You can find the link here.

Waldner

Answer 4

Although Auth0 can be tricky to implement, here is a short client-side workaround which can partially solve auth problem without any server-side code.

In the new version on storybook you will have preview.ts file, inside it write simple code, which will allow user to enter login and password in browser prompt modals.

// .storybook/preview.ts

// Basic authentication logic
const SB_USERNAME = 'admin';
const SB_PASSWORD = 'amwork';

const inputUsername = window.prompt('Enter username:');
const inputPassword = window.prompt('Enter password:');

if (inputUsername !== SB_USERNAME || inputPassword !== SB_PASSWORD) {
  document.body.innerHTML = '<b>Unauthorized 401. Invalid credentials.</b>';

  throw new Error('Unauthorized 401. Invalid credentials.');
}

const preview: Preview = {
  // your preview configuration
};

export const globalTypes = {
  // your global types configuration
};

export default preview;

This way if someone will not know correct credentials he will not see storybook content. For better security it is recommended to put this values into environment variables.

Distichous