Identity prompt for Git Gateway blocks GitLab implicit auth login #1824

Closed pieterdd closed 4 years ago

I really like what Netlify CMS is doing with the whole "static website with admin interface that makes Git commits" thing. But I'm hesitant to use it for real projects.

Even if you use a custom authentication backend, Netlify CMS seems dependent on Netlify. That's fine for now, I like the platform. But startups can go out of business. Or they get acquired and shut down by a big company. That's not a dependency I have when I use a more traditional CMS; I can always get a VPS somewhere else. Netlify CMS on the other hand requires a soft vendor lock-in to Netlify for the editing capabilities.

If Netlify is ever discontinued, is there a realistic way to run Netlify CMS on other infrastructure?

Netlify CMS does not fundamentally depend on Netlify, and it is an explicit goal of the project to be compatible with any setup, including those that don't use Netlify. That said, you might have to reconfigure the CMS slightly to run it on a site not hosted on Netlify, depending on the authentication scheme you're using.

Netlify CMS only uses Netlify for an OAuth proxy by default. Any OAuth flow other than implicit grant requires a server-side component to authenticate securely, so Netlify hosts a free one that can be used in development or for sites hosted using Netlify. However, there are several alternatives to this that work without Netlify's involvement at runtime:

You can use GitLab with the "Implicit Grant" option described here: https://www.netlifycms.org/docs/authentication-backends/#client-side-implicit-grant - this does not require a server-side component for authentication, so it works entirely in your browser.
You can use GitHub along with any of the third-party OAuth clients listed here: https://www.netlifycms.org/docs/authentication-backends/#external-oauth-clients.
You can run your own git-gateway server as described here: https://www.netlifycms.org/docs/authentication-backends/#git-gateway-without-netlify (this method is not as well supported as the others at the moment).

It's definitely possible to use without anything hosted on Netlify. The downside is that it requires a bit more configuration, and some kind of server for authentication. My current setup for my personal site is hosted entirely on Firebase, even the auth which is going through a Firebase Cloud Function that I wrote for GitHub OAuth.

The only problem is replicating git-gateway if you want to allow access without requiring GitHub accounts. Theoretically you can host that yourself, but it seems to require a more advanced server setup and there isn't any documentation.

You can use GitLab with the "Implicit Grant" option described here: https://www.netlifycms.org/docs/authentication-backends/#client-side-implicit-grant - this does not require a server-side component for authentication, so it works entirely in your browser.

Then how come I still get this prompt when authenticating against GitLab? That implies a Netlify dependency, doesn't it?

This is actually Git Gateway looking for Netlify Identity, this shouldn't happen when you've got another method of authentication set up properly. Can you share your config / repo?

Here's the config. IIRC it's based on the Hugo Site Starter starter project except that I overwrote the backend.

backend:
  name: gitlab
  repo: pdedecker/netlify-cms-test
  auth_type: implicit
  app_id: fdcf25187f4d7fa62c77bd2299c879d8be57e64d708f90e3a29f70867d5b5de5

media_folder: "site/static/img" # Folder where user uploaded files should go
public_folder: "img"

