Google OIDC not containing the necessary cookie to resume session when using HTTP API

[eddingston]

Preflight checklist

• I could not find a solution in the existing issues, docs, nor discussions.
• I agree to follow this project's Code of Conduct.
• I have read and am following this repository's Contribution Guidelines.
• This issue affects my Ory Network project.
• I have joined the Ory Community Slack.
• I am signed up to the Ory Security Patch Newsletter.

Describe the bug

I am trying to set up Google social login in my Sveltekit Application using the Ory Kratos HTTP API.

So far, I have been successful with setting up Registration, Login, and Logout flows.

But now I am having troubles with the Google OIDC.

I am able to get to the Google sign in page but when I choose my account, I get the following error:

An error occurred with the following message: The browser does not contain the necessary cookie to resume the session. This is a security violation and was blocked. Please clear your browser's cookies and cache and try again!

It is unclear to me what I am missing. Vincent(ORY) has suggested that I need to include the CSRF cookie and the Ory Session cookie. In the other flows (Registration, Login, Logout), I passed the data in the Set-Cookie and the body of the HTTP request as 'Content-Type': 'application/json', but that does not seem to work for this situation.

I have a trimmed down version of the issue posted here:

• https://github.com/eddingston/ory-kratos-google-issue

The flow starts at https://github.com/eddingston/ory-kratos-google-issue/blob/master/src/routes/%2Bpage.svelte.

• This page is preloaded with the initial login flow data by going through the following path:
  • https://github.com/eddingston/ory-kratos-google-issue/blob/master/src/routes/%2Bpage.ts - (SSR that loads the data after retrieving it from below)
  • https://github.com/eddingston/ory-kratos-google-issue/blob/master/src/lib/auth/frontend/auth.ts - (Frontend HTTP request to the backend to workaround CORS issues with Ory Kratos Server)
  • https://github.com/eddingston/ory-kratos-google-issue/blob/master/src/routes/api/auth/login/%2Bserver.ts - (Backend handler for the HTTP request above which initializes the login flow and retrieves the form details through helper functions that make HTTP requests to the Ory Kratos Server)
  • https://github.com/eddingston/ory-kratos-google-issue/blob/master/src/lib/auth/backend/auth.ts (Helper functions for the handler above)

The above is what retrieves the CSRF cookie. I don't think a session is active at this point because we have no logged in with any users.

Finally, at https://github.com/eddingston/ory-kratos-google-issue/blob/master/src/routes/%2Bpage.svelte, if we click the 'Sign in with Google' button, it will run the handler above in the same file. This will make a call to https://github.com/eddingston/ory-kratos-google-issue/blob/master/src/routes/api/auth/google/%2Bserver.ts, which returns a redirection url.

The frontend should now be redirected to the Google sign in page. If we pick an account it will show the error.

• An error occurred with the following message: The browser does not contain the necessary cookie to resume the session. This is a security violation and was blocked. Please clear your browser's cookies and cache and try again!

Thank you for your time! I look forward to hearing from the Ory team!

Reproducing the bug

EDIT: At the time of editing this, it is required to add 127.0.0.1 edd-test.com to /etc/hosts for the app to work.

1. git clone [email protected]:eddingston/ory-kratos-google-issue.git
2. cd ory-kratos-google-issue
3. Open up the kratos.yml and make sure that a valid Google client_id and client_secret has been set.
4. cd kratos && docker-compose up -d
5. cd .. && npm install && npm run dev
6. Go to http://localhost:5173/ http://edd-test.com:5173
7. Click the 'Sign in with Google' button
8. You should have been redirected to the Google sign in page. Please login/select an account.
9. You should now see the error.

Relevant log output

An error occurred with the following message: The browser does not contain the necessary cookie to resume the session. This is a security violation and was blocked. Please clear your browser's cookies and cache and try again!

Relevant configuration

Ory Kratos Server Configs:
https://github.com/eddingston/ory-kratos-google-issue/tree/master/kratos

Version

oryd/kratos:v0.13.0

On which operating system are you observing this issue?

Linux

In which environment are you deploying?

Docker Compose

Additional Context

No response

[mooijtech]

References #3074

[mooijtech]

Please make sure to use localhost since for cookies this is not the same as 127.0.0.1.
Cookies will not work on localhost, you will have to map a domain (/etc/hosts on Linux).

If the message is saying Token is expired make sure your system clock is up-to-date.

[eddingston]

Thanks @mooijtech for your response.

Are you referring to my kratos.yml? That is the only place in the example where I have 127.0.0.1. I changed all of these to localhost and it still produced the same error.

• An error occurred with the following message: The browser does not contain the necessary cookie to resume the session. This is a security violation and was blocked. Please clear your browser's cookies and cache and try again!

I also was able to get the Registration, Login, and Logout flow working with this localhost and 127.0.0.1 combination.

I appreciate your input and I have updated all 127.0.0.1 to localhost. However, I believe the issue may be related to the redirection to the Google sign in page due to the changing of domains. I no longer see the cookie in my browser storage. I think I may be losing the cookie at this point. Or perhaps my flow is not passing the CSRF cookie correctly.

