Hi all, Been lurking for a bit trying to find an answer to an issue I’m having with CORS. We’re using Ory-Network, simple Password Login. Basically following: https://www.ory.sh/docs/getting-started/integrate-auth/nextjs to the letter. Works perfectly well for local development using the tunnel etc. The second I try to migrate to a custom domain, I get CORS issues left right and center. See attached image. I’ve got some slight code modifications where I’m wrapped everything in a Login Button control:

import { useState, useEffect } from "react";
import { useRouter } from 'next/router';
import { Button } from "@mui/material";
import style from './LoginButton.module.css';
import ory from './Ory'


interface LoginButtonProps {
  onSignedIn?: (signedIn: boolean) => void;
}

function LoginButton(props: LoginButtonProps) {
  const router = useRouter();
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  const [logoutUrl, setLogoutUrl] = useState<string>();


  function handleLogin() {
    
    ory.createBrowserLoginFlow().then((response) => {
      router.push(`${process.env.NEXT_PUBLIC_ORY_SDK_URL}/ui/login`);
    })
  }

  useEffect(() => {
    ory.toSession()
      .then((response) => {
        setIsLoggedIn(true);
        ory.createBrowserLogoutFlow().then(({ data }) => {
          setLogoutUrl(data.logout_url);
        });
      })
      .catch(() => {
        setIsLoggedIn(false);
      })
      .finally(() => {
        if (props.onSignedIn) {
          props.onSignedIn(isLoggedIn);
        }
      });
  }, [isLoggedIn, props]);

  if (!isLoggedIn)
    return <Button onClick={handleLogin} className={style.loginbuttonstyle}>Log In</Button>
  else
    return <></>

}

export default LoginButton;

with Ory.tsx containing:

import { Configuration, FrontendApi } from "@ory/client";

const ory = new FrontendApi(
    new Configuration({
        basePath: process.env.NEXT_PUBLIC_ORY_SDK_URL,
        baseOptions: {
            withCredentials: true,
            
        },
    })
);

export default ory;

Ory is setup with the customer domain details in the second attached pic Final pic shows DNS settings inside of Vercel. Desperate to get this solved and would appreciate any help at all.

The CORS requests that are failing are targetting lff.website, the cname to ory is the subdomain, ie auth.lff.website. Update your front-end to target auth.lff.website and you should be golden 👍

Thanks @curved-fountain-46946 Have updated DNS to look like this: Hopefully that works.

Nono, I mean your ory client, it tries to talk to https://lff.website/sessions/whoami, however it should be talking to https://auth.lff.website/sessions/whoami - that's the value you need to update 🙂

ahhhhhhhh

No worries man! Btw, what tool did you use to blur your screenshot? Very practical 😄

So changed DNS back. Still same issue

Now the error message changed though, it looks like the request is failing in its entirety. Could you look in the network tab of the inspector in your browser when you make the request, and see why it fails?

Good catch. Might be a DNS propogation problem. Bunch of NS Lookup failures.

Yeah, that's DNS for ya! Well, at least now you know where to troubleshoot 😄

Might be a good excuse to go to bed and let propagation happen over night 😝 Thanks for all your help thus far - very much appreciated.

No worries, mate! Sleep tight!

typo, maybe? https://auth.lff.website/sessions/whoami vs https://auth.1ff.website/sessions/whoami

Oh, that's a 1? I had no idea - I'm sure JT is on top of the domain name 😎