サーバ屋日記

TL;DR Introduction What I Implemented Anonymous User Page Authenticated User Page HTMX with FastAPI Sign In Overview Frontend Auth Sign in with Google button The Callback Function Backend Auth Sign Out Overview Frontend Backend Switch Navbar Protecting Routes Conclusion Seeking Oppotunities TL;DR The “Sign in with Google” feature has been integrated into a sample HTMX+FastAPI web application. Either an HTML or JavaScript version of a code snippet from Google’s code generator is included in the HTML to display the button. The FastAPI backend has been configured to create a session from the JWT and set “Set-Cookie: session_id” in the header, enabling subsequent communications to maintain the login status through a session cookie. Thanks to HTMX functionality, the application page can dynamically fetch the navigation bar upon a change in login status, indicating whether the user is logged in. Introduction As an aspiring full-stack software developer, I’ve

Table of Contents Introduction What I Implement Frontend implementation with Svelte Backend implementation with FastAPI Conclusion Introduction I have implemented Google Sign-In functionality in a sample website built using Svelte and FastAPI. There are various methods to authenticate users in the backend API server after a successful Google Sign In. One common approach is to send the JWT received from Google in the request header as Authorization: "Bearer: JWT", and if the JWT is valid, authorization to access resources is granted. Another typical method involves issuing a JWT on the backend and using it for user authentication in the Authorization header. However, using JWT directly for session management poses a challenge in immediate invalidation if the JWT is leaked. Reference: Stop using JWT for sessions . Therefore, I implemented a method in which, following the receipt of the JWT from Google, FastAPI assigns a new session_id. This session_id is set in a co