24 |
25 | ## How it works
26 |
27 | 
28 |
29 | ## Setup
30 |
31 | 1. **Create and Deploy a new Netlify site**
32 |
33 | You can use an [this repo](https://app.netlify.com/start/deploy?repository=https://github.com/netlify-labs/oauth-example)
34 |
35 | 2. **[Create OAuth application](https://app.netlify.com/account/applications)**
36 |
37 | Create your OAuth application in the Netlify admin UI.
38 |
39 | Add in your callback URL. This can be changed later.
40 |
41 | 
42 |
43 | 3. **After creating your OAuth app, Click on show credentials**
44 |
45 | Save these credentials for the next step
46 |
47 | 
48 |
49 | 4. **Take your OAuth credentials and add them to your OAuth app site**
50 |
51 | Set `NETLIFY_OAUTH_CLIENT_ID` and `NETLIFY_OAUTH_CLIENT_SECRET` environment variables in your site
52 |
53 | 
54 |
55 | 5. **Then trigger a new deploy**
56 |
57 | 
58 |
59 |
60 | 6. **Visit your site and verify the OAuth flow is working**
61 |
62 |
--------------------------------------------------------------------------------
/functions/auth-callback.js:
--------------------------------------------------------------------------------
1 | const querystring = require('querystring')
2 | const { config, oauth } = require('./utils/auth')
3 | const { getUser } = require('./utils/netlify-api')
4 |
5 | /* Function to handle netlify auth callback */
6 | exports.handler = async (event, context) => {
7 | // Exit early
8 | if (!event.queryStringParameters) {
9 | return {
10 | statusCode: 401,
11 | body: JSON.stringify({
12 | error: 'Not authorized',
13 | })
14 | }
15 | }
16 |
17 | /* Grant the grant code */
18 | const code = event.queryStringParameters.code
19 | /* state helps mitigate CSRF attacks & Restore the previous state of your app */
20 | const state = querystring.parse(event.queryStringParameters.state)
21 |
22 | try {
23 | /* Take the grant code and exchange for an accessToken */
24 | const authorizationToken = await oauth.authorizationCode.getToken({
25 | code: code,
26 | redirect_uri: config.redirect_uri,
27 | client_id: config.clientId,
28 | client_secret: config.clientSecret
29 | })
30 |
31 | const authResult = oauth.accessToken.create(authorizationToken)
32 |
33 | const token = authResult.token.access_token
34 |
35 | const user = await getUser(token)
36 |
37 | // return {
38 | // statusCode: 200,
39 | // body: JSON.stringify({
40 | // user: user,
41 | // authResult: authResult,
42 | // state: state,
43 | // encode: Buffer.from(token, 'binary').toString('base64')
44 | // })
45 | // }
46 |
47 | const encodedUserData = querystring.stringify({
48 | email: user.email || "NA",
49 | full_name: user.full_name || "NA",
50 | avatar: user.avatar_url || "NA"
51 | })
52 |
53 | const URI = `${state.url}#${encodedUserData}&csrf=${state.csrf}&token=${Buffer.from(token, 'binary').toString('base64')}`
54 | console.log('URI', URI)
55 | /* Redirect user to authorizationURI */
56 | return {
57 | statusCode: 302,
58 | headers: {
59 | Location: URI,
60 | 'Cache-Control': 'no-cache' // Disable caching of this response
61 | },
62 | body: '' // return body for local dev
63 | }
64 |
65 |
66 | } catch (e) {
67 | console.log('Access Token Error', e.message)
68 | console.log(e)
69 | return {
70 | statusCode: e.statusCode || 500,
71 | body: JSON.stringify({
72 | error: e.message,
73 | })
74 | }
75 | }
76 | }
77 |
--------------------------------------------------------------------------------
/functions/auth-start.js:
--------------------------------------------------------------------------------
1 | const { config, oauth } = require('./utils/auth')
2 |
3 | /* Do initial auth redirect */
4 | exports.handler = async (event, context) => {
5 |
6 | if (!event.queryStringParameters) {
7 | return {
8 | statusCode: 401,
9 | body: JSON.stringify({
10 | error: 'No token found',
11 | })
12 | }
13 | }
14 |
15 | const csrfToken = event.queryStringParameters.csrf
16 | const redirectUrl = event.queryStringParameters.url
17 |
18 | /* Generate authorizationURI */
19 | const authorizationURI = oauth.authorizationCode.authorizeURL({
20 | redirect_uri: config.redirect_uri,
21 | /* Specify how your app needs to access the user’s account. */
22 | scope: '',
23 | /* State helps mitigate CSRF attacks & Restore the previous state of your app */
24 | state: `url=${redirectUrl}&csrf=${csrfToken}`,
25 | })
26 |
27 | /* Redirect user to authorizationURI */
28 | return {
29 | statusCode: 302,
30 | headers: {
31 | Location: authorizationURI,
32 | 'Cache-Control': 'no-cache' // Disable caching of this response
33 | },
34 | body: '' // return body for local dev
35 | }
36 | }
37 |
--------------------------------------------------------------------------------
/functions/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "backend-functions",
3 | "version": "0.1.0",
4 | "private": true,
5 | "dependencies": {
6 | "netlify": "^2.3.1",
7 | "node-fetch": "^2.3.0",
8 | "simple-oauth2": "^2.2.1"
9 | }
10 | }
11 |
--------------------------------------------------------------------------------
/functions/utils/auth.js:
--------------------------------------------------------------------------------
1 | const simpleOauth = require('simple-oauth2')
2 |
3 | const SITE_URL = process.env.URL || 'http://localhost:3000'
4 |
5 | /* Auth values */
6 | const TOKEN_HOST = 'https://api.netlify.com'
7 | const TOKEN_URL = 'https://api.netlify.com/oauth/token'
8 | const USER_PROFILE_URL = 'https://api.netlify.com/api/v1/user'
9 | const AUTHORIZATION_URL = 'https://app.netlify.com/authorize'
10 | const REDIRECT_URL = `${SITE_URL}/.netlify/functions/auth-callback`
11 |
12 | /* Env key name */
13 | const clientIdKey = 'NETLIFY_OAUTH_CLIENT_ID'
14 | const clientSecretKey = 'NETLIFY_OAUTH_CLIENT_SECRET'
15 |
16 | const config = {
17 | /* values set in terminal session or in netlify environment variables */
18 | clientId: process.env[clientIdKey],
19 | clientSecret: process.env[clientSecretKey],
20 | /* OAuth API endpoints */
21 | tokenHost: TOKEN_HOST,
22 | authorizePath: AUTHORIZATION_URL,
23 | tokenPath: TOKEN_URL,
24 | profilePath: USER_PROFILE_URL,
25 | /* redirect_uri is the callback url after successful signin */
26 | redirect_uri: REDIRECT_URL,
27 | }
28 |
29 | function authInstance(credentials) {
30 | if (!credentials.client.id) {
31 | throw new Error(`MISSING REQUIRED ENV VARS. Please set ${clientIdKey}`)
32 | }
33 | if (!credentials.client.secret) {
34 | throw new Error(`MISSING REQUIRED ENV VARS. Please set ${clientSecretKey}`)
35 | }
36 | return simpleOauth.create(credentials)
37 | }
38 |
39 | module.exports = {
40 | /* Export config for functions */
41 | config: config,
42 | /* Create oauth2 instance to use in our functions */
43 | oauth: authInstance({
44 | client: {
45 | id: config.clientId,
46 | secret: config.clientSecret
47 | },
48 | auth: {
49 | tokenHost: config.tokenHost,
50 | tokenPath: config.tokenPath,
51 | authorizePath: config.authorizePath
52 | }
53 | })
54 | }
55 |
--------------------------------------------------------------------------------
/functions/utils/netlify-api.js:
--------------------------------------------------------------------------------
1 | const fetch = require('node-fetch')
2 |
3 | async function getUser(token) {
4 | const url = `https://api.netlify.com/api/v1/user/`
5 | const response = await fetch(url, {
6 | method: 'GET',
7 | headers: {
8 | 'Content-Type': 'application/json',
9 | Authorization: `Bearer ${token}`
10 | }
11 | })
12 |
13 | const data = await response.json()
14 |
15 | if (response.status === 422) {
16 | throw new Error(`Error ${JSON.stringify(data)}`)
17 | }
18 |
19 | return data
20 | }
21 |
22 | module.exports = {
23 | getUser: getUser
24 | }
25 |
--------------------------------------------------------------------------------
/netlify.toml:
--------------------------------------------------------------------------------
1 | [build]
2 | publish = "build"
3 | command = "npm run build"
4 | functions = "functions"
5 |
6 | [template.environment]
7 | NETLIFY_OAUTH_CLIENT_ID = "Your Netlify OAuth Client ID"
8 | NETLIFY_OAUTH_CLIENT_SECRET= "Your Netlify OAuth Client Secret"
9 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "oauth-example",
3 | "version": "0.1.0",
4 | "private": true,
5 | "dependencies": {
6 | "netlify": "^2.4.0",
7 | "react": "^16.8.3",
8 | "react-dom": "^16.8.3",
9 | "react-scripts": "2.1.5",
10 | "time-ago": "^0.2.1"
11 | },
12 | "scripts": {
13 | "start": "react-scripts start",
14 | "build": "npm-run-all --parallel build:**",
15 | "build:app": "react-scripts build",
16 | "build:functions": "cd functions && npm install",
17 | "deploy": "npm run build && netlify deploy -p"
18 | },
19 | "eslintConfig": {
20 | "extends": "react-app"
21 | },
22 | "browserslist": [
23 | ">0.2%",
24 | "not dead",
25 | "not ie <= 11",
26 | "not op_mini all"
27 | ],
28 | "devDependencies": {
29 | "npm-run-all": "^4.1.5"
30 | }
31 | }
32 |
--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/netlify-labs/oauth-example/a7987d8417c908be7b3d04c4c5bf4f5d3a378ada/public/favicon.ico
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
10 |
11 |
15 |
16 |
25 |