Secure Google + LinkedIn OAuth flow for WeWeb + Xano

Tutorials
,
1

I put together a small open-source reference implementation for handling Google and LinkedIn OAuth securely with WeWeb + Xano.

The frontend side is plain JavaScript that can be used inside WeWeb workflows, and it handles:

  • generating a 256-bit nonce in the browser
  • storing it in sessionStorage
  • sending the nonce to Xano before redirecting to Google or LinkedIn
  • reading code and state on the callback page
  • removing the nonce before the backend call
  • cleaning code and state from the URL
  • handling cancel, reload, missing nonce and invalid callback cases

On the Xano side, the flow adds:

  • signed OAuth state
  • provider binding
  • 10-minute expiry
  • nonce hashing
  • verification before the authorization code is exchanged

I tested the full flow end to end against both Google and LinkedIn, including wrong nonce, tampered state, missing state/nonce, cross-provider state, expired state and replayed authorization codes.

The repo includes:

  • frontend JS examples for Google and LinkedIn
  • Xano functions and endpoints
  • setup instructions
  • architecture diagrams
  • threat model
  • runtime test cases

GitHub:

It’s intended as a reference implementation rather than an official WeWeb or Xano solution. If anyone is building custom OAuth flows with WeWeb, I’d be interested in feedback or edge cases I may have missed.

2

Very cool! Thanks for putting this together and sharing it with the community :slight_smile: