Design treatment and messaging for "Login with ATProto"

[bmann]

Starting from this issue thread, we had a live call today with a number of people sharing design concepts, as well as narrowing down what we want to achieve.

We talked about protocol logos and a bunch of other things, but ultimately scoped this down to "how do we share a base approach for logins that says to users that they can enter an ATProto handle and login".

The ideal outputs would be a symbolm, some help/info text, as well as default HTML/CSS/JS. Developers could drop this into their applications and have some visual and interaction similarity. A call to action to login with ATProto.

Further directions might include a protocol logo (but: git has a protocol logo no one knows, and use Github or Gitlab), some consideration for how OAuth scopes for specific apps look like, or other protocol level design and branding elements.

Please share any imagery in this thread, as well as links to mockups, code, or other elements.

[bmann]

Here's an example login for https://recipe.exchange

• just says handle with the @
• specifically says to go sign up with Bluesky and come back
• app specific colours, you have to know what this is

[ebwinters]

side note: whatever design chosen, it would be helpful to update the statusphere example app to use that common library or implement the design

This is where a lot of devs start tinkering so having the right login components from the start will help people get going faster and using common frameworks. I'm personally having a little trouble getting the repo owner's attention since I've added jetstream ingestion

[bmann]

Great point @ebwinters

[bmann]

Here's an example from WhiteWind, the long form blogging app

• sign in with Bluesky account -> leads to next screenshot
• sign up goes straight to Bluesky app (which, to be fair, lets you do third party sign up! so that's something else to consider...)

• labeled with "Bluesky handle or DID"
• <username>.bsky.social as placeholder
• it does support self hosted PDS