Hello, I am having trouble setting up the Google Social Login in my Sveltekit project. I apologise for the long message. (Sveltekit and Kratos Docker Container) I am able to get to the "Sign in with Google" screen where I pick my Google account to use. Once I choose my account, I get this 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!

Attempt 1:

<form action={`<http://localhost:4433/self-service/login?flow=${data.flowData.flowId}>`} method="POST">
    <input type="submit" name="provider" value="google" />
    <input type="hidden" name="upstream_parameters.prompt" value="select_account" />
</form>

• This alone fails with the same error above. Attempt 2:

<form on:submit={handleGoogleLogin}>
            <input type="hidden" name="provider" value="google" />
            <input type="hidden" name="upstream_parameters.prompt" value="select_account" />
            <button type="submit">Sign in with Google</button>
        </form>

async function handleGoogleLogin(event) {
        try {
            event.preventDefault();

            const formData = new FormData();

            formData.append('provider', 'google');
            formData.append('upstream_parameters.prompt', 'select_account');

            const response = await fetch(
                `<http://localhost:4433/self-service/login?flow=${data.flowData.flowId}>`,
                {
                    method: 'POST',
                    body: formData,
                    credentials: 'include'
                }
            );
        } catch (error) {
            console.log(error);
        }
    }

• This does not work because my Sveltekit frontend has this cross origin request blocked. •

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at <http://localhost:4433/self-service/login?flow=579a5ad8-093b-44e3-ae69-bdb0368a6d69>. (Reason: CORS request did not succeed). Status code: (null).

Attempt 3: I have my Sveltekit frontend call my Svelkit backend endpoint which makes a fetch call to

/self-service/login

to deal with the CORS issue.

const response = await fetch(`/api/auth/${action}`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                ...data.formFields,
                csrf_token: data.csrfToken,
                action: data.actionUrl,
                method: 'password',
                flowData: data.flowData,
            })
        });

export async function POST(request) {
    try {
        const data = await request.request.json();
        const formData = new URLSearchParams();
        formData.append('provider', 'google');

        const response = await fetch(`<http://localhost:4433/self-service/login?flow=${data.flowData.flowId}>`, {
            method: 'POST',
            credentials: 'include',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
            },
            body: formData.toString(),
            redirect: 'manual' // Do not follow redirects automatically
        });

        // If the response is a redirect
        if (response.status >= 300 && response.status < 400) {
            // Get the redirect URL
            const redirectUrl = response.headers.get("location");
            // Send the redirect URL back to the frontend
            return new Response(JSON.stringify({ redirectUrl }), {
                status: 200,
                headers: {
                    'Content-Type': 'application/json',
                },
            });
        } else {
            const responseData = await response.json();
            return new Response(JSON.stringify(responseData), {
                status: 200,
                headers: {
                    'Content-Type': 'application/json',
                },
            });
        }

    } catch (error) {
        return new Response(`Internal Server Error: ${(error)}`, { status: 500 });
    }
}

• When I receive this at the Sveltekit frontend, I am able to redirect the frontend to the "Sign in with Google" screen but once again I am experiencing 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!

Any ideas what I am doing wrong and how I can get my session passed through properly? What specific cookies am I missing?

Hello Edmond, you need to include both the CSRF cookie as well as the Ory Session cookie in the request. So in your fetch request above you can use

const response = await fetch(url, {
      credentials: "include",
      mode: "cors",
    });

I’ve run into this error when using the Ory Tunnel. It doesn’t seem to support social sign-in.

Hm I know it doesnt support WebAuthN https://www.ory.sh/docs/getting-started/local-development#limitations, but I thought we added oidc support at some point, woudl have to test it out

Thank you for your responses.

you need to include both the CSRF cookie as well as the Ory Session cookie in the request.

@magnificent-energy-493 Do I include this as a cookie or do I include these in the body like I would for

/self-service/registration

calls? Anyways, I do both and I still get the same error:

const data = {
  "identifier": "",
  "password": "",
  "csrf_token": "d8Kss+q8KNsTohzQPLFwV+MWPDIjRYrV9Mi/qg7YXciYcs+R+eicRokAyHqBm9VtubSZRnKQ1ihRe2/WeMU+xg==",
  "action": "<http://127.0.0.1:4433/self-service/login?flow=90ad1312-ce11-4f57-b047-16402328c770>",
  "method": "password",
  "csrf_cookie": "csrf_token_806060ca5bf70dff3caa0e5c860002aade9d470a5a4dce73bcfa7ba10778f481=77BjIhNUtJ2aotSqvSqlOlqipXRR1Vz9pbPQfHYdYw4="
}

const cookies = request.request.headers.get('Cookie');
const response = await fetch(`<http://localhost:4433/self-service/login?flow=${data.flowData.flowId}&provider=google>`, {
  method: 'POST',
  credentials: 'include',
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded',
    'Cookie': cookies,
  },
  body: JSON.stringify(data),
  redirect: 'manual',
});

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!

error?id=43dad002-ee7b-42d7-a229-78cc48bb68ee

You are hosting Kratos yourself at the moment @incalculable-shoe-63378? A bit hard to say what the issue is without taking a closer look - cookie/CSRF looks fine Have a look at the CSRF troubleshooting docs, maybe there is a mismatch in the domain? https://www.ory.sh/docs/kratos/debug/csrf

Hello @magnificent-energy-493, I understand. Thank you for your responses. I have created a ticket in

ory/kratos

and provided a trimmed down version of my code. I am currently hosting it myself at the moment. Still in the early stages of exploring. Please take a look over it when you have time to see if you can see what I am doing incorrectly. Ticket: https://github.com/ory/kratos/issues/3384 Thank you for your time! I look forward to hearing from you!