Netlify-cms: Failed to configure custom identity endpoint via config.yml

[mdehollander]

I am hosting a hugo site with netlify-cms on a custom hosting including it via a script tag. I would like to make use of the netlify identity service. Therefore a custom endpoint needs to be configured via APIUrl. I got some help via Gitter on this from @tech4him1 and @erquhart, but after that it was suggested to file a bug report.

I configured custom endpoint in the config.yml like this:

backend:
  name: git-gateway
  identity_url: "https://www.my-netlify-site.com/.netlify/identity"
  gateway_url: "https://www.my-netlify-site.com/.netlify/git/github"

This should work according to the implementation (https://github.com/netlify/netlify-cms/blob/master/src/backends/git-gateway/implementation.js) and this should set the APIurl correctly. However, when rendered the endpoint is still going to the custom hosting and not to the endpoint at netlify raising an error: Failed to load settings from /.netlify/identity. @tech4him1 suggested that the APIurl is not correctly set when using the widget.

@biilmann, can you have a look at it?

[tech4him1]

@erquhart @mdehollander Something to try:

Change your Identity script to https://identity.netlify.com/v1/netlify-identity.js (instead of netlify-identity-widget.js).

Then add, in the admin page body, but above the cms.js:

<script>
netlifyIdentity.init({
  APIUrl: "https://www.my-netlify-site.com/.netlify/identity"
});
</script>

Something similar will need changed in the site homepage, but you can try just on the admin page first.

[mdehollander]

This seems to be on the right track, because I get the login screen because the endpoint is now at the netlify side. When I enter my credentials, I get this error: NetworkError when attempting to fetch resource. And in the firefox console a more detailed error:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://heuristic-tereshkova-e8643d.netlify.com/.netlify/identity/token. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

The widget seems also to have this issue: https://github.com/netlify/netlify-identity-widget/issues/102

Any workaround or solution?

[mdehollander]

I tried to set Header set Access-Control-Allow-Origin "*" in the .htaccess file at my hosting, but this did not have any effect

[erquhart]

@talves netlify.toml only impacts sites hosted on Netlify.

@mdehollander this really depends on your hosting setup. Have you reached out to your hosting company on it?

[tech4him1]

Isn't it the Netlify Identity site that needs the Access-Control-Allow-Origin header, not the site using it?

[mdehollander]

I have set it on both sides, but not correct I guess because it is not working.
For netlify, I set this in the netlify.toml:

[[headers]]
  for = "/*"
  [headers.values]
Access-Control-Allow-Origin = "*"

And for the hosting I use the .htaccess

When i check the headers, for example with http://www.webconfs.com/http-header-check.php, I see the wildcard for the Access-Control-Allow-Origin (I will make it more specific when it is working)

My netlify site is at https://kbf2018.netlify.com and my custom hosting is at https://2018.kloosterboerderijfestival.nl/

The output in the firefox console is:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://kbf2018.netlify.com/.netlify/identity/token. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

[talves]

@erquhart I believe that was the reason I made the recommendation at the time.

[tech4him1]

It looks like if an Origin header is sent along with the Identity request, Identity will automatically add the Access-Control-Allow-Origin header (thanks for pointing out the example on localhost, @erquhart). Interestingly, this works for both the settings and token endpoints on localhost, but on the live site it currently is only working on settings. I'll try to reproduce.

[erquhart]

@talves ah! Didn't realize netlify.toml would have impact for Netlify services when not hosted on Netlify, my bad.

[tech4him1]

Digging further:

The standard token request coming from a hosted site is:

fetch('https://upbeat-bohr-1c9a68.netlify.com/.netlify/identity/token', {
  method: "POST",
  headers: {
    "Content-Type": "application/x-www-form-urlencoded",
    "X-Use-Cookie": "1"
  },
  body: "grant_type=password&username=my%40email&password=mypassword"
});

This is true whether you are logging in from a Netlify-hosted site or your own. It currently breaks on non-Netlify sites, because the X-Use-Cookie header causes CORS to make a "preflight" OPTIONS request. On localhost sites, however, the X-Use-Cookie header is not set, so no OPTIONS request is made. The problem is that the Access-Control headers are not being set on OPTIONS requests, only on regular (POST) requests.

The related code for turning off the cookie when running locally was added in https://github.com/netlify/netlify-identity-widget/pull/74. @Benaiah Do you have any background on why turning off cookies was necessary for CORS requests? Is it related to what I've laid out here?

Also, I'm definitely not an expert on CORS, but is there a reason why the Access-Control headers can't be sent back as part of the pre-flight/OPTIONS requests as well as the POST? This seems like the main issue here. I'm wondering if X-Use-Cookie simply needs added to the allowed headers list in the GoTrue CORS setting: https://github.com/netlify/gotrue/blob/842281982917452274fceaab3a1ec71bba2593e4/api/api.go#L146

[mdehollander]

Any update on this? If there is anything I can do from my side, let me know!

[erquhart]

Hopefully being addressed under https://github.com/netlify/netlify-identity-widget/issues/102, commented to request confirmation.

[bcomnes]

The identity endpoint supports CORS. If you run into a CORS warning, it may be related to the identity endpoint not being deployed yet, this causing the preflight options call to fail resulting in the cors warning.

The workaround is triggering a site deploy, which should fully activate the identity endpoint. The original idea was that platform could have this happen automatically, but its been a while since that was discussed, and we may have a workaround that the app could do, triggering a redeploy when activating the identity endpoint. I'll open an issue for discussion on that.

[tech4him1]

@bcomnes Please see https://github.com/netlify/netlify-cms/issues/1213#issuecomment-381202929 above. The Identity endpoint does support CORS normally, but if the X-Use-Cookie header is set, the CORS headers are not returned. That is the main bug here.

[bcomnes]

I'll review that. It does sound like X-Use-Cookie not being in the allowed headers list on gotrue may be an issue, considering gotrue-js has an option to set that header. Let me ask around today and see if I can piece together the whole story on this.

[mdehollander]

Good to see that the x-use-cookie is added to the header of gotrue. At my side I don't see a difference, I also triggered a new build at netlify, but at my custom hosted version of the website I still get a cors header warning when using netlify identity.

[tech4him1]

@mdehollander https://github.com/netlify/gotrue/pull/170 hasn't actually been merged yet.

[bcomnes]

I'll put this on my todo for Monday.

[bcomnes]

The fix noted above is deployed. Let me know how that works out for you.

[mdehollander]

It works! @bcomnes, thanks for suggesting and implementing a fix. Great to see the Netlify CMS also working on a custom hosted site.

[tech4him1]

@erquhart Should we document how to use Netlify CMS with Identity on a custom (self-hosted) site?

[bcomnes]

Thanks to @tech4him1 for looking into the nitty gritty on this one and a thank you to everyone else invovled!

[verythorough]

@tech4him1 We do at least reference it in the docs: https://www.netlifycms.org/docs/authentication-backends/#git-gateway-without-netlify

As GoTrue and Git Gateway docs improve (thanks @lunaceee for your work on this!) that may help fill in some of the blanks for the server-side work.

[mdehollander]

Did the config for the Git Gateway change? I get a 404 for the Gateway config at https://kbf2018.netlify.com/.netlify/git//github/branches/master?ts=1535654933726 and a message:

Git Gateway Error: Please make sure Git Gateway is enabled on your site.

I already remove the Identity instance the the netlify app and created a new git gateway. Afterwards triggered a new build. Without any success. Any ideas?

[talves]

@mdehollander did you enable git-gateway in the identity section of your site on netlify.com

[tech4him1]

@mdehollander There should only be one slash between git and github there. Is that in your config, or breaking somewhere else?

[mdehollander]

I also noticed this extra slash in the git gateway settings @tech4him1. It is not in my config (http://kbf2018.netlify.com/admin/config.yml):

  identity_url: "https://kbf2018.netlify.com/.netlify/identity"
  gateway_url: "https://kbf2018.netlify.com/.netlify/git/github"

Not sure where that slash is added.

[tech4him1]

@mdehollander I've traced it to the changes made to add GitLab/BitBucket support to Git Gateway. You should be able to fix it by simply dropping the /github from the end of your gateway_url, but we need to fix the code as well. Would you mind opening a new issue regarding the double-slash being added?

https://github.com/netlify/netlify-cms/blob/ae28f6301ed91714510c4393b736185f285358c0/packages/netlify-cms-backend-git-gateway/src/implementation.js#L66

[mdehollander]

Sounds logic! I don't think a new issue is needed because when I remove /github from the gateway_url the request has only a single slash: GET https://kbf2018.netlify.com/.netlify/git/settings

[tech4him1]

@mdehollander We still need a new issue because the code that is supposed to handle having a /github on the end is instead breaking it. I can create it if you want, though.