Simultaneous Sessions with Different Providers

[theGOTOguy]

I have two separate backends which my frontend needs to send requests to. However, they use different OAuth2 providers, one of which is not under my control. I need to have the user auth into each system separately and then maintain two separate sessions simultaneously so that I can marshal requests to each of the two backends with its respective session.

Is this feasible in next-auth? In my dream world, I'd have some syntax like signIn('backend1'), signOut('backend1'), useSession('backend1'), etc., to allow me to specify to next-auth which session to use.

[balazsorban44]

signIn is totally possible, check the docs for custom providers ;)

https://next-auth.js.org/getting-started/client#starts-google-oauth-sign-in-flow-when-clicked

signOut and useSession are app level though, not provider level. depending on if you want to use a DB or simple jwt sessions, check the docs again

https://next-auth.js.org/configuration/callbacks

https://next-auth.js.org/configuration/providers#using-a-custom-provider

id will be the thing you pass to signIn

[theGOTOguy]

Hi--

Thanks for the tip! I'm still unable to log into my two separate providers at the same time, and I'm hoping you can help me clarify what I'm missing. I configured them both as custom providers, e.g.:

{
      id: 'Provider1',
      name: 'Provider1',
      // ...
      profile: (profile) => {
        return {
          id: profile.sub,
          name: profile.name,
          email: profile.email,
          provider: 'Provider1',
        }
      },
    },
      id: 'Provider2',
      name: 'Provider2',
      // ...
      profile: (profile) => {
        return {
          id: profile.sub,
          name: profile.name,
          email: profile.email,
          provider: 'Provider2',
        }
      },
    },
}

Now, indeed, I am able to sign into a specific one with signIn('Provider1') or signIn('Provider2')

I think I'm failing to understand how to use a callback to maintain a session for both simultaneously, though. I tried this:

  callbacks: {
    async jwt(token, user, account, profile, isNewUser) {
      if (account?.provider) {
        token.provider = account.provider
      }
      return token
    },

    async session(session, token) {
      if (token.provider === "Provider1") {
        session.provider1AccessToken = token.access_token
      }

      if (token.provider === "Provider2") {
        session.provider2AccessToken = token.access_token
      }
      return session
    }
  },

What I'm seeing in practice, though, is that signIn('Provider1') clears the information about Provider2 from my session, and likewise signIn('Provider2') clears the information about Provider1 from my session. Thus, I am unable to maintain a session for both providers at the same time.

Can you clarify how I might use a custom callback to maintain a session for both providers at the same time?

[pardhav]

Hey, @theGOTOguy
Did you find any workaround? Were you able to main multiple sessions for a single user?

[balazsorban44]

With JWT sessions, I am afraid it is not possible, at least currently.
See:

next-auth/src/server/routes/callback.js

Lines 108 to 121 in eba79f4

	if (useJwtSession) {
	const defaultJwtPayload = {
	name: user.name,
	email: user.email,
	picture: user.image,
	sub: user.id?.toString(),
	}
	const jwtPayload = await callbacks.jwt(
	defaultJwtPayload,
	user,
	account,
	OAuthProfile,
	isNewUser
	)

Whenever you sign in with a new provider, the session is overridden. You would need to use a database to persist the session.

[theGOTOguy]

@pardhav We believe that the only way that multiple simultaneous sessions with next-auth shy of changing the library itself would be by wrapping different portions of the app with separate Provider tags and then using setState to cross-talk between them. This is far from an elegant or ideal solution, so in practice we abandoned the idea of multiple sessions and decided simply not to interface with the second system at all for now.

[gablabelle]

You would need to use a database to persist the session.

@balazsorban44 does that mean that there is a hook/method to retrieve the multiple different existing sessions and related access tokens (from the related accounts) we need from the DB using next-auth ?

Or we'd need to retrieve it from the DB ourselves?

[FraWolf]

I'm interested in it too

[nickdandakis]

We're in a similar scenario where we need to support two simultaneous sessions (one is considered "admin", the other is considered "impersonation"). The admin session is a refresh token grant, and the impersonation session is OAuth (+OIDC).

We're currently exploring serving NextAuth via two separate API paths, one under /api/auth/... and the other under /api/admin-auth/... but we're bumping into the issue of NEXTAUTH_URL being restricted to buildtime configuration. We already have our own wrappers for session state management (via react-query) so it seems like NEXTAUTH_URL is the only restriction here.

Not seeing any way of configuring NEXTAUTH_URL at runtime, or even a way to indicate to the client-side signIn method what the API route is for signing in. I saw that at some point NEXTAUTH_URL could be provided via runtime config at next.config.js but see that's no longer the case.

If anyone else has successfully rolled simultaneous sessions via NextAuth, would love to hear how.

[pataratanan]

Have u done that yet? I'm struggling with that at the moment. Is it possible to call 2 API in separate next Auth?

[theGOTOguy]

For posterity: We did not find a solution to this problem and ended up redesigning our backend systems to work around this missing functionality.

[nickdandakis]

An update here:

We found a solution that uses NextAuth v4's new 'advanced initialization' strategy (docs here), where we're essentially maintaining a copy of the second session in a cookie. We're still using the NextAuth jwt and session callbacks, but reading/writing to a cookie off of the passed-through req and res objects.

This is working well enough for us but obviously not ideal. I wouldn't recommend NextAuth takes this on as a first-class pattern since maintaining multiple sessions simultaneously is an anti-pattern. A low-impact update that would've made this simultaneous session management achievable without req and res work would be for NextAuth's jwt callback to also pass-through the session object.

[leog]

Would you mind sharing some code for it? Perhaps a public repo with it? Thanks!

[FrancisBoudreau]

@nickdandakis Would you mind sharing some code?
I'm stuck at same place.

[nickdandakis]

Here's a quick and dirty example:

import type { NextApiRequest, NextApiResponse } from "next"
import NextAuth from "next-auth"

export default async function auth(req: NextApiRequest, res: NextApiResponse) {
  // Do whatever you want here, before the request is passed down to `NextAuth`
  return await NextAuth(req, res, {
    providers: [...],
    callbacks: {
      async session() {
        // you can read/write cookies here on session callback
        // although you'll most likely read cookies here to pass 
        // down to your session object
        const { headers } = req || {};
        if (headers) {
          const splittedCookies = headers.cookie.split(';');
          splittedCookies.forEach(cookie => {
            const [name, value] = cookie.trim().split('=');
            // take cookies here, pass down to encode into session object
          });
        }
      },
      async jwt() {
        // you can also read/write cookies here on jwt callback
        // although most likely you'll be writing cookies here
        res.setHeader('set-cookie', ...);
      },
    },
    events: {
      async signOut() {
        // also helpful to read/write cookies here on signOut callback
        // e.g. to clear the cookie lifecycle
        res.setHeader('set-cookie', ...);
      },
    },
  })
}

This pattern has been working in production for almost a year now without much trouble but obviously dealing with a secondary session object with your own cookie management is a PITA

[gilesbradshaw]

This demonstrates using multiple sessions. I got rid of __NEXTAUTH, made SessionProvider pointable to each session and added a SessionsProvider which puts all the sessions into the context and a useSessions hook.

https://next-auth-nextjs-git-multi-sessions-demo-gilesbs-projects.vercel.app/