Auth0 Login & Social Federations

This repository is a minimal, runnable full-stack example that demonstrates how to integrate Auth0 authentication (including Google social login) into a Single Page App (React + Vite) and protect a Node/Express API using JWT validation (JWKS).

Contents

• client/ — React (Vite) SPA using @auth0/auth0-react for auth and requesting access tokens for the API.
• server/ — Express API that validates access tokens using express-jwt + jwks-rsa and exposes public and protected endpoints.

Why this is useful

• Shows an end-to-end flow: SPA → Auth0 (Universal Login / Social) → access token → protected API.
• Demonstrates correct token validation on the backend (issuer, audience, algorithms, JWKS).
• Includes debug helpers and README guidance so you can learn the pieces step-by-step.

Prerequisites

• Node.js 18+ and npm
• An Auth0 account (free tier is fine)
• A Google Cloud Console project if you want Google social login (OAuth credentials)
• A modern browser (Chrome/Firefox/Edge)

Quick local setup (copy-paste)

1. Copy environment files and fill with your Auth0 values

cp server/.env.example server/.env
cp client/.env.example client/.env
# Edit server/.env and client/.env and paste values from your Auth0 tenant (see detailed Auth0 setup below)

2. Start the server and client (two terminals)

Terminal A — server:

cd /Users/anjanmk/authO-socialConnection/server
npm install
node index.js
# or (dev) npx nodemon index.js

Terminal B — client:

cd /Users/anjanmk/authO-socialConnection/client
npm install
npm run dev
# Vite will print the local URL (usually http://localhost:5173)

3. Open the SPA

• Visit http://localhost:5173
• Click "Login" → Auth0 Universal Login will open. Use Google or a username/password test user.
• After successful login, click "Call Protected API" to call the backend /api/profile with the access token.

If everything is configured correctly you will see the protected response JSON with token claims.

Full Auth0 + Google setup (step-by-step)

Follow these steps to create the Auth0 resources and allow social login.

1. Create an API in Auth0 (this defines the audience)

• Auth0 Dashboard → APIs → + Create API
  • Name: Example API
  • Identifier: https://localhost:3001/api (this exact string is used as AUTH0_AUDIENCE)
  • Signing Algorithm: RS256

2. Create a Single Page Application in Auth0

• Auth0 Dashboard → Applications → + Create Application
  • Name: Auth0 Demo SPA
  • Type: Single Page Application
  • Save and open Settings
  • Allowed Callback URLs: http://localhost:5173
  • Allowed Logout URLs: http://localhost:5173
  • Allowed Web Origins: http://localhost:5173
  • Copy the Client ID → this is AUTH0_CLIENT_ID

3. Authorize the SPA to request tokens for the API

• Auth0 Dashboard → APIs → select your API → look for "Authorized Applications" or similar → Authorize Application → select your SPA → Save
  • This prevents the "client is not authorized to access resource" error.

4. (Optional) Configure Google social login — create OAuth credentials in Google Cloud

• Google Cloud Console → APIs & Services → Credentials → + Create Credentials → OAuth client ID
  • Application type: Web application
  • Authorized redirect URIs: https://<YOUR_AUTH0_DOMAIN>/login/callback
    • Example: https://dev-3wokqpiperj3doa0.us.auth0.com/login/callback
  • (Optional) Authorized JavaScript origins: https://<YOUR_AUTH0_DOMAIN>
  • Copy Client ID and Client Secret

5. Configure the Google Connection in Auth0

• Auth0 Dashboard → Connections → Social → Google → Create or Edit
  • Paste Google Client ID and Client Secret
  • Enable the connection for your SPA (toggle your SPA under Applications)
  • Save

6. (Optional) Add roles and inject them into the access token

• Create a Role: Dashboard → User Management → Roles → + Create Role (e.g., admin)
• Assign role to a test user: Users → select user → Roles → Assign Roles
• Create a Login Action to add roles to the access token (Actions → Flows → Login → add action)
  • Example code to add roles claim:

exports.onExecutePostLogin = async (event, api) => {
   let roles = [];
   if (event.authorization && event.authorization.roles) roles = event.authorization.roles;
   api.accessToken.setCustomClaim('https://example.com/roles', roles);
};

Env files (what to paste)

• server/.env

AUTH0_DOMAIN=dev-xyz123.us.auth0.com
AUTH0_AUDIENCE=https://localhost:3001/api
PORT=3001

• client/.env (Vite requires VITE_ prefix)

VITE_AUTH0_DOMAIN=dev-xyz123.us.auth0.com
VITE_AUTH0_CLIENT_ID=YOUR_CLIENT_ID
VITE_AUTH0_AUDIENCE=https://localhost:3001/api
VITE_AUTH0_REDIRECT_URI=http://localhost:5173

How the code works (short)

• Client (client/src/main.jsx) mounts Auth0Provider from @auth0/auth0-react and passes domain, clientId and authorizationParams (redirect_uri + audience).
• client/src/App.jsx uses useAuth0() for loginWithRedirect / loginWithPopup and getAccessTokenSilently() to get an access token, then calls the server with Authorization: Bearer .
• Server (server/index.js) uses express-jwt with jwks-rsa.expressJwtSecret to fetch JWKS from https://<AUTH0_DOMAIN>/.well-known/jwks.json. It validates issuer, audience and alg (RS256) and exposes /api/profile protected by the middleware.

Troubleshooting common errors

• "client is not authorized to access resource": Authorize your SPA in the API settings (APIs → select API → Authorize Application).
• redirect_uri_mismatch (Google): Add https://<AUTH0_DOMAIN>/login/callback to the Google OAuth client's Authorized redirect URIs in Google Cloud Console.
• invalid_state after redirect: usually caused by blocked cookies or a browser extension. Try Incognito or disable privacy extensions; popup login can help diagnose.
• /api/profile returns 401: ensure VITE_AUTH0_AUDIENCE (client) matches AUTH0_AUDIENCE (server) and that the SPA requests the token with that audience.
• No Google button in Universal Login: enable the Google connection for your SPA in the Auth0 Google connection settings.

Useful commands & dev tips

• Start server:
  • cd server && node index.js (or npx nodemon index.js)
• Start client:
  • cd client && npm run dev (Vite)
• Check public endpoint:
  • curl -i http://localhost:3001/api/public
• Debug server logs:
  • tail -f server/server.log

Security notes

• Never commit .env files with secrets to version control. Add .env to .gitignore (already done).
• Use HTTPS in production for both SPA and API.
• For SPAs use Authorization Code + PKCE and consider rotating refresh tokens server-side or using refresh token rotation provided by Auth0.

Next steps & exercises to learn more

• Replace the @auth0/auth0-react SDK with a manual Authorization Code + PKCE implementation to learn the protocol.
• Add /api/admin which checks the namespaced roles claim and restricts access to users with admin role.
• Add unit/integration tests for the server (jest + supertest) that mock a JWT or JWKS endpoint.
• Add GitHub Actions workflow that runs a smoke test for the protected endpoint.

If you want, I can add the admin endpoint and front-end button, or add tests and CI. Tell me which next task you want and I will implement it.

Thanks — good work getting this running. This README documents exactly what we did and why. Happy to expand any section into a tutorial or record a short screencast of the sign-in flow.