Impersonate users (Credentials/Google)

[jonasgroendahl]

Hi all,

I'm thinking about implementation an impersonation feature where an admin can login as other users. In my app I'm allowing to login with Google and Credentials(username and password).

How to go about implementing such a feature with next-auth? Like for example it wouldn't be possible for an admin to login with someone's else Google account but perhaps there's a way to mutate the session with next-auth? I haven't been able to find it searching the docs.

Anyone with experience implementing this type of functionality?

[balazsorban44]

I think you are talking about Role-Based Access Control. There are many ways going about that, the easiest is if you add a role property on sign-up/sign-in to users.

[ian]

Any update on how to do this? Links don't provide much aside from overview.

Ideally there would be a way to just tap into the auth system server side with a signIn(user) and that'll replace the current session with the associated user. Server side only of course.

[ian]

@balazsorban44 Should we move the impersonation feature request to a different discussion? All other requests seem to point here but this ticket doesn't actually talk about impersonation, it talks about role assignments upon signin/register, which is very different.

Unless I'm mistaken, the original ticket was asking for implementation details on impersonating a user, not role assignment. For comparison, you can do this in:

• clerk.dev https://clerk.com/docs/authentication/user-impersonation
• blitzjs https://blitzjs.com/docs/impersonation

[Untel]

Well, if you use a DB adapter you can do (but will not trigger session, signin... callbacks as the user would)

prisma.session.updateMany({
     where: { userId: ctx.session.user.id }, // current user -> you
     data: { userId: userIdToImpersonate }, // user you want to control
 });

[mistersingh179]

fyi - this will update all sessions of current user to the new user. ideally we may want to update only that one session. this way in different browsers we can still have the original user as-is

[Untel]

Yes but sadly ctx.session.id does not exist (in the typescript declaration)

[zocoi]

Well, if you use a DB adapter you can do (but will not trigger session, signin... callbacks as the user would)

prisma.session.updateMany({
     where: { userId: ctx.session.user.id }, // current user -> you
     data: { userId: userIdToImpersonate }, // user you want to control
 });

any idea on how to do it with JWT token session which is the default session store?

[eznix86]

Since a user is represented by

{
  user: {
    name: string
    email: string
    image: string
  },
  expires: Date // This is the expiry of the session, not any of the tokens within the session
}

Maybe we can have an extra field like: impersonator: true and other fields also.

then we can trigger an update see to update the session, what do you think ?

[Coderamrin]

I implemented it with the Credentials provider.
you can have multiple credentials provider with different ids
https://next-auth.js.org/configuration/providers/credentials

CredentialsProvider({
			name: "impersonate",
			id: "impersonate",
			credentials: {
				adminEmail: {
					label: "Admin Email",
					type: "text",
					placeholder: "[email protected]",
				},
				userEmail: {
					label: "User Email",
					type: "text",
					placeholder: "[email protected]",
				},
			},

			async authorize(credentials) {
				if (!credentials?.adminEmail || !credentials?.userEmail) {
					throw new Error("User email or Admin email is missing");
				}

				const admin = await prisma.user.findUnique({
					where: {
						email: credentials.adminEmail.toLocaleLowerCase(),
					},
				});

				const user = await prisma.user.findUnique({
					where: {
						email: credentials.userEmail.toLocaleLowerCase(),
					},
				});

				if (!admin || admin.role !== "ADMIN") {
					throw new Error("Access denied");
				}

				// if user was not found
				if (!user) {
					throw new Error("No user found");
				}
				return user;
			},
		}),

call the signIn() function with the credentials id

signIn("impersonate", {
			adminEmail: session?.user?.email, //the admin email
			userEmail: user?.email, //the user you want to impersonate
		}).then((callback) => {
			if (callback?.error) {
				console.log(callback?.error);
				toast.error(callback.error);
			}

			if (callback?.ok && !callback?.error) {
				toast.success("Logged in successfully");
				router.refresh();
			}
		});

[lswartsenburg]

Yessir! This is not a safe solution

[mistersingh179]

inside the action, we can check for which user is logged in and making that call. perhaps you only allow certain users the ability to impersonate.

[yagudaev]

A simple way to implement this feature is to use the auth token given to you in a passwordless login/magic link -- the token typically emailed to the user.

You can either send it to yourself as the admin for a particular user or show the link in your ui and click on it to be logged in as that user.

I've ended up doing something more complicated, with modifying the session. Only realized this after my friend told me about how he did it.

[ChrisB1123]

Just to expand on @yagudaev's suggestion because I got lost on a couple of different versions of the docs

I followed this to get the magic link adapter set up. I was on next-auth v5.0.0-beta.4, and needed to upgrade to 5.0.0-beta.22 to have the correct providers available.
https://authjs.dev/getting-started/authentication/email

Then you customise how the email is sent using these steps
https://authjs.dev/getting-started/providers/resend#customization

And to redirect the magic link to the user who's currently logged in I just added

  const session = await auth()
  const user = session?.user

at the top of sendVerificationRequest().

