https://github.com/threepointone/cf-auth
A sample app for oauth flow with cloudflare for web applications
https://github.com/threepointone/cf-auth
Last synced: about 1 month ago
JSON representation
A sample app for oauth flow with cloudflare for web applications
- Host: GitHub
- URL: https://github.com/threepointone/cf-auth
- Owner: threepointone
- Created: 2024-07-09T15:26:31.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2024-07-21T11:29:46.000Z (10 months ago)
- Last Synced: 2025-02-03T22:51:14.533Z (4 months ago)
- Language: TypeScript
- Size: 38.1 KB
- Stars: 9
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🎈 cf-auth
A sample app for oauth flow with cloudflare for web applications. Ths example uses cloudflare workers, but adjust according to your needs.
- change `dev.port` in `wrangler.toml` to the port that's registered with your oauth app. This is important for local development because cloudflare will redirect to this port.
- assuming your registered local dev URLs are `https` you will want to start wrangler with `wrangler dev --local-protocol=https`
- store your client id/secret somewhere. In this example, we'll use the wrangler's secret management by running these commands.
```
npx wrangler secret put CF_OAUTH_CLIENT_ID
npx wrangler secret put CF_OAUTH_CLIENT_SECRET
```
- we'll also make a `.dev.vars` file with these values so they can be picked up in local development.
```
# .dev.vars
CF_OAUTH_CLIENT_ID=your-client-id
CF_OAUTH_CLIENT_SECRET=your-client-secret
```
- in your worker code, you can access these secrets with `env.CF_OAUTH_CLIENT_ID` and `env.CF_OAUTH_CLIENT_SECRET` respectively.
On to the app, there are 3 main URLs:
- `/`: this will redirect to `/login` if not logged in, otherwise will spit out user information
- `/login`: this will redirect to cloudflare's oauth login page. Once you login, you will be redirected back to `/` with the user information.
- `/logout`: this will clear the session
- Additionally, we've setup `/cf/oauth/callback` to handle the oauth callback. This is the URL that cloudflare will redirect to after the user logs in. This will exchange the code for an access token and store the user information in the session.
# Notes
- We use cookies to store state for intermediate steps. You may want to encrypt these cookies.
- This flow is only for web applications where the secret is not exposed ot the user. If you're building something like a CLI, you may want to use the authorization code flow. Lemme know if you need a sample app for that.
- This doesn't implement token refreshes (yet, I'll update this app later wih it). You may want to implement that if you're storing the access token for a long time.