SvelteKit + Cognito + AWS Cloudfront + API Gateway

[gregn610]

Question 💬

I've used an AWS Adapter to deploy an AWS Cloudfront set up with an alternate domain name, route 53, certificates, etc. That all appears to be working fine on https://app-dev.ferrisium.com/. Cognito was deployed separately via Terraform and callback URLs have been configured for:

• http://localhost:5000/auth/callback/cognito
• https://app-dev.ferrisium.com/auth/callback/cognito
• [https://ipk1pc99v5.execute-api.eu-west-1.amazonaws.com/auth/callback/cognito](trying random things)

A link on a regular svelte page to /auth/signin/ brings up a page with a "Sign in with Cognito" button still hosted on https://app-dev.ferrisium.com/auth/signin. However the provided "Sign in with Cognito" button sends us off to the "raw" API Gateway url like https://xxxxxxx.execute-api.eu-west-1.amazonaws.com/auth/signin/cognito that then 302 redirects back to https://app-dev.ferrisium.com/auth/signin?csrf=true in an endless loop. The API Gateway is not configured with a custom domain name. Why is authentication broken when hosted in AWS?

When running dev mode on localhost, that button takes us off to the Cognito hosted UI, where sign-in works as expected and we're returned to the specified callbackUrl.

How to reproduce ☕️

// hooks.server.ts

import {SvelteKitAuth} from "@auth/sveltekit"
import Cognito from "@auth/core/providers/cognito"
import {redirect, type Handle} from "@sveltejs/kit"
import {sequence} from "@sveltejs/kit/hooks";
import {AUTH_SECRET, COGNITO_USER_POOL_ID, COGNITO_CLIENT_ID} from "$env/static/private"

async function authentication(...args) {
    return SvelteKitAuth({
        providers: [Cognito({
            clientId: COGNITO_CLIENT_ID,
            clientSecret: AUTH_SECRET,
            issuer: 'https://cognito-idp.eu-west-1.amazonaws.com/' + COGNITO_USER_POOL_ID + '',
        })],
        // secret: AUTH_SECRET,
        trustHost: true,
        debug: true,
        cookies: {
            pkceCodeVerifier: {
                name: "next-auth.pkce.code_verifier",
                options: {
                    httpOnly: true,
                    sameSite: "none",
                    path: "/",
                    secure: true,
                },
            },
        },
        callbacks: {
            async session({session, token}) {
                session.user && (session.user.sub = token.sub);
                session.access_token = token.access_token as string;
                session.id_token = token.id_token as string;
                return session;
            },
            async jwt({token, account}) {
                if (account) {
                    token.access_token = account.access_token;
                    token.id_token = account.id_token;
                }
                return token;
            }
        },
        session: {
            strategy: "jwt",
        }
    })(...args)
}

export const handle: Handle = sequence(
    authentication,
    // authorization
);

Contributing 🙌🏽

Yes, I am willing to help answer this question in a PR

[TorstenDittmann]

Running into the same issue using SvelteKit + CloudFlare LB.

PS: Was actually able to solve it by setting the AUTH_URL in production 👍🏻