Sign in page as a modal window

[nikitalk]

Iain, hello! Is it possible to create a custom sign-in page as a modal window, not in separate page? Or it is impossible?

[iaincollins]

Great question! So, the current sign in page UI was built with that in mind, I also intend to improve the appearance of that page.

You should be able to embed it as an iFrame right now; although I wonder what the UX is like on that for various providers right now - probably not great and it would be better if there was the option to force them to open in a popup window, which then closes on callback.

I not included to make that the default behaviour for everyone; that can be annoying behaviour on mobile so I'd make it an option.

I'm not sure what will make the cut for launch but I'm thinking signin() client might support that (e.g. signin({modal: true})?). It might be worth commenting and tracking that in #177 if that seems like an appropriate feature on that method.

Alternatively, am thinking if #177 helps make creating custom sign in pages easier then it's possible that will be moot, and could just show how to do it in the example project?

[iaincollins]

As much as I like this feature request, I think we probably not going to do this for now.

I'd actually really like to do it, but I think there are other things we probably need to focus on in the short term; as it's a simple sounding feature but cross browser / cross device support might complicate thing for us and overhead of supporting it as a built in feature, might be time better spent on other things.

Closing this for now, with a recommendation for folks to use the custom sign in methods and pages that are features in v2 but it would be nice to revisit this in future.

[paul-vd]

it would be nice to see something similar to magic.link but with the power and flexibility of next-auth, I notice they use an iframe to handle "same window" or "modal" auth.

[lucasconstantino]

I found quite an easy way of doing so using a little help (though can be easily done without it) from react-new-window:

src/pages/index.js:

import { useState } from 'react'
import NewWindow from 'react-new-window'
import { signOut, useSession } from 'next-auth/client'

const HomePage = () => {
  const [popup, setPopUp] = useState(false)
  const [session, loading] = useSession()

  return (
    <div>
      {loading ? (
        <p>loading session...</p>
      ) : session ? (
        <button onClick={() => signOut()}>Logout</button>
      ) : (
        <button onClick={() => setPopUp(true)}>Login</button>
      )}

      {popup && !session ? (
        <NewWindow url="/sign-in" onUnload={() => setPopUp(false)} />
      ) : null}
    </div>
  )
}

export default HomePage

src/pages/sign-in.js:

import { useEffect } from 'react'
import { signIn, useSession } from 'next-auth/client'

const SignInPage = () => {
  const [session, loading] = useSession()

  useEffect(() => {
    if (!loading && !session) void signIn('google')
    if (!loading && session) window.close()
  }, [session, loading])

  return null
}

export default SignInPage

Similar logic can fix #360 too.

[alexandrepaiva-dev]

Hey guys, @lucasconstantino your code works well but I'm not able to close the new window using window.close(). It doesn't close, on Chrome at least.

How can I fix it? I've tried some different ways but without success.

Thanks!

[arye321]

Since this is the top google result ill post a working example here:

https://github.com/arye321/nextauth-google-popup-login

[hamedor]

https://github.com/vercel/next.js/tree/canary/examples/with-route-as-modal

There are example, how you can achieve this, but it looks like a hack, because when you open 'modal window', you open another page and this page looks like a modal window:)

[Ali-hd]

The problem with the answers provided here is that they open a new browser window instead of having an actual modal component in the same window with an overlay.

I get they are good for Oauth solutions but not for custom credentials

[AurelianSpodarec]

Any updates for the functionality? :(