Auth0-lock Safari not working

Help
,
1

So I have an Auth0 lock integration in my nextJS app.
Here is the code I am using.


type Props = {
  login: () => void;
  logout: () => void;
  user: Auth0UserProfile | undefined;
};

const nameRegex = /^[a-zA-Z]{2,}$/;

export const AuthContext = createContext<Props>({
  login: () => {},
  logout: () => {},
  user: undefined,
});

const AuthContextProvider = ({ children }: { children: ReactNode }) => {
  const [lock, setLock] = useState<Auth0LockStatic | undefined>(undefined);
  const [user, setUser] = useState<Auth0UserProfile | undefined>(undefined);
  const didInitialize = useRef(false);


  const checkSession = (lock: Auth0LockStatic) => {
    lock?.checkSession({}, (error, authResult) => {
      if (error) {
        setUser(undefined);
      }
      if (authResult) {
        lock.getUserInfo(authResult.accessToken, (_, profile) => {
          setUser(profile);
        });
      }
    });
  };

  useEffect(() => {
    if (didInitialize.current) {
      return;
    }

    didInitialize.current = true;
    const lock = new Auth0Lock(
      process.env.NEXT_PUBLIC_AUTH0_CLIENT_ID as string,
      process.env.NEXT_PUBLIC_AUTH0_DOMAIN as string,
      {
        auth: {
          redirect: true,
          sso: false,
          responseType: 'token id_token',
          redirectUrl: `${window.location.origin}/auth/callback`,
        },
        avatar: null,
        autofocus: true,
        autoclose: true,
        showTerms: true,
        mustAcceptTerms: true,
        loginAfterSignUp: true,
        additionalSignUpFields: [
          {
            type: 'checkbox',
            name: 'signedUpForNewsletter',
            placeholder: 'Sign me up for your monthly newsletter',
            prefill: 'false',
          },
          {
            type: 'text',
            name: 'firstName',
            placeholder: 'First Name',
            validator: (value: string) => {
              return {
                valid: nameRegex.test(value),
                hint: 'First Name must be at least 2 characters long and contain only letters',
              };
            },
          },
          {
            type: 'text',
            name: 'lastName',
            placeholder: 'Last Name',
            validator: (value: string) => {
              return {
                valid: nameRegex.test(value),
                hint: 'Last Name must be at least 2 characters long and contain only letters',
              };
            },
          },
        ],
        languageDictionary: {
          title: 'Please Login or Create Account',
          loginLabel: 'Login',
          forgotPasswordTitle: '', // if empty string, it defaults to the title property
          signUpLabel: 'Register',
          signUpTitle:
            'Please create a Social Thinking account. This will allow you to track all your Purchase Orders and Quotes.',
          forgotPasswordAction: 'Forgot password',
          forgotPasswordInstructions:
            'Enter your email address and click "Reset Password." We will email you instructions so you can access your account.)',
          signUpTerms: `<span style="color: black;">By signing up, you agree to our <a style="color: ${colors['clr-blue']}; font-weight: bold" href="${window.location.origin}/landingpages/privacy-policy" target="_blank">terms of service and privacy policy.</a></span>`,
        },
        theme: {
          logo: '/logo.png',
          primaryColor: colors['clr-blue'],
        },
      }
    );

    lock.on('signin submit', () => {
      LocalStorageService.setItem('redirectUrl', window.location.pathname + window.location.search);
    });

    lock.on('signup submit', () => {
      LocalStorageService.setItem('redirectUrl', window.location.pathname + window.location.search);
    });

    setLock(lock);
    checkSession(lock);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  const login = useCallback(() => {
    lock?.show();
  }, [lock]);

  const logout = useCallback(() => {
    setUser(undefined);
    LocalStorageService.setItem('redirectUrl', window.location.pathname + window.location.search);
    lock?.logout({
      returnTo: `${window.location.origin}/auth/callback`,
    });
  }, [lock]);

  const value = useMemo(
    () => ({
      user,
      login,
      logout,
    }),
    [user, login, logout]
  );

  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
};

export default AuthContextProvider;

export const useAuthContext = () => useContext(AuthContext);

I was following the instructions from this article Configure Cross-Origin Resource Sharing, but when I add the code snippet

var auth0Client = new auth0.WebAuth({
      clientID: '{yourClientId}',
      domain: '{yourDomain}'
    });
    auth0Client.crossOriginVerification();

I get an error saying
“failed to execute ‘postmessage’ on ‘window’: invalid target origin ‘undefined’ in a call to ‘postmessage’.”

When is that code supposed to be executed?
How exactly should my configuration look like in the auth0 application settings?