Nostr Web Client

brugeman 1y ago 💬 91

Introducing nsec.app and nostr-login!

I've shown the prototype of https://nsec.app in December, and it's essentially an nsecbunker in your browser. It is non-custodial - your keys are stored locally in the browser, and apps can get access to your keys using NIP46. We've now turned that prototype into a real thing, and I invite you to try it. Shoutout to nostr:npub149p5act9a5qm9p47elp8w8h3wpwn2d7s2xecw2ygnrxqp4wgsklq9g722q for the designs!

Now how do we help Nostr apps adopt NIP46 for remote key access?

That's where nostr-login library comes in. If your app uses NIP07 to talk to a browser extension, then with just two lines of code you can make it talk over NIP46.

Both of these tools support the new OAuth-like flow proposed by Pablo. Below you can watch a demo of how nostr-login (added to my fork of Snort) works with Nsec.app (or would work with any other nsecbunker).

What this all means is that people could join Nostr on the web, without installing extensions or mobile apps, with their keys stored non-custodially in the Nsec.app, and then could log in to other Nostr apps without copying their private keys.

Demo: https://void.cat/d/JSWwYMTtbWxTDTLpe132Kr.mp4

Links:

Snort+nostr-login: https://snort.nostrapps.org

nsec app: https://github.com/nostrband/noauth

nsec app server: https://github.com/nostrband/noauthd

nostr-login: https://github.com/nostrband/nostr-login

Reply to this note

Please Login to reply.

Discussion

Failed to enable push subscription: AbortError: Registration failed - push service error

brugeman 1y ago

Which OS/browser?

mac, brave

brugeman 1y ago

Thanks, will look into this. Worked fine on Mac/Safari

Same issue for me on mac/brave. I have noticed brave has some new restrictive security settings. I also had problems connecting to ws://localhost relays with it.

brugeman 1y ago

Thanks! My bad, the surface of stuff I had to test these couple days was huge, Brave didn't make it to the list 😂

Maybe it’s time to ditch brave

brugeman 1y ago

Brave disables push api by default, you can enable by going to brave://settings/privacy and enabling "Use Google services for push messaging" https://github.com/firebase/firebase-js-sdk/issues/3195#issuecomment-848036637

Ditching brave

This is exciting to see. I did hit a snag. When I try again, I’m told the username chose, ‘shawn’, is taken.

brugeman 1y ago

Oh yes on iOS it's early to celebrate - you need to enable Web Push API in Safari Settings -> Advanced -> Experimental, and then click 'Share' on nsec.app tab and click 'Add to homescreen' - that's the only way iOS allows push notifications to get delivered. Eventually the 'Settings' part will go away as the feature matures, but we'll need to instruct people about 'Add to homescreen' flow.

All set there. I opened again, and now I see three accounts. Can you delete ‘shawn’ server-side so I can try again via import?

brugeman 1y ago

Done

Do you need to copy the bunker string to log in on another client?

If so, does that mean you have to open this app to copy the bunker string?

brugeman 1y ago

Currently most apps expect a bunker string, so yes - you click Connect app in nsec.app and it shows the bunker url.

If apps adopt nostr-login (or re-implement the OAuth-like flow themselves), users would just enter name@domain (@nsec.app or other nsecbunker domain) and get a popup to confirm the connection.

Cool!

👀

nostr:nevent1qqsyfmy0hqpzgghm2yf4vqwgzj6lu8pkm4zuk2pshqfd2rg7hy27zggprpmhxue69uhkymm4de3k2u3wdehhxarjv4jjumt9qgsrx4k7vxeev3unrn5ty9qt9w4cxlsgzrqw752mh6fduqjgqs9chhgrqsqqqqqpzwcdxx

Okay this is cool.

So on client, users can create new “account” too? Which repo to look into that?

brugeman 1y ago

The create-account flow is described here: https://github.com/kind-0/nsecbunkerd/blob/master/OAUTH-LIKE-FLOW.md

Client (or nostr-login library) fetches nsec.app/.well-known/nostr.json, learns the npub and relay (of the nsec.app server - not the user), sends 'create_account' over NIP46, receives auth_url and shows the popup. Account is created by the auth_url tab (nsec.app or other nsecbunker).

The code for all this is scattered over nostr-login, noauth and noauthd repos at github.com/nostrband

