Hey @kidunot89 @drewbaker. The login isn't working for me on Chrome.

Here's the error message Chrome is logging:

Because a cookie's SameSite attribute was not set or is invalid, it defaults to SameSite=Lax, which prevents the cookie from being set in a cross-site context. This behavior protects user data from accidentally leaking to third parties and cross-site request forgery. Resolve this issue by updating the attributes of the cookie: Specify SameSite=None and Secure if the cookie is intended to be set in cross-site contexts. Note that only cookies sent over HTTPS may use the Secure attribute. Specify SameSite=Strict or SameSite=Lax if the cookie should not be set by cross-site requests

Steps to reproduce:

In Chrome 85, run the following query:

mutation {
  loginWithCoookies(clientMutationId: "123" login: "mycoolusername" password: "mycoolpassword") {
    status
    __typename
  }
}

Then run a subsequent authenticated query

query Me {
  viewer {
    email
    nicename
    __typename
  }
}

Expected results:

1. successful login

{"data":{"loginWithCookies":{"status":"SUCCESS","__typename":"LoginWithCookiesPayload"}}}

2. WordPress logged in cookie set (and sent along with subsequent requests)
3. authenticated queries are successful

{"data":{"viewer":{"email":"[email protected]","nicename":"jacob","__typename":"User"}}}

Actual results:

1. login is successful
2. cookie was not set and not part of headers on subsequent request
3. authenticated request returns null

{"data":{"viewer":null}}

Related to #16

I'm developing a next.js app with WP backend locally and I have faced the following issue -

1. after activating the plugin next.js build returns an error as expected - it cannot fetch data via GraphQl
2. a have added http://localhost:3000/ and http://localhost to the authorized domains list -> next.js still can't fetch data - that is unexpected behaviour

Hi, We are using WP Graphql and Apollo to fetch data from WordPress in our Next.js codebase. Recently we've tried using your plugin WP Graphql Cors in order to try to get rid of some cors issues we experienced on some queries.

However it does not seem to work even though we enter the origins we want to allow in WP admin and the "credentials": "inlcude" settings in ApolloClient. We've tried changing to run graphql queries with ApolloServer which resolves the issue, but that adds a lot of extra work and complexitiy for us in other ways that we would prefer to avoid. One of the wpgraphql mutations that fails due to cors is addToCart.

The console error is "... has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled." We tried to use the no-cors option but that gives us further errors and is not a secure solution. We also tried adding cors settings in the htaccess file in WP codebase, but that throws us more fetch errors.

Would kindly appreciate all the help and guidance we can get on this.

Hi , I dont understand how to install this plug in, it mentions to make sure WPGraphql is installed. But where do I get the plug in and where do I put it ?

try

mutation MyMutation($login: String!, $password: String!) { login(input: {clientMutationId: "", login: $login, password: $password}) { status } }

get

{ "errors": [ { "message": "Internal server error", "category": "internal", "locations": [ { "line": 2, "column": 3 } ], "path": [ "login" ] } ], "data": { "login": null } }

Installing this plugin release 2.0 cause fatal error when activated in Wordpress because of this comma :

In file : \wp-content\plugins\wp-graphql-cors-2.0\includes\admin\admin.php

The default behaviour of the registerUser mutation from wp-graphql includes setting the current user to the one that was just successfully registered, as seen here.

However, when using this in conjunction with wp-graphql-cors, we cannot set the response cookie because the default registerUser mutation doesn't set a secure cookie.

Here's an example of some response headers from a registerUser mutation:

The yellow warning message next to each set-cookie response header reads:

This Set-Cookie didn't specify a "SameSite" attribute and was default to "SameSite=Lax", and was blocked because it came from a cross-site response which was not the response to a top-level navigation. The Set-Cookie had to have been set with "SameSite=None" to enable cross-site usage.

Hoping to have a discussion on what a potential solution would be, such as:

1. Create a registerWithCookies mutation similar to loginWithCookies?
2. Implement something on the Wordpress End?
3. Something else?

Note: Also an edge case, but wp-graphql-woocommerce has the ability to register users using the checkout mutation as well. This presents the same issue as the registerUser mutation.

This will allow a user to add it's own custom fields into headers and that way prevent any cors issues with custom fields being sent along the request

EDIT: Reason behind this PR was that we have an apollo client that sends a custom parameter in headers when it reaches out to multiple services. In order to reduce amount of complexity on the client side we've thought it might benefit others to be able to add custom fields to headers within their projects.

Please do point out if any of the updates don't make sense or require some more info etc.

When running the loginWithCookies mutation, the server errors out and doesn't return an expected value. Looking at my Sentry report, it looks as though there's a missing variable.

Specifically, the mutateAndGetPayload is missing the $input variable in its callback function. As a result, the subsequent foreach is throwing an ErrorException for an invalid argument.

Sentry report: https://sentry.io/share/issue/bb2aaa28f07a4c48bc917ee51a9f05b8/

When I activate the login mutation and query like so:

mutation LoginUser($input: LoginInput!) {
  login(input: $input) {
    status
  }
}

I end up getting an internal server error:

{
  "error": {
    "errors": [
      {
        "debugMessage": "You cannot register duplicate fields on the same Type. The field 'login' already exists on the type 'rootMutation'. Make sure to give the field a unique name.",
        "message": "Internal server error",
        "category": "internal"
      }
    ]
  }
}

There already is a login mutation from WPGraphQL, so this is a bit confusing.

Also when I set credentials: 'include' it works if I set the allowed Domains to my localhost, but it doesn't set any Cookies.

I don't have much data for this as it's hard to debug, but when making a request to WP-GQL for data that would require a cookie, I get a server side error, but then the data does display client side.

CORS policy + GraphQL + apollo client

I'm getting an error of CORS policy when using preflight request. The authorization headers are only being returned in preflight, but not in the standard request, causing the error.

I've been testing and my conclusion is that:

1. I tried to add fetchOptions: { mode: 'no-cors' } to the Apollo client, but it doesn't allow the fetchPolicy to be no-cors when making a 'POST' request, so preflight will always be sent in this case. Unavoidable.
2. The WP GraphQL plugin checks if the headers have already been sent and since they have already been sent to preflight, they are not resent in the official request. When receiving the response from the second request, the headers are not present, causing an error.

It happens because of "headers_sent" function that makes the "prepare_headers" function to be ignored.
File: wp-graphql/src/Router.php::506

My temporary solution: I had to force the two headers to be sent in the standard request. Always.

function add_cors_http_header() {
	$http_origin = $_SERVER['HTTP_ORIGIN'];

	if ( $http_origin && ( $http_origin == "https://domain1.com" || $http_origin == "https://domain2.com" ) )
	{  
		header("Access-Control-Allow-Origin: $http_origin");
		header( 'Access-Control-Allow-Credentials: true' );
	}
}
add_action( 'graphql_process_http_request', 'add_cors_http_header' );

Hi, I am trying to block unauthorized domains so only specific domain will have the option to fetch data. I tried several configurations options but none of them got me the right result - but I still succeed to fetch data via Postman. I only want to block unauthorized domains without the need of user authentication.

What am I doing wrong? Thanks!