Vercel log-in works but after signIn an error appears

[jonas8900]

Good Morning,

i have a problem with my vercel deployment. In my pullrequest, i implement a management for groups, so the user in the groups can't read messages or other things from other groups. You need an invite link to join the group or you can create a group. My first step after the signIn successed is the route to my page "validateafterlogin", this works well on my localhost:

<StyledLoginButton
          onClick={() => {
            signIn("google", {
              callbackUrl: "http://localhost:3000//validateafterlogin",
            });
          }}
        >
          Login
        </StyledLoginButton> 

the page will check if you already have an account in this app ,so if you dont have any data in the db with your user the page will create you an user and send it to the database, after that, the page will check if you have a group in your userdetails, if not, the page will route you to a screen where you can create or join a group, if you have a group, the page will route you to the dashboard of your activegroupid. Here is the page: export default function

 ValidateAfterLogin() {
  const [checkIfObjectFilled, setCheckIfObjectFilled] = useState(false);
  const { data: session } = useSession();

  const sessionTrue = session && true;
  const router = useRouter();
  const [finalUserObject, setFinalUserObject] = useState();

  //This function gets through the database and check if the user exist,
  //if not create one

  function getOrCreateUser() {
    if (session) {
      fetch("api/getsingleuserbymail", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(session.user),
      }).then((promisedUserData) => {
        promisedUserData.json().then((finalUserData) => {
          setFinalUserObject(finalUserData);
          if (finalUserData == undefined) {
            fetch("api/createorupdateuser", {
              method: "POST",
              headers: {
                "Content-Type": "application/json",
              },
              body: JSON.stringify(session.user),
            }).then(router.push("/nogroupscreen"));
          } else {
            setCheckIfObjectFilled(true);
          }
        });
      });
    }
  }
  //in this special case we dont want to re-render in every session dependency,
  //so we need to check if the singIn is already done so we can call the function once
  useEffect(() => {
    getOrCreateUser();
  }, [sessionTrue, checkIfObjectFilled]);

  useEffect(() => {
    if (checkIfObjectFilled === true) {
      if (finalUserObject.joinedGroupList.length > 0) {
        router.push("/");
      } else if (
        finalUserObject.joinedGroupList.length == 0 ||
        finalUserObject.joinedGroupList.length == undefined
      ) {
        router.push("/nogroupscreen");
      }
    }
  }, [sessionTrue, checkIfObjectFilled]);

  return (
    <>
      <h1>Du wirst weitergeleitet...</h1>
      <StyledLoadingError>
        <StyledLoadingErrorIcon icon={faSpinner} spin />
      </StyledLoadingError>
    </>
  );
} 

the problem with vercel looks like this:

here is the error in the network:

the whole pull request is here: jonas8900/Capstone-project#30

does anyone has an idea what i can do :(? I Thought after the login the nogroupscreen will appear, but the fetches after login in vercel is from the dashboard :/

[MerleMak]

The problem is the callBackURL in the StyledLogin Button. I should be:

<StyledLoginButton
          onClick={() => {
            signIn("google", {
              callbackUrl: "https://capstone-project-git-add-user-login-jonas8900.vercel.app/validateafterlogin",
            });
          }}
        >
          Login
          </StyledLoginButton> 

Extra tipp: You can change your domain on vercel so something like https://friends.vercel.app
(if that is not already taken :D)