Adding custom authorization headers for private registry compatibility

[brychter-hippo]

I hope this message finds you well. I am writing to propose an enhancement to the shadcn library that would significantly benefit our company and potentially other organizations with similar requirements.

Current Situation and Requirement

Our company aims to establish a private registry for our design system library, utilizing a private GitHub repository as the primary storage. We wish to maintain the privacy of our repository while still leveraging the npx shadcn command for package management.

Proposed Solution

We have identified a straightforward method to achieve this functionality by modifying the fetch function in the following file:

ui/packages/shadcn/src/registry/api.ts

Line 189 in fed2bac

const response = await fetch(url, { agent })

The modification involves adding an authorization header:

{
  headers: {
    "Authorization": "Token {{personal_token}}"
  }
}

This approach is further elaborated in the following GitHub discussion:
https://github.com/orgs/community/discussions/22537#discussioncomment-3237244

Enhancement Suggestion

To maximize flexibility and accommodate various security implementations, we propose allowing the addition of custom authorization headers. This enhancement would enable the use of not only GitHub but any private URL secured through similar authentication methods.

Benefits

1. Increased security for organizations using private repositories
2. Greater flexibility in choosing storage solutions
3. Improved compatibility with various authentication methods

We believe this enhancement would significantly increase the utility of shadcn for enterprise users and organizations with specific security requirements.

Thank you for considering this proposal. We look forward to your feedback and the possibility of implementing this feature in a future release.

[pruthvip15]

Ia this implemented, or is there a workaround for this ?

[axieum]

For the time being, we wrote our own shadcn cli wrapper that uses @mswjs/interceptors to intercept HTTP requests and rewrite them to include the Authorization header based on their ~/.npmrc file. Our registry is hosted on JFrog Artifactory. It saves having to deploy a web server 24/7 that hosts the registry.

[axieum]

#!/usr/bin/env node --no-warnings
/**
 * A shadcn/ui CLI wrapper that provides appropriate proxy and authentication support.
 */

import * as fs from 'node:fs';
import * as os from 'node:os';
import path from 'node:path';
import { BatchInterceptor } from '@mswjs/interceptors';
import nodeInterceptors from '@mswjs/interceptors/presets/node';
import { ProxyAgent, fetch } from 'undici';
import packageJson from './package.json' with { type: 'json' };

const NPM_RC_PATH = path.join(os.homedir(), '.npmrc');
const NPM_REGISTRY = packageJson.publishConfig.registry.replace(/(?<=\/artifactory\/)api\/npm\//, '');
const ARTIFACTORY_REGISTRY_URL = process.env.SHADCN_UI_REGISTRY_URL ??
  `${NPM_REGISTRY}/${packageJson.name}/-/${packageJson.name}-${packageJson.version}.tgz!/package/public/r`;
  
(() => {
  // Replace '@myorg/' with the Artifactory artefact URL (append '.json' if not present)
  // This allows you to do `npx my-org-shadcn add @myorg/button` which gets expanded to the full Artifactory URL
  process.argv = process.argv.map((arg) =>
    arg.startsWith('@myorg/') ? `${ARTIFACTORY_REGISTRY_URL}/${arg.slice(9).replace(/\/.json$/, '')}.json` : arg,
  );

  // Acquire authentication token
  let authToken = null;
  if (fs.existsSync(NPM_RC_PATH)) {
    authToken = fs
      .readFileSync(NPM_RC_PATH, 'utf8')
      .split('\n')
      .map((line) => line.trim().split('='))
      .find(([key]) => key.endsWith(':_authToken'))?.[1];
  }

  // Set up network interceptors
  new BatchInterceptor({ name: packageJson.name, interceptors: nodeInterceptors })
    .on('request', async ({ request, controller }) => {
      const host = request.headers.get('Host');

      // artifactory.my.org
      if (host === 'artifactory.my.org' && authToken) {
        return request.headers.set('Authorization', `Bearer ${authToken}`);
      }

      // todo: you can add other logic for other hosts like `ui.shadcn.com` etc. here

      // untrusted host or missing `authToken`, no-op
    });
    .apply();
    
  // Run shadcn/ui CLI
  import('shadcn');
})();

Add this to your package's {"bin": "cli.js"} so you can npx my-org-shadcn.

[rkrishnasanka]

Wouldn't it just make sense for it pull the github repo and build it while adding components from the registry ?

This whole hosting thing is weird

[HichemTab-tech]

Hello guys, I guess this would help right ? : #7745