Netlify-cms: GitHub as a backend does not work

[ghost]

Hello Developers,

I make my first steps with the Netlify CMS and do not understand how one can realize GitHub as a backend. I've already prepared everything on GitHub.com in own account for and have generated the client ID and Secret Key.

But I do not understand where you can find Access tab in the Dashboard. I see in the browser at /admin no such tab and does not find it. Or do I have to GitHub.com anywhere the client ID and Secret Key Enter?

Can you maybe help me figure it out ?!

Thanks in advance.

[biilmann]

Hi Alex,

Currently the GitHub backend depends on netlify's Authentication Provider system, so you'll need to set the site up as a netlify site and follow the instructions here to enable the GitHub authentication provider:

https://www.netlify.com/docs/authentication-providers#using-an-authentication-provider

We do want to see other OAuth services enabled as well so there's no dependency on netlify...

[ghost]

Hi,
I need your help again. I have created in the /admin two files. These hot config.yml and index.html. I did that according to the instructions from the Netlify Repo.

In the config.yml file it looks like this at the top:

backend:
    name: github-api
    repo: AlexL777/netlifycmsblog # Path to your Github repository
    branch: master # Branch to update (master by default)

The contents of the index.html file should vote that way.

But if I frontend wants me log under /admin, appears to me "No provider found".

On GitHub in my Netlify repo I have the client ID and the Secret Key generated.

However, I do not understand why the provider can not be found. Are you an idea why it is so.

[ericxyan]

I think the doc missed one line.
You need to do some configuration work.

netlify.configure({'site_id': <your-site>.netlify.com});

[ghost]

Does this line will be inserted in the config.yml? Do I understand this in the right manner?

[cassiozen]

Hi, i'm closing this due to inactivity. Please feel free to reopen if you want to add to the discussion.

[fool]

(reopened so a customer seeing the same problem can post their information here)

[HarlemSquirrel]

@ericxyan @fool

I am experiencing the same issue but netlify does not seem to be defined once the page is loaded. NetlifyAuth is available but does not have a configure function. Can you please point me in the right direction for where to use the above solution?

Thanks!

Update:
I was looking at this file and it looks like the issue of loading the CMS on localhost has already been addressed. In my situation, we have our main site served by nginx and load the netlify site via proxy_pass for specified paths. Attempting to load the admin CMS page breaks since the host is different than our Netlify custom domain.

I could be wrong but I don't currently see a way of explicitly setting site_id from config.yml or any place else.

[josephearl]

It looks like currently the site_id is not configurable - the host name is used as the site id.

In lib/netlify-auth/Authenticator.js:

  getSiteID() {
    if (this.site_id) {
      return this.site_id;
    }
    const host = document.location.host.split(':')[0];
    return host === 'localhost' ? null : host;
  }

[HarlemSquirrel]

Would a PR to add this functionality be considered? I'd be happy to work on it!

[josephearl]

I think so. I can see there being cases where people's site_ids don't match up with the domain they are hosting under. @erquhart @Benaiah?

The Authenticator supports a site_id being provided in the constructor, so the best place to make a change would be in src/backends/github/implementation.js, which currently has the following:

    if (document.location.host.split(':')[0] === 'localhost') {
      auth = new Authenticator({ site_id: 'cms.netlify.com' });
    } else {
      auth = new Authenticator();
    }

The else could be changed to provide the site_id defined in the config.

[Benaiah]

@josephearl I agree that this is something we should support. We should pass it to the individual backends from src/backends/backend.js, since that's the entry point that the rest of the application uses.

[HarlemSquirrel]

I'm trying to do something like...

src/backends/github/AuthenticationPage.js

  handleLogin = (e, config) => {
    e.preventDefault();
    let auth;
    if (document.location.host.split(':')[0] === 'localhost') {
      auth = new Authenticator({ site_id: 'cms.netlify.com' });
    } else {
      auth = new Authenticator({ site_id: config.getIn(["backend", "site_id"], null) });
    }

How do I access config from here? Thanks~

[erquhart]

@HarlemSquirrel you can pass the config in as a prop. If you trace through the code, you'll notice the AuthenticationPage component is only used in the implementation scripts for each backend, where it's returned from an authComponent method. That method is then accessed in src/containers/App.js, where the component is actually used and receives props. You could pass a siteId prop in there.

[HarlemSquirrel]

Thanks! I'm still very much new to React. I think I understand this part better now.

[vencax]

See this: https://github.com/netlify/netlify-cms/pull/411 or https://github.com/vencax/netlify-cms-github-oauth-provider

[cheapsteak]

https://www.netlify.com/docs/authentication-providers#using-an-authentication-provider

The link broke (trying to setup netlify-cms and getting "No Auth Provider Found")

[tech4him1]

@cheapsteak Thanks for reporting that, here are some current instructions: https://www.netlifycms.org/docs/test-drive/#authenticate-with-github.

[verythorough]

@cheapsteak @tech4him1 PR #626 will remove the "Authenticate with GitHub" section from the Test Drive doc, so the link the that doc will no longer work. However, the _original_ link is now back in action:

https://www.netlify.com/docs/authentication-providers#using-an-authentication-provider

[SKempin]

Solved by following this (not clearly linked in docs):
https://docs.netlify.com/visitor-access/oauth-provider-tokens/#setup-and-settings