Sign in with Google Example

This repository provides example app implementations using Google OAuth as the authentication mechanism.

The frontend app is implemented using the following technologies:

• React.js
• Svelte.js

The backend API servers are implemented using the following technologies:

• Django REST framework(DRF)
• Fastapi

The noauth directory contains example apps without authentication.

noauth/
├── Howto.md
├── Readme.md
├── backend-django
├── backend-fastapi
├── frontend-react
└── frontend-svelte

The google-oauth directory contains example apps using Google OAuth as the authentication mechanism.

google-oauth/
├── Detailed.md
├── Readme.md
├── ReadmeSSL.md
├── backend-django
├── backend-fastapi
├── frontend-react01
├── frontend-react02
└── frontend-svelte

Sessions

As for maintaining sessions, I implemented the backend API servers so that they set session cookies after verification of the ID token provided by Google.

The authentication follows the following steps:

1. A user visits a restricted page.
2. The frontend app redirects the user to the login page.
3. The user authenticates them at the Google OAuth endpoint. Google OAuth API returns an ID token as a JSON Web Token(JWT).
4. The frontend app receives the JWT from Google and sends it to the backend API servers.
5. The backend API servers verify the ID token's signature using a Google public certificate and trust the user's information in the payload.
6. The backend API servers create the user if it does not exist in the database and return the user's information while setting a new session cookie in the response header.
7. The frontend app regards the user as authenticated and sets a property to always send a request with the session cookie in the following API communications.
8. The backend API servers allow what is allowed for the user as long as the session is valid.

Many examples on the Internet use JWT access tokens provided by Google or the backend API server as they are. However, there are arguments that JWT tokens should not be used for sessions. Therefore, the apps in this repository use an auth backend using the "battle-tested" traditional session cookie mechanism.

How the example apps look like

How the app works without authentication

The app in this repository consists of two pages, "Top" and "Customer."

The Customer page, which fetches the data from the API server, is not restricted. Therefore the page can be seen by unauthenticated users.

How the app works with authentication

With authentication implemented, anonymous users' access is redirected to the login page, where they can sign in with their Google account.

The Customer page can only be seen after successful authentication.

Please note that the authentication mechanism protects the Customer page and prevents the React.js frontend app from fetching the data from the API server.