astro-sveltia-cms

Astro integration for the Sveltia CMS with custom OAuth backend

For an astro sveltia example you can look at astro-starter

This repo does the same thing of https://github.com/dorukgezici/astro-decap-cms-oauth but it use Sveltia instead of Decap CMS.

This integration automatically mounts the Sveltia CMS admin dashboard to /admin and custom OAuth authentication backend routes to /oauth, /oauth/callback using GitHub as the provider.

This way, you aren't vendor-locked to Netlify and your app can be deployed anywhere that supports SSR.

Installation

npx astro add astro-sveltia-cms

Manual Installation

npm install astro-sveltia-cms

Add the integration and set output to server in your astro.config.mjs file:

import { defineConfig } from "astro/config";
import sveltiaCms from "astro-sveltia-cms";

export default defineConfig({
    ...,
    integrations: [sveltiaCms()],
    output: "server",
});

Usage

1. Make sure Astro is in SSR mode (output: "server" set in astro.config.mjs)

2. Put your config.yml file in public/admin/config.yml

backend:
  name: github
  branch: main # change this to your branch
  repo: majesticostudio/astro-sveltia-cms # change this to your repo
  site_domain: astro-sveltia-cms.vercel.app # change this to your domain
  base_url: https://astro-sveltia-cms.vercel.app # change this to your prod URL
  auth_endpoint: oauth # the oauth route provided by the integration

3. Set up GitHub OAuth app

On GitHub, go to Settings > Developer Settings > OAuth apps > New OAuth app. Or use this direct link.

Homepage URL: This must be the prod URL of your application.

Authorization callback URL: This must be the prod URL of your application followed by /oauth/callback.

4. Set env variables

OAUTH_GITHUB_CLIENT_ID=
OAUTH_GITHUB_CLIENT_SECRET=

Configuration Options

export interface SveltiaCMSOptions {
  adminRoute?: string;
  oauthDisabled?: boolean;
  oauthLoginRoute?: string;
  oauthCallbackRoute?: string;
}

const defaultOptions: SveltiaCMSOptions = {
  adminRoute: "/admin",
  oauthDisabled: false,
  oauthLoginRoute: "/oauth",
  oauthCallbackRoute: "/oauth/callback",
};

To disable injecting OAuth routes, set oauthDisabled to true in astro.config.mjs.

import { defineConfig } from "astro/config";
import sveltiaCms from "astro-sveltia-cms";

export default defineConfig({
    ...,
    integrations: [sveltiaCms({ oauthDisabled: true })],
    output: "server",
});