And then finally edit the email api call so you have

    body: JSON.stringify({
      from: provider.from,
      to: user.email,                     <<< Edit this line
      subject: `Sign in to ${host}`,
      html: html({ url, host }),
      text: text({ url, host }),
    }),

You also probably want to add a role to the user and check they're an admin before actually sending the email though

[Geczy]

here's how i had to do it with plain next auth, to be able to securely get the current logged in user's ID. i'm going to update the prisma query to confirm this role can impersonate

const extractCookieValue = (cookieHeader: string | string[], name: string) => {
  const cookieStringFull = Array.isArray(cookieHeader)
    ? cookieHeader.find((header) => header.includes(name))
    : cookieHeader
  return name + cookieStringFull?.split(name)[1].split(';')[0]
}


export const authOptions: NextAuthOptions = {
  adapter: PrismaAdapter(prisma),
  session: {
    strategy: 'jwt',
  },
  pages: {
    signIn: '/login',
  },
  providers: [
    CredentialsProvider({
      name: 'impersonate',
      id: 'impersonate',
      credentials: {
        channelToImpersonate: {
          label: 'Channel ID',
          type: 'text',
          placeholder: '1234',
        },
      },

      async authorize(credentials, req) {
        if (
          !credentials?.channelToImpersonate ||
          !Number.parseInt(credentials.channelToImpersonate)
        ) {
          throw new Error('No channel ID provided')
        }

        const headerCookies = req.headers?.cookie
        let currentLoggedInUserId: string | undefined

        try {
          const secureCookie =
            process.env.NEXTAUTH_URL?.startsWith('https://') ??
            !!process.env.VERCEL
          const cookieName = secureCookie
            ? '__Secure-next-auth.session-token'
            : 'next-auth.session-token'
          const sessionToken = extractCookieValue(headerCookies, cookieName)
          const actualToken = await decode({
            secret: process.env.NEXTAUTH_SECRET,
            token: sessionToken.replace(`${cookieName}=`, ''),
          })
          currentLoggedInUserId = actualToken.id
        } catch (e) {
          console.error(e)
          captureException(e)
        }

        if (!currentLoggedInUserId) {
          throw new Error('Access denied')
        }

        const data = await prisma.account.findUnique({
          select: {
            user: true,
          },
          where: {
            providerAccountId: credentials.channelToImpersonate,
          },
        })

        if (!data) {
          throw new Error('Access denied')
        }

        return { ...data?.user, currentLoggedInUserId }
      },
    }),

[musjj]

With Lucia, you can easily do it like this:

const session = await lucia.createSession(userId, {});
const sessionCookie = lucia.createSessionCookie(session.id);
cookies().set(
  sessionCookie.name,
  sessionCookie.value,
  sessionCookie.attributes,
);

Is there an equivalent API for Auth.js?

[yagudaev]

From a quick look at Lucia, it looks way better than auth.js. Auth.js is probably the worst auth library I have ever used. Why not just stick with Lucia?

I am planning to get rid of Auth.js and implement my own auth. It isn't that hard.

[misterbit-pro]

Hello,

is ther any update to implementing impersonation in next auth? Because the OAuth 2.0 standard supports token exhange https://cloudentity.com/developers/basics/oauth-extensions/token-exchange/#how-token-exchange-works wich keycloak f.e. also implements as its a safe way to do impersonation, this would be great if it cloud be added to next-auth as a custom implementation over a credentials provider is a bit tricky as the User object wich gets returned in the authorize method is very limited and has no support to save the exchanged token

[estani]

for v5.beta.25 (not sure since when it works) using jwt session (documentation is still terrible... but it works and makes sense, aka might be stable):

Client part to send the info to the backen (to the jwt callback)

'use client'
import { SessionProvider, useSession } from "next-auth/react"
import { useRouter } from "next/navigation"

function WrappedButtonImpersonate({ userId }: { userId: string | null }) {
  const session = useSession();
  const router = useRouter();
  async function onClick() {
    await session.update({ impersonate: userId });
    router.refresh();
  }
  return <button  onClick={onClick}>{userId === null && 'Stop '}Impersonate</button>
}

export function ButtonImpersonate({ userId }: { userId: string }) {
  return (
    <SessionProvider>
      <WrappedButtonImpersonate userId={userId} />
    </SessionProvider>
  )
}

export function ButtonStopImpersonation() {
  return (
    <SessionProvider>
      <WrappedButtonImpersonate userId={null} />
    </SessionProvider>
  )
}

jwt callback to check, handle and update session (working excerpt)

 jwt({ token, user, trigger, session }) {
  switch (trigger) {
    case 'update':
      // validate what you need (probably token.isAdmin or something)
      if (session.impersonate) {
        // impersonate (if you need to load things, make this callback async, it works)
        token.userId = session.impersonate;
      } else {
        // stop impersonating;
        token.userId = token.realUserId;
      }
      break;
    case 'signIn':
      token.userId = user.id;
      token.realUserId ||= user.id;  // Keep track of the original user
      break
  }
  return token
},
session({ session, token }) {
  // Enhance session with user details
  session.user.id = token.userId;
}