Authy

Typescript code to use github oauth in sveltekit

Authy uses typescript instead of js. It is a standalone web app that handles login and logout thru github by managing a session cookie [1][2]. Nothing else. It is intended as code to be inserted in a larger sveltekit app to provide login service. Maybe will be someday a svelte component.

To have it working you must register it as an app [1][2] to github and provide an .env file with the placeholders replaced by the appropriate values.

VITE_CLIENT_ID=XXXX
VITE_CLIENT_SECRET=YYY

Some context

It may help if the previous blurb does not make sense to you. Sveltekit does scaffolding and provides services to build reactive sites. It is build on top of vite of vite. and uses svelte components

This is an adaptation of an existing work

This code is an ongoing adaptation of a demo oauth app but to a more recent sveltekit version.

See the original work

For the general principles, see the article and watch the video.

CAVEATS

This started as an exercise to learn sveltekit and to translate something to typescript but it is useful in its own right even if the code is probably naive and clusmsy. Error handling is missing.

Probably this should work with other oauth providers. The registration to these providers should be automated. And handling of passwords could be directly supported instead of relying into a third party. Patches welcome.

Sveltekit is a fast moving target. So this code will probably bitrot very fast. Use this code at your own risks. You have been warned.

incomplete

Below are incomplete notes that need to be converted into mermaid graphs

src/routes/login.ts and src/routes/callback.ts are endpoints without corresponding .svelte files because they are redirects.

The GET in the callback initiated by github in response to the login.

it passes the code search called by src/routes/login.ts https://github.com/login/oauth/authorize?client_id=4f398de41d610156dc90&state=1234 callback handled by src/routes/callback.ts

• Success http://localhost:5173/callback?code=aed77bb3f8d85be53c36&state=1234
• Error http://localhost:5173/callback?error=access_denied&error_description=The+user+has+denied+your+application+access.&error_uri=https%3A%2F%2Fdocs.github.com%2Fapps%2Fmanaging-oauth-apps%2Ftroubleshooting-authorization-request-errors%2F%23access-denied&state=1234