BankSith 1y ago

nostr:npub1xtscya34g58tk0z605fvr788k263gsu6cy9x0mhnm87echrgufzsevkk5s

Bookmarked

anon-dev 1y ago

Sweet

While testing I've created some accounts that shouldn't be there. How do you remove accounts from browser?

Thanks

brugeman 1y ago

Right now there is no way to delete keys in the app itself, you can clear all local data by clicking an icon to the left of tab url in your browser, then choose "Site data" or some such item, and then find "Delete" button. If you imported some real keys then you better have a copy of them in some other place.

d0enakalle🐇⚡ 1y ago

Hey nostr:npub1xdtducdnjerex88gkg2qk2atsdlqsyxqaag4h05jmcpyspqt30wscmntxy !

Do you mind explaining for us non-techies what the advantages of on nsec bunker are compared to browser extensions like nos2x and alby?

brugeman 1y ago

Extension are not available on many mobile platforms. Also with remote signing you can give limited access to your keys to some server-side service that can't talk to your extension - i.e. import your tweets to Nostr, send DMs under your name, etc. Huge space of apps and services becomes viable.

someones got the right idea

https://primal.net/e/note1gnkglwqzys30k5gn2cqus994lcwrdh29ev5rpwqj65x3awg4uyss65xase

nostr:npub1mhcr4j594hsrnen594d7700n2t03n8gdx83zhxzculk6sh9nhwlq7uc226

nostr:npub12rv5lskctqxxs2c8rf2zlzc7xx3qpvzs3w4etgemauy9thegr43sf485vg

I look forward to trying this as I haven't been able to successfully diy nsecbunkerd.

brugeman 1y ago

Your feedback is welcome!

brugeman 1y ago

All of you who generated new keys and claimed their preferred real usernames - I will make a 'transfer name' feature so that you could migrate your name to your real keys eventually.

Prisoner24601 1y ago

Hi how do I get my keys into nsec bunker and will this work in my brave mobile browser?

brugeman 1y ago

Click add account choose advanced then import nsec. There are several reports here that it's not working in brave so I recommend you try signing up first to check with throwaway keys. Will look into the brave issues tomorrow

Game changer

nostr:nevent1qqsyfmy0hqpzgghm2yf4vqwgzj6lu8pkm4zuk2pshqfd2rg7hy27zggpr4mhxue69uhkummnw3ez6ur4vgh8wetvd3hhyer9wghxuet5qgsrx4k7vxeev3unrn5ty9qt9w4cxlsgzrqw752mh6fduqjgqs9chhgrqsqqqqqp4l4w45

Vitor Pamplona 1y ago 💬 8

Very cool! No need for browser extensions on mobile anymore.

nostr:nevent1qqsyfmy0hqpzgghm2yf4vqwgzj6lu8pkm4zuk2pshqfd2rg7hy27zggpzpmhxue69uhkummnw3ezuamfdejsygpn2m0xrvukg7f3e69jzs9jh2ur0cypps8029dmayk7qfyqgzutm5psgqqqqqqs4xmt2h

Amazing trying it tomorrow.

iru@localhot $_ 1y ago

Would be nice to use some kind of U2F effectively storing the secrets on a hardware key.

brugeman 1y ago

We are looking into using WebAuthn. I haven't fully grasped what's possible there yet, but some integration with your existing devices (like auth with your biometrics on the phone) is definitely coming.

👀

eee8f902... 1y ago

You absolute legend 🤝

🚀

Huge !! Amazing work 👏

ABH3PO 1y ago 💬 9

amazing! how do you make sure the nsec is safe on local storage? does the user encrypt it every time?

Nostrudel has nsecbunker support, but I'm getting an "invalid connection URI" when I paste in the bunker link. Any ideas?

brugeman 1y ago

Yes, it's bcs a standard URL class produces different results for bunker urls on mac/ios. I submitted patches to Coracle and Nostrudel to fix this:

https://github.com/coracle-social/coracle/pull/277

https://github.com/hzrd149/nostrudel/pull/131

cc nostr:npub1ye5ptcxfyyxl5vjvdjar2ua3f0hynkjzpx552mu5snj3qmx5pzjscpknpr nostr:npub1jlrs53pkdfjnts29kveljul2sm0actt6n8dxrrzqcersttvcuv3qdjynqn

