Client half of a decoupled OAuth setup for React: clicking a provider button opens a popup to the server, which does the actual OAuth dance and pushes the authenticated profile back here over a socket. Written in TypeScript.
git clone https://github.com/funador/react-auth-client.git
cd react-auth-client
npm i && HTTPS=true npm startFacebook requires every app talking to its API — including apps in development — to be served over HTTPS.
To add HTTPS to localhost, follow these instructions, then manually trust the cert in Chrome as described here.
You may also need to open a separate tab for https://localhost:8080 and accept the security warning before the client will push requests through.
Thanks to Le Gui PPF for these SSL-on-Windows instructions:
I spent a whole day figuring out how to generate a proper SSL certificate with all Chrome's requirements — see this answer and add the following to the v3 req section:
authorityKeyIdentifier=keyid,issuer basicConstraints=CA:FALSE keyUsage = digitalSignature, nonRepudiation, keyEncipherment, dataEncipherment
If you only want Twitter/Google/Github authentication (no HTTPS hassle), use the twitter-auth branch instead.
This client just talks to a socket + a few OAuth routes — there's no client-side provider setup. Follow the instructions in the server repo to register each provider and get the server running.
Once the server's reachable, open https://localhost:3000.
Deployed on Vercel, pointed at the deployed server via API_URL in src/config.ts.
Something not working? Please open an issue or submit a PR.