• Could @vinckr or someone experienced please take a look at https://github.com/eddingston/ory-kratos-google-issue/blob/master/src/routes/api/auth/google/%2Bserver.ts to see if I am passing the required parameters properly? I couldn't find documentation on how to use the /self-service/login with a provider (https://www.ory.sh/docs/kratos/reference/api#tag/frontend/operation/createBrowserLoginFlow) or how to pass parameters to it properly.
  • I know we need the flow id. Currently I am using the flow id that I originally retrieved self-service/login/browser. Is this the right one to use or do I need to initiate another flow specifically for OIDC?
  • I assume we need to send a CSRF cookie but I am not sure on how to properly pass this through.

Thank you all for your time.

[mooijtech]

localhost does not allow cookies, can you try map to a domain via /etc/hosts on Linux?

[eddingston]

Thanks for your response @mooijtech. That slipped my mind earlier, however I tried it now and it seems to fail.

The issue now is due to Google's OAuth 2.0 policy requirements. Mapping 127.0.0.1 to test.local fails because:

• Invalid Redirect: must end with a public top-level domain (such as .com or .org).
• Invalid Redirect: must use a domain that is a valid [top private domain ](https://github.com/google/guava/wiki/InternetDomainNameExplained#public-suffixes-and-private-domains).

To quickly hack around this I tried mapping 127.0.0.1 to edd-test.com. Google was willing to accept this redirect URL (http://edd-test.com:4433/self-service/methods/oidc/callback/google). But in the end, I still got the error: An error occurred with the following message: The browser does not contain the necessary cookie to resume the session. This is a security violation and was blocked. Please clear your browser's cookies and cache and try again!.

Do you think that this experiment is enough to conclude that the issue is not with the localhost domain or should I deploy this properly to a public address before I conclude this?

Thank you for your time.

[aeneasr]

Hi @eddingston - you ticked "This issue affects my Ory Network project." - can you please share the URL with us so we can reproduce?

[eddingston]

Hello @aeneasr, I assumed that "This issue affects my Ory Network project." meant "This issue affects my project which uses an Ory product." since it the hyperlink just brought me to the Ory homepage.

The project has not been deployed to a public URL. However, the steps to reproduce are listed in the ticket, which requires running the Sveltekit app locally.

Would it be easier for you to investigate if I were to get this deployed to a public URL? I can try to get this deployed if this is the case.

Thank you for your time!

[mooijtech]

Consider running Caddy (or NGINX) so you have HTTPS locally, possibly cookies are being rejected on HTTP.
Caddyfile:

auth.example.com:443 {
        reverse_proxy localhost:4433
        tls internal
}

auth-admin.example.com:443 {
        reverse_proxy localhost:4434
        tls internal
}

example.com:443 {
        reverse_proxy localhost:3000
        tls internal
}

Edit: Note that if using NodeJS (I'm using NextJS) there is an environment variable: NODE_TLS_REJECT_UNAUTHORIZED=0

[tomcastro]

@eddingston I am getting the same issue all of a sudden on a NextJS project with Ory Network (so no self-hosted in my case). It happens on both Apple and Google Oauth flows.

On the Ory Network welcome page, I can login successfully, but I cannot do this on a NextJS website either by using localhost, 127.0.0.1 or a custom domain as @mooijtech pointed out.

@aeneasr I set up an Ory Network project that can reproduce this with Google sign in. It works when using username and password, but not with Google. Again, I'm using the base code in this example

[mooijtech]

@tomcastro Can you try with Caddy for HTTPS?

[tomcastro]

@mooijtech just tried with Caddy and correctly have an HTTPS domain, but I get the same error when logging in through any OIDC provider.

[aeneasr]

Hello all, I am closing this issue because it is related to an issue in setting up Ory Kratos on localhost with Caddy and other aspects. Thus, it's not a bug in Ory Kratos itself and should not be on the bug tracker. We have some documentation on cookie issues that you may want to check:

• https://www.ory.sh/docs/troubleshooting/csrf
• https://www.ory.sh/docs/kratos/debug/csrf

ps: This feature works fine for hundreds of customers, in tests, in Ory Kratos, and in Ory Network :)

[viiicky]

@eddingston I am getting the same issue all of a sudden on a NextJS project with Ory Network (so no self-hosted in my case). It happens on both Apple and Google Oauth flows.

On the Ory Network welcome page, I can login successfully, but I cannot do this on a NextJS website either by using localhost, 127.0.0.1 or a custom domain as @mooijtech pointed out.

@aeneasr I set up an Ory Network [project](https://modest-zhukovsky-l9yv1b7haw.projects.oryapis.com) that can reproduce this with Google sign in. It works when using username and password, but not with Google. Again, I'm using the base code in this [example](https://github.com/ory/docs/tree/master/code-examples/protect-page-login/nextjs)

did you get this working @tomcastro I am facing the exact same issue.

[viiicky]

@eddingston I am getting the same issue all of a sudden on a NextJS project with Ory Network (so no self-hosted in my case). It happens on both Apple and Google Oauth flows.
On the Ory Network welcome page, I can login successfully, but I cannot do this on a NextJS website either by using localhost, 127.0.0.1 or a custom domain as @mooijtech pointed out.

@aeneasr I set up an Ory Network project that can reproduce this with Google sign in. It works when using username and password, but not with Google. Again, I'm using the base code in this example

did you get this working @tomcastro I am facing the exact same issue.

okay, I was finally able to fix it - okay, I was able to fix it. I had to set first_name and last_name fields in my Identity Schema in order for the data returned from Google to be mapped in correctly because the default data mapping jsonnet for the Google authentication had these fields in the Ory console.