Authentication Setup for NetlifyCMS #7

New Issue

bennolor · 2025-06-01T18:26:26+02:00

bennolor commented

2025-06-01 18:26:26 +02:00

## Description:
Set up a custom authentication service for NetlifyCMS using GitHub OAuth to allow secure access to the CMS.

Tasks## :

Create a new directory for the OAuth service:
- mkdir -p oauth
Create package.json for the OAuth service:

{
  "name": "netlify-cms-oauth",
  "version": "1.0.0",
  "description": "OAuth service for NetlifyCMS with GitHub",
  "main": "server.js",
  "scripts": {
    "start": "node server.js"
  },
  "dependencies": {
    "express": "^4.18.1",
    "simple-oauth2": "^4.3.0",
    "cors": "^2.8.5",
    "body-parser": "^1.20.0"
  }
}

Create server.js for the OAuth service:

const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors');
const { AuthorizationCode } = require('simple-oauth2');

const app = express();
const port = process.env.PORT || 3000;

// GitHub OAuth configuration
const clientId = process.env.GITHUB_CLIENT_ID;
const clientSecret = process.env.GITHUB_CLIENT_SECRET;
const redirectUrl = process.env.REDIRECT_URL || 'https://blog.yourdomain.com/admin';

const client = new AuthorizationCode({
  client: {
    id: clientId,
    secret: clientSecret
  },
  auth: {
    tokenHost: 'https://github.com',
    tokenPath: '/login/oauth/access_token',
    authorizePath: '/login/oauth/authorize'
  }
});

// Enable CORS and JSON parsing
app.use(cors());
app.use(bodyParser.json());

// Callback route
app.get('/callback', async (req, res) => {
  const { code } = req.query;
  
  try {
    const tokenParams = {
      code,
      redirect_uri: redirectUrl
    };
    
    const accessToken = await client.getToken(tokenParams);
    const token = accessToken.token.access_token;
    
    // Redirect to admin with token
    res.redirect(`${redirectUrl}/#access_token=${token}`);
  } catch (error) {
    console.error('Access Token Error', error.message);
    res.status(500).json('Authentication failed');
  }
});

app.listen(port, () => {
  console.log(`OAuth server listening at http://localhost:${port}`);
});

Create Dockerfile for the OAuth service:

FROM node:16-alpine

WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .

EXPOSE 3000
CMD ["node", "server.js"]

Update the NetlifyCMS config.yml to use the GitHub OAuth backend:

backend:
  name: github
  repo: bennolor/blog
  branch: main
  base_url: https://blog.yourdomain.com
  auth_endpoint: /callback

Add environment variables to GitHub Actions workflow:

- name: Deploy OAuth Configuration
  run: |
    echo "GITHUB_CLIENT_ID=${{ secrets.GITHUB_CLIENT_ID }}" >> .env
    echo "GITHUB_CLIENT_SECRET=${{ secrets.GITHUB_CLIENT_SECRET }}" >> .env
    echo "REDIRECT_URL=https://blog.yourdomain.com/admin" >> .env
    scp -P ${{ secrets.SERVER_PORT }} .env ${{ secrets.SERVER_USER }}@${{ secrets.SERVER_HOST }}:${{ secrets.DEPLOY_PATH }}/.env

Add GitHub OAuth secrets to repository:
- GITHUB_CLIENT_ID
- GITHUB_CLIENT_SECRET
Test authentication flow:
- Navigate to /admin
- Authenticate with GitHub
- Verify access to CMS
Commit and push all changes

Definition of Done:

OAuth service created and containerized
GitHub OAuth secrets stored securely
NetlifyCMS configuration updated to use custom auth
Authentication flow tested and working
CMS accessible only to authorized users
All changes committed to repository

**## Description:** Set up a custom authentication service for NetlifyCMS using GitHub OAuth to allow secure access to the CMS. **Tasks## :** 1. Create a new directory for the OAuth service: - `mkdir -p oauth` 2. Create package.json for the OAuth service: ```json { "name": "netlify-cms-oauth", "version": "1.0.0", "description": "OAuth service for NetlifyCMS with GitHub", "main": "server.js", "scripts": { "start": "node server.js" }, "dependencies": { "express": "^4.18.1", "simple-oauth2": "^4.3.0", "cors": "^2.8.5", "body-parser": "^1.20.0" } } ``` 3. Create server.js for the OAuth service: ```javascript const express = require('express'); const bodyParser = require('body-parser'); const cors = require('cors'); const { AuthorizationCode } = require('simple-oauth2'); const app = express(); const port = process.env.PORT || 3000; // GitHub OAuth configuration const clientId = process.env.GITHUB_CLIENT_ID; const clientSecret = process.env.GITHUB_CLIENT_SECRET; const redirectUrl = process.env.REDIRECT_URL || 'https://blog.yourdomain.com/admin'; const client = new AuthorizationCode({ client: { id: clientId, secret: clientSecret }, auth: { tokenHost: 'https://github.com', tokenPath: '/login/oauth/access_token', authorizePath: '/login/oauth/authorize' } }); // Enable CORS and JSON parsing app.use(cors()); app.use(bodyParser.json()); // Callback route app.get('/callback', async (req, res) => { const { code } = req.query; try { const tokenParams = { code, redirect_uri: redirectUrl }; const accessToken = await client.getToken(tokenParams); const token = accessToken.token.access_token; // Redirect to admin with token res.redirect(`${redirectUrl}/#access_token=${token}`); } catch (error) { console.error('Access Token Error', error.message); res.status(500).json('Authentication failed'); } }); app.listen(port, () => { console.log(`OAuth server listening at http://localhost:${port}`); }); ``` 4. Create Dockerfile for the OAuth service: ```dockerfile FROM node:16-alpine WORKDIR /app COPY package*.json ./ RUN npm install COPY . . EXPOSE 3000 CMD ["node", "server.js"] ``` 5. Update the NetlifyCMS config.yml to use the GitHub OAuth backend: ```yaml backend: name: github repo: bennolor/blog branch: main base_url: https://blog.yourdomain.com auth_endpoint: /callback ``` 6. Add environment variables to GitHub Actions workflow: ```yaml - name: Deploy OAuth Configuration run: | echo "GITHUB_CLIENT_ID=${{ secrets.GITHUB_CLIENT_ID }}" >> .env echo "GITHUB_CLIENT_SECRET=${{ secrets.GITHUB_CLIENT_SECRET }}" >> .env echo "REDIRECT_URL=https://blog.yourdomain.com/admin" >> .env scp -P ${{ secrets.SERVER_PORT }} .env ${{ secrets.SERVER_USER }}@${{ secrets.SERVER_HOST }}:${{ secrets.DEPLOY_PATH }}/.env ``` 7. Add GitHub OAuth secrets to repository: - GITHUB_CLIENT_ID - GITHUB_CLIENT_SECRET 8. Test authentication flow: - Navigate to /admin - Authenticate with GitHub - Verify access to CMS 9. Commit and push all changes ## **Definition of Done:** - OAuth service created and containerized - GitHub OAuth secrets stored securely - NetlifyCMS configuration updated to use custom auth - Authentication flow tested and working - CMS accessible only to authorized users - All changes committed to repository

bennolor added this to the Release milestone 2025-06-01 18:29:42 +02:00

bennolor added this to the Initial Development and Deployment project 2025-06-01 18:29:43 +02:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: bennolor/hugoblog#7