Multiple independent sessions

[gilesbradshaw]

Goals

1. Allow configuration of multiple logins so users can link accounts together.

Non-Goals

No response

Background

I want to be able to link multiple sign ins together so I can for example login into facebook and google at the same time so my app can post to a facebook group when I make an event in my calendar.

Proposal

I've started implementing this here https://github.com/gilesbradshaw/next-auth/tree/multi-sessions

This vercel deployment https://next-auth-nextjs-git-multi-sessions-demo-gilesbs-projects.vercel.app/ demonstrates two sessions. I removed the server actions because of this problem #10704 (but not related it exists anyway).

I'm just showing the credentials log in but it works with others - just not configured.

The main change to the library is getting rid of the global __NEXTAUTH from react which meant the react components could only display one session.

Session provider can now select the session to provide:

<SessionProvider basePath="/auth">
          <Client />
        </SessionProvider>
        <SessionProvider basePath="/auth-2">
          <Client />
        </SessionProvider>

useSession now returns signIn and Sign Out methods for the session

const { data: session, signIn, signOut, update, status } = useSession()

alternatively use SessionsProvider and it will provide all the sessions:

const session = await auth()
const session2 = await auth2()
 ....

<SessionsProvider
        sessions={[
          { name: "auth", basePath: "/auth", session },
          { name: "auth-2", basePath: "/auth-2", session: session2 },
        ]}
      >
....
</SessionsProvider>  

const sessions = useSessions()
  

{
        sessions.map(
          ({
            name,
            signOut,
            signIn,
            update,
            data,
            status
          }) => (
            <div key={name}>
              <h2>{name}: {status}</h2>
              {data && <pre>{JSON.stringify(data, null, 2)}</pre>}
              {data && <button onClick={async () => {
                  await update({ user: { name: "updated from multi session" } })
                  router.refresh()
                }}>Update: {name}</button>}
              {data && <button onClick={() => signOut({})}>Sign out: {name}</button>}
              {!data && <>
                <button onClick={() => signIn({}, "facebook")}>Sign in facebook: {name}</button>
                <button onClick={() => signIn({ password: "password" }, "credentials")}>
                  Sign in Credentials: {name}
                </button>
              </>  
              }
            </div>
          )
        )
      }

some discussions:

https://www.reddit.com/r/nextjs/comments/wlyj7m/nextauth_login_to_multiple_providers_at_the_same/
see #1728
https://community.auth0.com/t/account-linking-with-next-auth-next-js/103495

[balazsorban44]

Thanks for opening this based on #10696 (comment)

This is already possible. You need to define a database/adapter, in which case accounts are automatically linked and an Account is created for each provider.

This is what it looks like: https://authjs.dev/getting-started/database#models

After that, it's just a matter of retrieving the right access token for the right API request from the database.

Note that linking accounts using a JWT strategy is somewhat non-practical, as logging out would destroy the session and the link between accounts anyway.

[gilesbradshaw]

K but from that schema it looks like there is one user with an email and then automatic linking presumably based on the Facebook/google/linked in email. I can’t see how you could for example link multiple facebook profiles together with different emails.