Theo's Typesafe Cult•2y ago

Set cookies to a different domain

Hi guys, I'm trying out Clark for a multi-domain SaaS project in Next I'm building and I need some help to better understand where I can fix some cookie problems 🥁. To make it simple this app is divided in three parts: - the root domain, example.com, with all the landing page and the marketing stuff - the account sub domain, account.example.com, where the auth is located (signin/signup pages, etc) and where clients can do some settings stuff - arbitrary amount of custom sub domain, [anything].example.com, where each user will be able to use their own version of the software In Next all of this is possible thanks to some tricks in the middleware.ts, I'll leave this here if someone is interested (https://vercel.com/guides/nextjs-multi-tenant-application). Back to the problem: Since the login happens in the account.example.com the *__session *cookie is set to the domain "account.example.com". Once the logged user goes to his own app, lets say "jack.example.com", the browser will not show the __session cookie, and so the authentication fails. After some online research I discovered that if the domain of the cookie is set to the root domain "example.com", all the subdomains will be able to access this cookie! And now I'm stuck here, trying to understand what/when/how to set the clerks cookies with the root domain. Any help is really appreciated, thank you ^^

1 Reply

deffemttgOP•2y ago

Here are some more info on my middleware.ts:

export default authMiddleware({
  beforeAuth(req) {
    // bla bla bla
    // a bunch of NextResponse.rewrite(...)
  },
  publicRoutes(req) {
    // everything on the root domain (marketing) is public
    // and the /signin and /signup pages in the "accounts" subdomain
  },
  afterAuth(auth, req) {
    const { protocol, domain } = parseUrl(req);

    // handle users who aren't authenticated
    // (redirect to https://account.example.com/signin)
    if (!auth.userId && !auth.isPublicRoute) {
      const signInUrl = new URL(`${protocol}account.${domain}/signin`);
      const redirectUrl = new URL(`${protocol}account.${domain}/`);
      signInUrl.searchParams.set("redirect_url", redirectUrl.toString());
      return NextResponse.redirect(signInUrl);
    }


//*********************************************//
    // THIS IS THE THING I TRIED, BUT DOESN'T WORK, ANY SUGGESTION?

    // get the clerk auth cookie and set it on the root domain
    if (auth.userId) {
      const clerkAuthCookie = req.cookies.get("__session")?.value || "";
      const response = NextResponse.next();
      response.cookies.set({
        name: "__session",
        value: clerkAuthCookie,
        domain: `${domain}`,
      });
      console.log(
        `setting __session cookie on the domain ${domain}`,
        clerkAuthCookie
      );
      return response;
    }
//*********************************************//
  },
});

export default authMiddleware({
  beforeAuth(req) {
    // bla bla bla
    // a bunch of NextResponse.rewrite(...)
  },
  publicRoutes(req) {
    // everything on the root domain (marketing) is public
    // and the /signin and /signup pages in the "accounts" subdomain
  },
  afterAuth(auth, req) {
    const { protocol, domain } = parseUrl(req);

    // handle users who aren't authenticated
    // (redirect to https://account.example.com/signin)
    if (!auth.userId && !auth.isPublicRoute) {
      const signInUrl = new URL(`${protocol}account.${domain}/signin`);
      const redirectUrl = new URL(`${protocol}account.${domain}/`);
      signInUrl.searchParams.set("redirect_url", redirectUrl.toString());
      return NextResponse.redirect(signInUrl);
    }


//*********************************************//
    // THIS IS THE THING I TRIED, BUT DOESN'T WORK, ANY SUGGESTION?

    // get the clerk auth cookie and set it on the root domain
    if (auth.userId) {
      const clerkAuthCookie = req.cookies.get("__session")?.value || "";
      const response = NextResponse.next();
      response.cookies.set({
        name: "__session",
        value: clerkAuthCookie,
        domain: `${domain}`,
      });
      console.log(
        `setting __session cookie on the domain ${domain}`,
        clerkAuthCookie
      );
      return response;
    }
//*********************************************//
  },
});

Gaming

Programming

Set cookies to a different domain