yth-auth

added custom logo and background for apps!

added some profile changes - now you can set your last name to show first, and upload a profile picture. these changes also show in other apps too! (0:22)

uploads were a little annoying to implement - you can’t send files over json so you have to use formdata, but you can’t encode booleans/integers in formdata so you have to use json I worked around this by set up a separate upload endpoint which stores images and sends back an id for use elsewhere.

this makes uploading images elsewhere in the app much easier though! plus, I can set up a schedule to find and remove orphaned images (like if a user changes their profile picture, the old picture can be removed later)

I also spent some time cleaning up the backend, which took some time, but is less exciting than changing your profile picture to a cat :3

added the ability to view and revoke sessions! each session shows the browser and OS you’re using, with icons, as well as your current session.

on top of this, I’ve made a number of small ui changes. it doesn’t look super different, but if you compare 0:29 onwards to a previous devlog, the app feels less busy

• borders are slightly lighter
• corners are slightly more round
• forms have a horizontal layout and more spacing
• form inputs have a white background
• user/session/app tables have a new layout
• the save button is at the bottom of the screen, and only shows when you’ve made changes (with a little animation so you can find it)
• there’s a reset button too!

added consent! consent is always a good thing

for each app a user logs in to, it stores which scopes were granted. the user can then open the app from their homepage, or revoke the app’s access (which deletes all access tokens). - as shown, once I revoke tokens, the test app can no longer read my profile :D

logging in to other apps now works! made a quick demo using better-auth (on a separate website) to test it.

implemented OAuth2 code exchange and user info endpoints. I wrote them using orpc, so they have proper input validation, and as a bonus I can generate OpenAPI docs too ^-^

also added a ‘return_to’ query parameter so if you’re not logged in, it asks you to log in first, then redirects you back where you were.

added creating external apps! this will allow other apps to log in through my system (similar to ‘sign in with google’), access users’ info like their name and email, and also add updates, like adding events they’ve attended to their logbook!

turns out implementing OAuth2/OIDC from scratch is actually not super fun, who would have thought I’m partway though!

in brief, when users want to log in to an app, they’re sent to your auth system first. if they’ve not already used the app before, they can give permission first. then they’re sent back, with a unique code that the app uses to talk to the auth system and find out who the user is. - at the moment, I’ve added a consent page, and am working on adding APIs to allow the app to exchange a code for user info.

there’s a lot of hidden backend work still to do though, like making sure everything is standards-compliant (enough), proper input validation, only allowing specific scopes, detecting token reuse, etc.

added the ‘console’ page! mostly just design for now, but you can update your name and date of birth ^-^

implemented the login flow! the app asks you to login if you already have an account, or to signup if you don’t.

the one-time code field also now auto-focuses, so you can type in a code straight away.

implemented the signup flow! now when you sign up, your account actually gets created and you’re logged in as well

nice extra feature - when you enter your email and click ‘next’, the email input stays in the same place. plus, between each page, the title stays in the same place too!

a lot of this time was spent playing around with different frameworks and seeing what I preferred. I ended up picking TanStack Start just because I liked it, and it doesn’t feel like feature overload

anyway, so I have something to show for 14h, I wrote the signup flow with proper validation, and it’s multi-step so it ‘guides’ a user through signing up. no accounts are created yet (that comes later), but it looks nice