Google 登入（網頁）Sign In With Google

Architecture: Backend-mediated (BFF), with Express owning the session

You have a backend, so don't keep tokens in the browser. Pick one of two flows.

Option A: Next.js calls Express (recommended for a custom UI)

1. Load GIS (https://accounts.google.com/gsi/client) in Next.js with <Script strategy="afterInteractive"> or an onload loader. Don't poll.
2. Generate a random nonce server-side. Store it in the session, or in a short-lived HttpOnly cookie, and pass it to google.accounts.id.initialize({ client_id, nonce, callback }).
3. In the callback, POST the credential (the ID token) to /api/auth/google with credentials: 'include'.
4. Express verifies the token, creates a server session, and sets an HttpOnly; Secure; SameSite=Lax cookie.
5. The ID token is never stored in localStorage or sessionStorage. The browser holds only the session cookie.

Option B: login_uri redirect
GIS POSTs the credential straight to Express (ux_mode: "redirect"). Express must check the double-submit CSRF value: the g_csrf_token cookie has to equal the g_csrf_token body field. Then it verifies the token, sets the cookie, and returns a 302. No JavaScript ever touches the token.

If Next.js and Express are on different origins, put them under one site or proxy /api through Next.js. That keeps the cookie first-party and makes SameSite=Lax work. Otherwise you need CORS with credentials, which is more fragile.

What the server must verify

Use OAuth2Client.verifyIdToken({ idToken, audience: CLIENT_ID }) from google-auth-library. Don't hand-roll JWT parsing. It checks the signature against Google's JWKS (https://www.googleapis.com/oauth2/v3/certs) and the standard claims. Make sure these hold:

For the Option B flow, also check the g_csrf_token cookie against the body field, as described above.

Session and hardening

• Regenerate the session ID on login, to prevent session fixation.
• Use CSRF protection on your own state-changing endpoints. SameSite=Lax helps but isn't enough on its own.
• Send Cross-Origin-Opener-Policy: same-origin-allow-popups. Plain same-origin breaks the GIS popup silently.
• Set a CSP that allows script-src https://accounts.google.com/gsi/client, frame-src https://accounts.google.com/gsi/, and connect-src https://accounts.google.com/gsi/.
• On logout, call google.accounts.id.disableAutoSelect() and destroy the server session. Otherwise One Tap signs the user straight back in.
• Don't use the legacy gapi.auth2 or gapi.signin2. They're retired. Use GIS only.
• Don't trust any user info the client sends alongside the token. Take identity only from the verified payload.

Express sketch

const { OAuth2Client } = require('google-auth-library');
const client = new OAuth2Client(CLIENT_ID);

app.post('/api/auth/google', async (req, res) => {
  const ticket = await client.verifyIdToken({
    idToken: req.body.credential,
    audience: CLIENT_ID,
  });
  const p = ticket.getPayload();

  if (!p.email_verified) return res.sendStatus(401);
  if (p.nonce !== req.session.nonce) return res.sendStatus(401);
  delete req.session.nonce;
  // if (p.hd !== 'yourdomain.com') return res.sendStatus(403);

  const user = await upsertUserBySub(p.sub, p.email);
  req.session.regenerate(() => {
    req.session.userId = user.id;
    res.sendStatus(204);
  });
});

This is a sketch. Wrap verifyIdToken in try/catch and return 401 on failure. Also make sure regenerate doesn't lose the nonce check order.

I can wire this into your project if you'd like. It would help to know whether Next.js and Express share an origin.