Initiate Twitter signIn call inside the Popup Window

[deadcoder0904]

I want to initiate Sign In using a Popup Window like Typefully does.

I got it working using other library like twitter-api-v2 where I was handling the route myself but I'm not sure how to approach this one. I tried adding the signIn call inside the button where I open the window (see this file for details → https://github.com/deadcoder0904/twitter-api-v2-3-legged-login-using-next-connect/blob/next-auth/pages/index.tsx) but it's not working.

This is the working code in main branch → https://github.com/deadcoder0904/twitter-api-v2-3-legged-login-using-next-connect/

import { useRouter } from 'next/router'

export const Login = () => {
  const router = useRouter()

  const twitterLogin = async () => {
    const authWindow = window.open(
      'about:blank',
      '_blank',
      'toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=800,height=600,left=100,top=100'
    )

    if (!authWindow) {
      console.error(
        'Your browser is blocking popups. Allow popups log in with Twitter.'
      )
      return
    }

    const res = await fetch(`/api/twitter/generate-auth-link`)
    const data: { redirect: string } = await res.json()

    const authURL = data.redirect
    authWindow.location.href = authURL

    // listen for "window.opener.postMessage" sent from backend via <script>
    window.addEventListener('message', (event) => {
      if (event?.data?.username) {
        const username = event?.data?.username
        router.push(`/app?username=${username}`)
      }
    })
  }

  return (
    <>
      <button onClick={twitterLogin}>Login with Twitter</button>
    </>
  )
}

Reproducible demo on next-auth branch → https://github.com/deadcoder0904/twitter-api-v2-3-legged-login-using-next-connect/tree/next-auth