Noauth Connect

Easy to use web component for NIP-46 Nostr authentication and event signing using Noauth. Visit Nostr Profile Manager for a reference implementation of this project or read below for full details.

Install

CDN:

<script src="https://unpkg.com/noauth-connect/dist/noauth-connect.umd.js"></script>

npm:

npm install noauth-connect

Basic usage

<noauth-connect app-name="My App"></noauth-connect>

<script>
  const widget = document.querySelector('noauth-connect');

  widget.addEventListener('noauth-connected', (e) => {
    const { bunkerUrl, pubkey } = e.detail;
    localStorage.setItem('bunkerUrl', bunkerUrl);
    // Use bunkerUrl for signing
  });
</script>

Configuration

Set these as HTML attributes:

<noauth-connect
  app-name="Your App Name"
  app-url="https://yourapp.com"
  app-icon="https://yourapp.com/icon.png"
  permissions="sign_event:1,sign_event:0,nip04_encrypt"
  button-text="Connect"
  button-color="#2563eb"
  button-text-color="#ffffff"
  theme="dark"
></noauth-connect>

Defaults:

• app-name → "My App"
• app-url → current page origin
• app-icon → none
• permissions → "sign_event:1,sign_event:0"
• button-text → "Connect with Noauth"
• button-color → purple gradient
• button-text-color → white
• theme → "light"

Permissions you can request:

• sign_event:1 - Notes/posts
• sign_event:0 - Profile updates
• sign_event:4 - Encrypted DMs
• nip04_encrypt / nip04_decrypt - NIP-04 encryption
• nip44_encrypt / nip44_decrypt - NIP-44 encryption

Events

// User connected
widget.addEventListener('noauth-connected', (e) => {
  // e.detail: { bunkerUrl, pubkey, relays }
});

// User disconnected
widget.addEventListener('noauth-disconnected', () => {});

// Error occurred
widget.addEventListener('noauth-error', (e) => {
  // e.detail: { error, message }
});

// Widget ready
widget.addEventListener('noauth-ready', () => {});

API

widget.open()           // Open connection flow
widget.disconnect()     // Disconnect
widget.getConnection()  // Get current connection or null

How it works

When someone clicks connect:

1. Widget generates a temporary keypair and random secret token
2. Connects to Nostr relays and starts listening for responses
3. Opens use.nsec.app with a URL like:

   https://use.nsec.app/nostrconnect/<pubkey>?name=YourApp&url=https://yourapp.com&perms=sign_event:1&secret=xyz&relay=wss://relay.nsec.app

4. User picks their account and approves
5. use.nsec.app sends encrypted NIP-46 response via relays (kind 24133)
6. Widget decrypts it (auto-detects NIP-04 vs NIP-44)
7. Returns bunker URL to your app

Save it and use it with your Nostr client library for signing. It works across sessions.

Framework usage

Works with any framework that supports web components.

React:

function App() {
  const ref = useRef();

  useEffect(() => {
    const widget = ref.current;
    const handleConnect = (e) => console.log(e.detail);
    widget?.addEventListener('noauth-connected', handleConnect);
    return () => widget?.removeEventListener('noauth-connected', handleConnect);
  }, []);

  return <noauth-connect ref={ref} app-name="My App" />;
}

Vue:

<template>
  <noauth-connect ref="widget" @noauth-connected="handleConnect" />
</template>

<script setup>
import { ref } from 'vue';
const widget = ref(null);
const handleConnect = (e) => console.log(e.detail);
</script>

Custom backend

Use your own Noauth instance:

<noauth-connect backend-url="https://your-bunker.com"></noauth-connect>

Your backend needs to:

• Accept URLs in format: /nostrconnect/<pubkey>?name=...&url=...&perms=...&secret=...&relay=...
• Send NIP-46 responses via Nostr relays
• Handle connection approval UI

Development

git clone https://github.com/letdown2491/noauth-connect
cd noauth-connect
npm install
npm run dev       # Development server at localhost:5173
npm run build     # Build for production

Security

• Ephemeral keypairs per connection
• NIP-04 & NIP-44 encryption
• No keys stored (only in bunker)
• Relay-based messaging
• Shadow DOM isolation

Related

• Noauth
• NIP-46 Spec
• Nostr Profile Manager