Hmm ok. I was on linux desktop (Firefox) at the time, so maybe something to look into as well?

This should fixed in next.nostrudel.ninja. I don't think it was due to a difference on mac/ios but instead a bug in my code 😁

brugeman 1y ago

I commented under that PR, I believe it's now broken on next.nostrudel.ninja.

Also, I'm trying to use Nostr-address login on Nostrudel, I enter artur@nsec.app - connect button is disabled, what am I doing wrong?

Don't Believe The Vibe 🌱🍋🍊 1y ago

Amazing. Will try to get this to work for my apps too.

brugeman 1y ago

Wdyt of nostr-login?

Huge!

nostr:nevent1qqsyfmy0hqpzgghm2yf4vqwgzj6lu8pkm4zuk2pshqfd2rg7hy27zggpp4mhxue69uhkummn9ekx7mqzyqe4dhnpkwty0ycuazepgzet4wphuzqscrh4zka7jt0qyjqypw9a6qcyqqqqqqgh7az6j

ocknamo（早く寝ろ） 1y ago 💬 4

これ試してみた。素晴らしいこれにしよう。

nostr:nevent1qqsyfmy0hqpzgghm2yf4vqwgzj6lu8pkm4zuk2pshqfd2rg7hy27zggpzemhxue69uhhyetvv9ujuurjd9kkzmpwdejhgq3qxdtducdnjerex88gkg2qk2atsdlqsyxqaag4h05jmcpyspqt30wsxpqqqqqqzvdk9gn

#m=image%2Fjpeg&dim=864x1920&blurhash=%5B184unxv9FWGsit7t8WC_0W9-%3AW900W9xtW98%5Et7D%25Rk%25Mt9xcWG00og-%3Ba%24%25MR%24-%3Aaw_1RhD%24W9&x=3d2e72462776d73311ce79f9b10a3ac563e9a356865133010d48743ffad95c6e

#m=image%2Fjpeg&dim=864x1920&blurhash=%5BTKd%7DLRks%3Bay00WURjj%5B%25Mt7ofay%7EqRjWBWB00t7t6ofIUWBayfQIUj%5Dj%5BWBIUt7ofj%5B00WBayfQ&x=97caa05b00ba7a8e649179892a49e2531cec27f4ec934f26428f1839eca8c909

greenart7c3 1y ago

nostr:nevent1qqsyfmy0hqpzgghm2yf4vqwgzj6lu8pkm4zuk2pshqfd2rg7hy27zggpp4mhxue69uhkummn9ekx7mqzyqe4dhnpkwty0ycuazepgzet4wphuzqscrh4zka7jt0qyjqypw9a6qcyqqqqqqgh7az6j

ManiMe 1y ago 💬 1

nostr:npub1xdtducdnjerex88gkg2qk2atsdlqsyxqaag4h05jmcpyspqt30wscmntxy nostr:npub149p5act9a5qm9p47elp8w8h3wpwn2d7s2xecw2ygnrxqp4wgsklq9g722q

Thanks to you both for making this nostr-login proof of concept. Local nsec bunker storage is gonna be a game changer.

Trying to integrate your module into my onboarding client. I have a few issues you may consider:

- I’m not a fan of outright obliterating NIP07 login buttons. Especially while we’re all still testing and getting bunker infra set up… some people will still want to sign in via extension. So I won’t call ‘init’, but instead instantiate one of the included components.

- not really a fan of “branding” the login form (as separate from the hosting app). Y’all do deserve credit but this is just too noisy (a theme switcher on the modal …?) and smells like phishing.

- would like to see a “form only” component that I could use right on the signup page, without all that modal stuff.

- my only option then is to instantiate the modal component and try to restyle it. But it cannot be styled. Using svelte, I haven’t found a way to inject CSS overrides to make it “less modaly” …

- I feel like I’m being given a black box of canned functionality and “that’s all you get” … from an opensats funded project.

brugeman 1y ago

Init will not override nip07 extension, so if someone has it they will keep using it as usual.

brugeman 1y ago

This project has nothing to do with opensats.

Re your other points I agree that we should provide much more customization. Which design elements you would like to exclude? Header?

brugeman 1y ago

We could provide just functions that accept username and handle the rest, then you could implement your own forms as you wish. These isn't much login in them aside from checking nip05

Thanks.

