google_authoriation

Practice google authortiation flows.

How to run

1. Build and run the containers (if you haven't installed docker yet, please intall docker first)

docker compose up --build

After the backend and frondend containers are built. Then you will see:

2. Visit http://localhost:8080/ from your browser

3. Click Sign in with Google button, then finish the process

High-level:

• Frontend: static HTML + Google Identity Services JS. A sign-in button issues an ID token (JWT) which the frontend POSTs to backend.
  

• Backend: Fastify + google-auth-library verifies ID token and upserts user into SQLite (via Sequelize).
  

• Compose: frontend on port 8080, backend on 3000, sqlite stored under ./data/database.sqlite

File tree

project/ ├─ backend/ │ ├─ Dockerfile │ ├─ package.json │ └─ src/ │ ├─ app.js │ ├─ db/ │ │ ├─ index.js │ │ └─ models/ │ │ └─ user.js │ └─ BACKEND.md ├─ frontend/ │ ├─ default.conf │ ├─ Dockerfile │ ├─ index.html.template │ └─ entrypoint.sh ├─ docker-compose.yml └─ .env └─ README.md

Create a Google OAuth client ID

1. Go to Google Cloud Console
   

• Open: https://console.cloud.google.com/
  
• Sign in with your Google account.
  

2. Create or Select a Project
   

• At the top left, click the project selector dropdown.
  
• Either:
  
  • Select your existing project, or
    
  • Click New Project, give it a name, and click Create.
    

3. Set up the OAuth Consent Screen
   This defines how your app appears when users log in with Google.

• In the left sidebar: APIs & Services → OAuth consent screen
  
• Fill out:
  
  • App name (this is what users see in the Google login popup)
    
  • User support email
    
• User Type:
  
  • External → Anyone with a Google account can use it (good for public apps; requires Google review if you request sensitive scopes).
    
  • Internal → Only Google Workspace org members can use it (not for personal Gmail accounts).
    Click Save and Continue until you finish.
    

4. Create OAuth Client Credentials
   

• Go to: APIs & Services → Credentials
  
• Click Create Credentials → OAuth client ID
  
• Application type → Select Web application
  
• Name it something like "Web Login Dev"
  Authorized JavaScript origins (for browser-based requests):
  
• http://localhost:3000 (for local dev)
  
• https://your-domain.com (for production)
  

Authorized redirect URIs (where Google sends users after login):

• http://localhost:3000/auth/google/callback
  
• https://your-domain.com/auth/google/callback
  

Click Create.

5. Save your keys
   

• You’ll now see:
  
  • Client ID → Public; used in your frontend login request.
    
  • Client Secret → Private; store in backend .env only.
    
• You can also click Download JSON for convenience.
  

6. Test

• Use your OAuth Client ID in your app’s Google sign-in flow.
  
• If you get a redirect_uri_mismatch error, double-check the redirect URI in Credentials matches exactly (no trailing slashes, same protocol).
  

💡 Key things to remember:

• The project name in Google Cloud is for you only — users won’t see it.
• The App name in the OAuth consent screen is what users see during Google login.
• For dev and prod, you can either:
  • Create two OAuth clients in the same project
  • Or create separate projects (if you want total isolation)