Internet Identity pop-up blocked on Safari

internet-identity
10

Thanks for the sample repo :+1:. I can reproduce the issue with it. After some debugging, I believe the problem is related to creating the AuthClient within the same function or click event that handles the login. If I instantiate the AuthClient on mount and perform only the login within the function, then the popup opens correctly in Safari.


function HomePage() {

  const [authClient, setAuthClient] = useState(undefined);

  useEffect(() => {
    (async () => {
      const client = await AuthClient.create({
        idleOptions: {
          idleTimeout: (1000 * 60 * 60) / 2 // set to half an hour
        }
      })
      setAuthClient(client);
    })();
  }, [])

  async function handleLogin() {
    // await AuthClient.create(...) <---- Doing this here too blocks the popup

    await authClient?.login();
  }
  return (
    <div className={styles.container}>
      <Head>
        <title>Internet Computer</title>
      </Head>
      <main className={styles.main}>
        <h3 className={styles.title}>
          Welcome to Next.js Internet Computer Starter Template!
        </h3>
        <button onClick={handleLogin}>Login</button>
        
      </main>
    </div>
  )
}

export default HomePage
4 Likes