Social Auth Template Collector (Frontend-only)

A tiny template project that launches popular social login flows and collects whatever the provider returns (authorization code, access_token, id_token, or payload like Telegram). You then pass those values to your backend (DRF/FastAPI/etc.).

This project:

• Is frontend-only (static HTML/JS).
• Uses a central config.js with window.APP_CONFIG to configure provider credentials.
• Shows the raw values returned by each provider after redirect.

⚠️ No client secrets are used here. Keep secrets on your backend.

---

Supported providers & typical returns

Provider	Typical return	Flow notes
Google	code (query) or id_token (if you add)	OAuth2 Authorization Code.
Facebook/Meta	code (query)	Use for Facebook Login; WhatsApp Business uses Meta access tokens later via backend.
LinkedIn	code (query)	OAuth2 Authorization Code.
GitHub	code (query)	OAuth2 Authorization Code.
Twitter (X)	code (query), PKCE required	OAuth2 Authorization Code with PKCE.
Microsoft	code (query)	Azure AD v2 / Microsoft Identity.
Apple	code and id_token (query)	“Sign in with Apple” web flow.
Discord	code (query)	OAuth2 Authorization Code.
Slack	code (query)	Slack OAuth v2.
Reddit	code (query); uses duration/state	OAuth2 Authorization Code.
Spotify	code (query)	OAuth2 Authorization Code.
Telegram	payload object via widget callback	Signed user data to POST to backend for verification.

Different providers may also return state, scope, error, etc. The UI shows all query and hash params it receives.

---

Quick start

1. Edit the configuration in config.js
   Open config.js and update window.APP_CONFIG with your values. At minimum set REDIRECT_URI and the client IDs you plan to use:

   window.APP_CONFIG = {
       // Redirect URI (must match exactly in every provider console)
       REDIRECT_URI: "http://localhost:5500/index.html",
   
       // Google
       GOOGLE_CLIENT_ID: "your-google-client-id",
   
       // Facebook / Meta
       FACEBOOK_APP_ID: "your-facebook-app-id",
   
       // LinkedIn
       LINKEDIN_CLIENT_ID: "your-linkedin-client-id",
   
       // GitHub
       GITHUB_CLIENT_ID: "your-github-client-id",
   
       // Twitter (X)
       TWITTER_CLIENT_ID: "your-twitter-client-id",
   
       // Microsoft
       MICROSOFT_CLIENT_ID: "your-microsoft-client-id",
       MICROSOFT_TENANT: "common",
   
       // Apple
       APPLE_CLIENT_ID: "your-apple-service-id",
       APPLE_REDIRECT_URI: "http://localhost:5500/index.html",
       APPLE_SCOPE: "name email",
   
       // Discord
       DISCORD_CLIENT_ID: "your-discord-client-id",
   
       // Slack
       SLACK_CLIENT_ID: "your-slack-client-id",
   
       // Reddit
       REDDIT_CLIENT_ID: "your-reddit-client-id",
   
       // Spotify
       SPOTIFY_CLIENT_ID: "your-spotify-client-id",
   
       // Telegram (Login Widget)
       TELEGRAM_BOT_USERNAME: "your_bot_username"
   }

2. Serve the static files (any static server is fine). Example with Python:

   python3 -m http.server 5500
   # open http://localhost:5500

Make sure the Redirect URI you register for each provider matches your page URL exactly, e.g. http://localhost:5500/index.html (or your domain).

---

Files

• index.html – Buttons to start login, capture and display returned values.
• config.js – Central config (window.APP_CONFIG) consumed by the app and providers.
• providers.js – Provider-specific URL builders. Uses window.APP_CONFIG.
• util.js – Helpers (PKCE, URL parsing, UI utils).

---

What to send to backend

After the redirect, copy the displayed values (e.g., code, id_token) and POST them to your backend endpoint for the provider. Your backend then exchanges the code for tokens (and verifies signatures where required, e.g., Apple/Google id_token).

---

Security notes

• Never put client secrets in the frontend.
• Use the state parameter to prevent CSRF (this template auto-generates a random state).
• Use PKCE where required (Twitter) or recommended (Google, others). The verifier is stored in sessionStorage until exchange.
• Use HTTPS in production.

---

WhatsApp note

There is no standalone “Login with WhatsApp” for users. WhatsApp Business API uses Meta (Facebook) OAuth. Authenticate with Facebook Login, then use Meta Graph APIs with the backend token. This template covers the Facebook login part.

---

Happy hacking!