collections: # A list of collections the CMS should be able to edit
  - name: "post" # Used in routes, ie.: /admin/collections/:slug/edit
    label: "Post" # Used in the UI, ie.: "New Post"
    folder: "site/content/post" # The path to the folder where the documents are stored
    create: true # Allow users to create new documents in this collection
    fields: # The fields each document in this collection have
      - {label: "Title", name: "title", widget: "string"}
      - {label: "Publish Date", name: "date", widget: "datetime"}
      - {label: "Intro Blurb", name: "description", widget: "text"}
      - {label: "Image", name: "image", widget: "image", required: false}
      - {label: "Body", name: "body", widget: "markdown"}
  - name: "pages"
    label: "Pages"
    files:
      - file: "site/content/_index.md"
        label: "Home Page"
        name: "home"
        fields:
          - {label: Title, name: title, widget: string}
          - {label: Subtitle, name: subtitle, widget: string}
          - {label: Image, name: image, widget: image}
          - {label: "Blurb", name: blurb, widget: object, fields: [
              {label: "Heading", name: "heading", widget: string},
              {label: "Text", name: "text", widget: "text"}]}
          - {label: "Intro", name: intro, widget: object, fields: [
              {label: "Heading", name: "heading", widget: string},
              {label: "Text", name: "text", widget: "text"}]}
          - {label: "Products", name: products, widget: list, fields: [
              {label: "Image", name: "image", widget: "image"},
              {label: "Text", name: "text", widget: "text"}]}
          - {label: "Values", name: "values", widget: "object", fields: [
              {label: "Heading", name: "heading", widget: string},
              {label: "Text", name: "text", widget: "text"}]}
      - file: "site/content/contact/_index.md"
        label: "Contact Page"
        name: "contact"
        fields:
          - {label: Title, name: title, widget: string}
          - {label: Logo, name: logo, widget: image}
          - {label: Body, name: body, widget: markdown}
          - label: Contact Entries
            name: contact_entries
            widget: list
            fields:
              - label: Heading
                name: heading
                widget: string
              - label: Text
                name: text
                widget: text
      - file: "site/content/products/_index.md"
        label: "Products Page"
        name: "products"
        fields:
          - {label: Title, name: title, widget: string}
          - {label: Image, name: image, widget: image}
          - {label: Heading, name: heading, widget: string}
          - {label: Description, name: description, widget: string}
          - {label: Intro, name: intro, widget: object, fields: [{label: Heading, name: heading, widget: string}, {label: Description, name: description, widget: text}, {label: Blurbs, name: blurbs, widget: list, fields: [{label: Image, name: image, widget: image}, {label: Text, name: text, widget: text}]}]}
          - {label: Main, name: main, widget: object, fields: [{label: Heading, name: heading, widget: string}, {label: Description, name: description, widget: text}, {label: Image1, name: image1, widget: object, fields: [{label: Image, name: image, widget: image}, {label: Alt, name: alt, widget: string}]}, {label: Image2, name: image2, widget: object, fields: [{label: Image, name: image, widget: image}, {label: Alt, name: alt, widget: string}]}, {label: Image3, name: image3, widget: object, fields: [{label: Image, name: image, widget: image}, {label: Alt, name: alt, widget: string}]}]}
          - {label: Testimonials, name: testimonials, widget: list, fields: [{label: Quote, name: quote, widget: string}, {label: Author, name: author, widget: string}]}
          - {label: Full_image, name: full_image, widget: image}
          - {label: Pricing, name: pricing, widget: object, fields: [{label: Heading, name: heading, widget: string}, {label: Description, name: description, widget: string}, {label: Plans, name: plans, widget: list, fields: [{label: Plan, name: plan, widget: string}, {label: Price, name: price, widget: string}, {label: Description, name: description, widget: string}, {label: Items, name: items, widget: list}]}]}
      - file: "site/content/values/_index.md"
        label: "Values Page"
        name: "values"
        fields:
          - {label: Title, name: title, widget: string}
          - {label: Image, name: image, widget: image}
          - label: Values
            name: values
            widget: list
            fields:
              - {label: Heading, name: heading, widget: string}
              - {label: Text, name: text, widget: text}
              - {label: Image, name: imageUrl, widget: image}

The "Development Settings" popup opens after GitLab redirects back to the admin site. I've whitelisted both http://127.0.0.1:3000/admin/ and http://localhost:3000/admin/.

Reopening this to track @pieterdd's issue and making the title more specific.

I've shared the repo publicly to help track down the issue: https://gitlab.com/pdedecker/netlify-cms-test

The following callback URLs have been whitelisted for use with this OAuth application:

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

I still think there's value in addressing this dependency.

@tech4him1 in #1690 you mentioned that implicit auth isn't compatible with the identity widget - do you recall why?

Implicit auth redirects back to the site with an access_token parameter in the hash, thus it is mistakenly handled by the identity widget here https://github.com/netlify/netlify-identity-widget/blob/0dc03113f614c48c4eb0a3a683c3b0135c5ff6f8/src/netlify-identity.js#L176

Ah, thought it might be that - I was thinking of how to allow them to coexist but really folks shouldn’t be using both.

@pieterdd there’s no dependency, you’re loading the Netlify Identity widget explicitly: https://gitlab.com/pdedecker/netlify-cms-test/blob/master/site/static/admin/index.html#L10

Remove that line and you’re good to go.

For anyone else having this issue, only load the Netlify Identity widget if you’re using it.

_{Sent with GitHawk}

@erquhart since the Gatsby plugin default is to add the identity widget I think we can allow them to co-exists (just opened 2 PRs for it)

decaporg / decap-cms

Identity prompt for Git Gateway blocks GitLab implicit auth login #1824