I’m still a bit foggy on the how various nip46 implementations work. (I imaging a lot of nostr users and nostr devs still are…tbh… given the recent “awareness” that original nsecbunker has access to read nsecs) Given this, I’m trying to wrap my head around the code your developed with `noauth`, `noauthd`, and `nostr-login`…

In the end, what’s important to me as a client dev is:

- what are minimum tools I need to implement “local storage” nip46 signin and signup form for my users?

- how do i host a “local storage” nsec bunker at my client domain? (if my new signups are gonna get a nip05 name out of it… I’d rather it be from my onboarding client domain… with integrated key management tools right there … cause first client “should be able to be” the only client a new user needs.)

brugeman 1y ago

To implement nip46 sign in simplest thing is nostr-login or nostr-ignition. Couple lines of code and your app can be signed into.

If you want to give new users your own nip05 you don't have to run the full nsec.app service - I can fire onAuth event on sign up and you can run users through your own onboarding and give them your own nip05.

If you do want to host your own version of nsec.app I will have some instructions in readme soon.

These are awesome tools!

My only concern with running either (nostr-login or nostr-ignition) is the lack of customizability. Thanks for offering. Because nostr-login supports “local naec storage”, I’ll use this.

Yes please. I’d like to:

- add a “form only” component for nip46 signup (or signin) without the modal, modal header, or modal footer content.

- run users through my own onboarding, and give them my own nip05 without needing to host nsec.app myself. (Without breaking “oauth” style nip05 signin flow for my new users in other clients?)

P.S. I will prolly want to host nsec.app at my own domain in the future… or provide some affordance for new users to manage their keys from within the onboarding experience.

brugeman 1y ago

Nostr ignition seems to be functionally the same, both are a way to access keys using nip46. It's more customizable atm from what I read in their docs, although I am not sure how ready it is.

Thanks for your feedback I will get back to you when we have more customization options and onAuth event fired for you to run your own onboarding.

cadayton 1y ago

Didn't work for me on Coracle using bunker URL.

brugeman 1y ago

There is a bug in coracle in some browsers, waiting for a fix to get merged

I entered coracle.social with nsec.app bunker url..

brugeman 1y ago

Check this out

nostr:nevent1qqsyfmy0hqpzgghm2yf4vqwgzj6lu8pkm4zuk2pshqfd2rg7hy27zggpr4mhxue69uhkummnw3ez6ur4vgh8wetvd3hhyer9wghxuet5qgsrx4k7vxeev3unrn5ty9qt9w4cxlsgzrqw752mh6fduqjgqs9chhgrqsqqqqqp4l4w45

This is awesome! I’ll play around with it and will try to add it as signing method inside Cashu-address-CLI 🤙

c849ecee... 1y ago

No extension for nostr is going to be a game changer, for mass adoption. One less hurdle to go over. Cheers. 🎉

brugeman 1y ago

On the way there!

Exactly. Great work already.

Which apps/clients are supporting your nsec.app feature atm, please?

brugeman 1y ago

Snort, coracle, habla, nostrudel, nostrapp.link, noogle.lol

Thank you.

What about having a corresponding Lightning address for new ordinary users with Nostr-Login? That's a part of the problem for easy onboarding.

brugeman 1y ago

Looking into it

Thank you.

Guy Swann 1y ago

Just a heads up on UX, I've already eliminated my ability to use my username because i did it using an auto generated key without completely realizing how instantly that was going to be irrevocable. So now i have to make some scammy looking "copy cat" username to connect it to this account 😅

Yeah, I need some tutorials & explanations to understand this work flow better.

Caleb ☧ 1y ago

I did the exact same thing.

brugeman 1y ago

Don't worry, transfer name feature coming

brugeman 1y ago

We've improved the sign up UX, and also added a name transfer feature, could you please try it?

nostr:nevent1qvzqqqqqqypzqv6kmesm89j8jvww3vs5pv46hqm7pqgvpm63twlf9hszfqzqhz7aqyvhwumn8ghj7un9d3shjtnndehhyapwwdhkx6tpdshszrnhwden5te0dehhxtnvdakz7qpq059p6ulldm7frlcyyf4lq4fvfpc2e9tkrsvpvwzxadfsrk9xnutqq8vpes

TheRealFaketoshi 1y ago

Whats the difference to amber?

brugeman 1y ago

It's web app works on all platforms