Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/n4bb12/vercel-github-oauth-proxy
▲🔐 Protect a static website hosted on Vercel behind GitHub authentication.
https://github.com/n4bb12/vercel-github-oauth-proxy
github-oauth vercel
Last synced: 22 days ago
JSON representation
▲🔐 Protect a static website hosted on Vercel behind GitHub authentication.
- Host: GitHub
- URL: https://github.com/n4bb12/vercel-github-oauth-proxy
- Owner: n4bb12
- License: isc
- Created: 2020-12-22T21:01:46.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2023-09-19T15:18:14.000Z (over 1 year ago)
- Last Synced: 2024-04-26T01:33:07.165Z (8 months ago)
- Topics: github-oauth, vercel
- Language: TypeScript
- Homepage: https://vercel-github-oauth-proxy.vercel.app
- Size: 192 KB
- Stars: 30
- Watchers: 2
- Forks: 15
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
▲🔐 Vercel GitHub OAuth Proxy
Protect a static website hosted on Vercel behind GitHub authentication.
## Setup
### Step 1 — Add the library
```
yarn add vercel-github-oauth-proxy
```
### Step 2 — Create an API endpoint at `/api/index.ts`
```ts
import { createLambdaProxyAuthHandler } from "vercel-github-oauth-proxy"
export default createLambdaProxyAuthHandler(config)
```
`config.cryptoSecret`
This is used to sign cookies.
`config.staticDir`
The output directory of the static website.
`config.githubOrgName`
The GitHub organization users need to be part of in order to be able to sign in.
You cannot use your personal GitHub account for this, you need an organization.
`config.githubClientId`
`config.githubClientSecret`
The id/secret pair of your GitHub OAuth app.
Create a new OAuth app at
`https://github.com/organizations/{config.githubOrgName}/settings/applications/new`
`config.githubOrgAdminToken`
Create a token with `read:org` permission at .
The reason you need a token is that private org memberships can only be
determined by making an authenticated API request.
We could request `read:org` scope during the OAuth flow and then use each user's
access token to determine org membership, but using this method means the user
additionally needs to request org access during or after the login flow and
requires an org admin to confirm. This makes this approach inconvenient for both
the users and the admin.
Therefore we're using a separate org admin token to verify membership during
login (org admins can see all users).
### Step 3 — Create a `vercel.json`
```json
{
"version": 2,
"routes": [{ "src": "/(.*)", "dest": "/api/index.ts" }],
"functions": {
"api/index.ts": {
"includeFiles": "static/**"
}
}
}
```
This routes all traffic through the lambda endpoint.
Adapt `includeFiles` to your public output folder. Including these files is
required because the static website needs to be deployed as part of the lambda
function, not the default build. See also these docs:
- [functions](https://vercel.com/docs/projects/project-configuration#functions)
- [size limits](https://vercel.com/docs/functions/serverless-functions/runtimes#size-limits).
### Step 4 — Build
If you have an existing `build` script, rename it to `vercel-build` to build
your website as part of the lambda build instead of the normal build.
Make sure to not keep the `build` script as it would result in duplicate work or
may break deployment entirely. For more information see
[custom-build-step-for-node-js](https://vercel.com/docs/functions/serverless-functions/runtimes/node-js#custom-build-step-for-node.js).
```json
{
"scripts": {
"vercel-build": "your website build command"
}
}
```
## Local development
To develop locally, run
```
yarn vercel dev
```
When developing locally, you'll need to update your GitHub OAuth app's redirect
URL to `http://localhost:3000`.