Problems with oAuth/Bitbucket update from NetlifyCMS@2 to DecapCMS@3

[crs1138]

Describe the bug

Current setup

We have a repository in Bitbucket Cloud that we use for storing the content as generated by NetlifyCMS@2. We have set up oAuth for the production using the auth_type='implicit in production. Meanwhile in development we access the CMS from http://localhost:3001/admin and the auth_type = undefined. This results in a call to API Netlify with https://api.netlify.com/auth?provider=bitbucket&site_id=cms.netlify.com&scope=repo which let's our developers to authenticate and enter in CMS.

Problem

One of the changes introduced in DecapCMS@3 is the change of the default site_domain used during the authentication. The site_domain (and consecutively the siteId) passed in the oAuth has changes from cms.netlify.com to demo.decapcms.org, this results in Not found response from https://api.netlify.com/auth?provider=bitbucket&site_id=demo.decapcms.org&scope=repo. As the demo.decapcms.org value is hardcoded for localhost, I can't override it.

If I search and replace all occurrences of demo.decapcms.org with cms.netlify.com, I am able to obtain the correct oAuth token and access into the CMS in localhost.

What am I supposed to do to enable access to CMS from localhost?

To Reproduce

1. Update dependencies from

• "netlify-cms-app": "^2.15.72" => "decap-cms-app": "^3.1.10"
• "netlify-cms-core": "^2.55.2" => "decap-cms": "^3.1.10"

Expected behavior

I expect to be able to authenticate and enter CMS from the local development environment running on http://localhost:3001/admin.

Screenshots

Applicable Versions:

• Decap CMS version: 3.1.10
• Git provider: Bitbucket
• OS: MacOS 13.6.6, Ubuntu
• Browser version brave 1.64.116

• Node.JS version: 20.5.0
• yarn 3.4.1

CMS configuration

Dynamic configuration

import type { CmsCollection } from 'decap-cms';
import type { ProductCmsConfig } from './types';
import type { EditorURLSearchParams } from 'web/app/admin/types';
import { components } from 'cms/collections/components';
import { sections } from 'cms/collections/sections';
import { pages } from 'cms/collections/pages';
import { commonPages } from 'cms/collections/commonPages';
import { commonProductPages } from 'cms/collections/commonProductPages';

const getCollections = async (
	product: string,
	theme: string,
): Promise<Object[]> => [
	{ ...(await components(product, theme)) },
	{ ...(await sections(product, theme)) },
	{ ...pages(product, theme) },
	{ ...commonPages },
	{ ...commonProductPages(product) },
];

export const getConfig = async ({
	branch,
	product,
	theme,
}: EditorURLSearchParams): Promise<{ config: ProductCmsConfig }> => {
	const IS_PROD = process.env!.NODE_ENV === 'production';
	const IS_STAGE = process.env!.NEXT_PUBLIC_APP_ENV === 'stage';

	const app_id = IS_STAGE
		? process.env!.NEXT_PUBLIC_CMS_APP_ID_STAGE
		: process.env!.NEXT_PUBLIC_CMS_APP_ID_PROD;
	return {
		config: {
			load_config_file: false,
			logo_url: '/common/logo.webp',
			backend: {
				open_authoring: true,
				name: 'bitbucket',
				branch: branch || process.env!.GIT_BRANCH,
				repo: process.env!.NEXT_PUBLIC_REPO,
				auth_type: IS_PROD ? 'implicit' : undefined,
				app_id,
				product,
				styleweb: theme,
				commit_messages: {
					create: 'Create {{collection}} “{{slug}}”',
					update: 'Update {{collection}} “{{slug}}”',
					delete: 'Delete {{collection}} “{{slug}}”',
					uploadMedia: '[skip ci] Upload “{{path}}”',
					deleteMedia: '[skip ci] Delete “{{path}}”',
				},
				siteId: 'mydomain.com',
			},
			publish_mode: 'editorial_workflow',
			// allow_nesting: true,
			media_folder: `/${
				IS_PROD ? '' : 'public'
			}/${product}/${theme}/assets/`, // Media files will be stored here.
			public_folder: `/${product}/${theme}/assets`, // The src attribute for uploaded media will begin with this path.
			site_url: IS_PROD
				? 'https://mydomain.com/editor'
				: 'http://localhost:3001/editor',
			collections: (await getCollections(
				product,
				theme,
			)) as CmsCollection[],
		},
	};
};

[htessaro]

I have a similar problem. When I try to log in using the deployed page on Netlify, I receive the Not found message.

However, it works normally when I try to do the same while running the project locally.

[danielmoessner]

I have the same issue, but for me it happens by switching from 3.0.12 to 3.1.0-beta.0 which internally only changes the React Version.

My config is also the manual config but more simple:

 <script type="module">
    window.CMS_MANUAL_INIT = true;
    const { CMS, initCMS: init } = window;
    import config from './config.js';
    init({config: config})
    console.log("CMS", CMS)
    </script>

and
<script src="https://cdn.jsdelivr.net/npm/decap-cms@3.1.0-beta.0/dist/decap-cms.js"></script>

// config.js

import tags from "../cms/tags.js";

export default {
  backend: {
    name: "git-gateway",
    branch: "main",
    repo: "danielmoessner/tortuga-webdesign.de",
  },
  local_backend: true,
  display_url: "https://tortuga-webdesign.de",
  site_url: "https://tortuga-webdesign.de",
  media_folder: "/public/media",
  public_folder: "/media",
  load_config_file: false,
  collections: [tags],
};

// tags.js

export default {
  name: "tag",
  label: "Tag",
  format: "json",
  folder: "content/tag",
  create: true,
  fields: [{ label: "Title", name: "title", widget: "string" }],
};

With this config the issue should be easy to reproduce.