Transcript
The hard work behind a proper authentication system
Synthetic voices · A dialogue adaptation of this article, not a verbatim reading.
01A button with responsibilities
Narrator: I'm Khalil, and this is Maya. You follow a link to a project in Eskiz. The app asks you to sign in. Two fields and a button. This seems manageable.
Maya: I have forgotten my password, and I have opened another tab. I hope that helps.
Narrator: It does, actually. The interesting part is getting you back to your project when the easy version of the story falls apart.
This part of the article02What WorkOS takes care of
Maya: Start with what you bought. Where does WorkOS fit?
Narrator: It checks credentials, supplies verification and reset, and supports the sign-in methods we configure. Its hosted screens do a lot. We wanted control over the layout, the wording, and what happens between steps, so we built our screens on its API.
Maya: You can change the logo on a hosted page. That doesn't give you the choreography.
Narrator: Right. Our backend handles the browser session and access to the application. Our frontend handles the journey. Choosing the custom interface means taking care of all the states the hosted one would have shown for us.
This part of the article03A form has small states too
Maya: I click the email field. Before I've even signed in, the app has to know where I am.
Narrator: Yes. Focus, Caps Lock, an incomplete code, a password policy refusal on registration. Then the bigger branches: verify email, use an authenticator, enroll one, or choose an organization.
Maya: So loading is doing a rather ambitious amount of work as a description.
Narrator: We name the states instead. The server keeps the unfinished sign-in safely on its side, and tells the screen what the person needs to do next.
This part of the article04Different failures, different next steps
Narrator: A wrong password and a server taking a moment need different responses. A rate limit needs a wait. A rejected code can need a fresh sign-in.
Maya: And password recovery shouldn't tell me whether somebody else's email has an account.
Narrator: Exactly. Give the person a useful next step without revealing who is registered. And if an old response arrives after you changed the form, it shouldn't send you back to a screen you already left.
This part of the article05Known person, unfinished workspace
Maya: You've verified who I am. Is the project ready?
Narrator: That's a separate question. The backend still checks access. And a first workspace might still be getting set up. We can say that plainly instead of acting as if you've got your password wrong again.
This part of the article06The destination matters
Maya: Take me back to that project link. I remember why I came.
Narrator: An allowed return destination wins. Without one, a returning sign-in goes to the dashboard. A new password account goes to setup: tell us what you make, or skip, then continue when the workspace is ready.
Maya: And a social sign-in could be either kind of arrival.
Narrator: That's why we check whether setup was answered. The visual handoff has a job too. Keep the sign-in scene in place while the next screen gets ready, without flashing an extra success screen.
Maya: I am perfectly happy for my arrival to be the success message.
This part of the article07An old goodbye
Narrator: Now sign out, lose your connection, and sign back in. When the old logout eventually arrives, it must only end the old session.
Maya: A goodbye should not be allowed to acquire a new target.
Narrator: We bind it to the exact session. Once the server ends it locally, any remaining provider revocation can be delivered separately. The other end of sign-in deserves the same care.
This part of the article08The maker has manners
Maya: There is also a person at a tiny workbench. Why is she looking away?
Narrator: You focused the password. She reacts to focus and outcomes, never the password itself. If it is refused, she has a small reaction. If you correct it, she goes back to looking away.
Maya: Finally, someone in this process who understands when not to look over my shoulder.
Narrator: And the form still works with a still image, or without the picture. The character can add warmth. The text has to explain the problem.
This part of the article09Back to the project
Narrator: We test the paths we hope you rarely see: an expired step, a late response, an interrupted logout, a workspace that isn't ready.
Maya: And if it all works, I get back to the project and forget there was an authentication system.
Narrator: That's a very good review.
This part of the article10Until next time
Narrator: Thanks for listening. Follow along for more articles, experiments, and things that worked on my machine.
Maya: Some of them might even work on yours.
Narrator: No promises. Have a lovely day. Go make something.
Maya: Preferably a cup of tea first. Bye!