PKCE authentication: content is not loaded and no error at all #136

Closed josineto closed 1 month ago

Using GitLab, with a private repository and CSP rules.

I've just configured PKCE authentication following Decap CMS' docs on it. First, I've got CSP errors due to two configurations not mentioned in Sveltia docs:

connect-src  https://status-api.hostedstatus.com
script-src   'unsafe-inline'

After adding them, I'm able to log in with GitLab, but collections' content is not loaded (just the configuration for the collections, populating the left sidebar) and there's no error in browser console.

The CMS works flawlessly when loaded with a local repository.

https://status-api.hostedstatus.com is mentioned in the doc, and I don’t think unsafe-inline is necessary (my client doesn’t have it.)

Are you using a self-hosted GitLab instance?

Just checked with my private test repo hosted on GitLab.com, and the content was loaded. Not sure what’s going on 🤔

Are you using a self-hosted GitLab instance?

No, just a standard private gitlab.com repository.

Also, I've tested this in Firefox (125) and Chrome (123), with pretty much the same results, except in Chrome there's a "problems" message about discontinued use of StorageType.persistent when navigator.storage should be used instead. My site is builded by Hugo and hosted on Netlify. My GitLab account is protected by 2FA.

Below is the backend part of my configuration:

backend:
  name: gitlab
  repo: <username>/<repository>
  auth_type: pkce
  app_id: <app-id>

In the first time I log in, after clicking "Authorize" in the screen below, the popup returns to the Sveltia login screen with the button "Sign In with GitLab". I then close the popup, and click "Sign In with GitLab" in the main window (which is also on the login screen). Then the screen below appears again, I click "Authorize" and then I log in, at the first collection but without any content. Everytime I log in, the screen below appears. Perhaps it's related, maybe the authentication is not being persisted?

GitLab OAuth authorization screen

I don't know if it's something related, but since the very first time I've used a static CMS (Netlify CMS at that time), I had to duplicate config.yaml both in static/ and static/admin/, I don't know why. When I use Sveltia locally, it correctly reads from static/admin/config.yaml, but when on web it reads from static/config.yaml.

Tested with another site (actually the same but last time I connected it from localhost) hosted on Cloudflare Pages, but it also worked fine with PKCE.

Your API key is supposed to be stored in the browser’s local storage, named sveltia-cms.user. Can you find it? (under the Storage tab in Firefox DevTools, under the Application tab in Chrome DevTools)

I don't know if it's something related, but since the very first time I've used a static CMS (Netlify CMS at that time), I had to duplicate config.yaml both in static/ and static/admin/, I don't know why. When I use Sveltia locally, it correctly reads from static/admin/config.yaml, but when on web it reads from static/config.yaml.

I think it depends on the server or framework’s setting. Sometimes a trailing slash in the URL path is removed, so when you access /admin/, you’ll be taken to /admin. The CMS tries to load the configuration file from the same directory, meaning /config.yml would be loaded instead of /admin/config.yml.

See https://github.com/decaporg/decap-cms/issues/7023

The solution is something like:

Open /admin/#/ or /admin/index.html
Rename index.html to cms.html and open /admin/cms instead (I have done this for one of my clients)

2. Rename index.html to cms.html and open /admin/cms instead (I have done this for one of my clients)

Thank you, I did this and it solved the conflict between configs.

Your API key is supposed to be stored in the browser’s local storage, named sveltia-cms.user. Can you find it? (under the Storage tab in Firefox DevTools, under the Application tab in Chrome DevTools)

In local storage there are two keys:

sveltia-cms.user with backendName, token, name, login, email, avatarURL, profileURL but no API key;
sveltia-cms.prefs. with apiKeys, which is empty.

And as before, everytime I log in to CMS the GitLab screen above appears asking me to authorize. And no error in console.

Two new things:

I tried to create a new piece of content. It's perfectly created and published, and it appears in the CMS at its collection until I log out from CMS. If I log in again, the content I've just created doesn't appear anymore (and all other content doesn't appear either).
File collections' content is correctly loaded. So the problem only occurs with Folder collections.

(Listen, Sveltia CMS is fantastic, your work is great! I'd like to help more in this issue, but I don't know how)

Thanks for your kind words 🥰 I’d like to fix the issue anyway. Will dive into this further.

@josineto Would you mind inviting me to the private repository if it doesn’t contain confidential information? My GitLab account is @koheiyoshino.

Hi @kyoshino , I invited you in GitLab, with expiry date as May 13

Thanks, will check.

Looks like the project code is not available with the Guest role on private repo. Can you change my role to Reporter?

Repository: View project code On self-managed GitLab instances, users with the Guest role are able to perform this action only on public and internal projects (not on private projects). External users must be given explicit access (at least the Reporter role) even if the project is internal. Users with the Guest role on GitLab.com are only able to perform this action on public projects because internal visibility is not available.

@kyoshino done, you're now Reporter

Quick findings:

If you are sign out of GitLab when you go through the authorization process, the popup window won’t close after you sign in and authorize the OAuth app. I have seen this issue before. If you manually close the popup, and click Sign In with GitLab, you should be able to sign in. I’ll try to find a solution.
The content is not displayed due to GitLab’s limit of 100 records per query. I’m fixing it now.

The fix shipped with v0.26.4! Can you please delete the local data base and try again? In Chrome, open DevTools, select the Application tab, select your repository name under IndxededDB, and Click Delete database. Then reload the page.

It works!!! Sorry for the delay, I've only managed to test it today, but it works and now I can say I'm really impressed with how responsive Sveltia CMS is, in terms of loading time of everything. It seems like I'm working completely local, it's really impressive! Your work is great, thank you!

No worries! Glad it works for you now! 👏🏼

I forgot to mention that since GitLab only allows to retrieve 100 records (files) at once, loading the site data is slower than GitHub that doesn’t have such a limit. I think Sveltia CMS is overall still faster than Netlify/Decap CMS 😄

Yes, and also much faster than Static CMS (which uses React as well).

I know Static CMS but haven’t tried it myself yet. It’s a community maintenance fork of Netlify CMS. Just like Sveltia CMS, it was started before Decap CMS was announced. For some reason, they have dropped the GraphQL support and the bundle size is pretty huge (2.5 MB), so I guessed the performance wasn’t great. They have better documentation than Netlify/Decap CMS though.

Sooner or later I’ll start working on Static CMS compatibility, including the Key Value widget, which effectively solves https://github.com/decaporg/decap-cms/issues/5489 🙂

sveltia / sveltia-cms

PKCE authentication: content is not loaded and no error at all #136