Microsoft Teams SSO - How to add new users to the database?

[gablabelle]

Hello,

I'm trying to hook up a Microsoft Teams app I'm building with next-auth. The way SSO works in Teams it that:

1. You install a SDK in your FE app and that SDK allows you to obtain a client side token.
2. You send that client side token to your own BE
3. From that BE you exchange that client side token for an access token and get user related data from the MS Graph.

So I implemented my flow using the Credentials provider but instead of passing username and password, I'm simply passing the client side token to the signIn method.

{
  adapter: PrismaAdapter(prisma),
  providers: [
    CredentialsProvider({
      id: 'teams-sso',
      name: 'Teams SSO',
      credentials: {
        clientSideToken: {
          label: 'Client side token',
          type: 'text',
        },
      },
      async authorize(credentials, req): Promise<any> {
        const { clientSideToken } = credentials || {};
        if (clientSideToken) {
          try {
            const { validatedToken } = await validateToken(clientSideToken);
            const { account } =
              (await getUserInfoOnBehalfOf(validatedToken)) || {};
            console.log({ account });
            const { localAccountId: id, name, username: email } = account || {};
            const user = { id, name, email, image: null };
            console.log({ user });
            return user;
          } catch (error) {
            console.error(error);
            return null;
          }
        }
        return null;
      },
    }),
  ],
  secret: process.env.NEXTAUTH_SECRET,
  pages: {
    signIn: '/login',
  },
  // Teams app are embedded in an iframe
  // Need to have `sameSite` set to none for the cookies to be set
  cookies: {
    sessionToken: {
      name: `__Secure-next-auth.session-token`,
      options: {
        httpOnly: true,
        sameSite: 'none',
        path: '/',
        secure: true,
      },
    },
    callbackUrl: {
      name: `__Secure-next-auth.callback-url`,
      options: {
        httpOnly: true,
        sameSite: 'none',
        path: '/',
        secure: true,
      },
    },
    csrfToken: {
      name: `__Host-next-auth.csrf-token`,
      options: {
        httpOnly: true,
        sameSite: 'none',
        path: '/',
        secure: true,
      },
    },
  },
}

/**
 * Result returned from the authority's token endpoint.
 * - uniqueId               - `oid` or `sub` claim from ID token
 * - tenantId               - `tid` claim from ID token
 * - scopes                 - Scopes that are validated for the respective token
 * - account                - An account object representation of the currently signed-in user
 * - idToken                - Id token received as part of the response
 * - idTokenClaims          - MSAL-relevant ID token claims
 * - accessToken            - Access token or SSH certificate received as part of the response
 * - fromCache              - Boolean denoting whether token came from cache
 * - expiresOn              - Javascript Date object representing relative expiration of access token
 * - extExpiresOn           - Javascript Date object representing extended relative expiration of access token in case of server outage
 * - state                  - Value passed in by user in request
 * - familyId               - Family ID identifier, usually only used for refresh tokens
 */
export declare type AuthenticationResult = {
    authority: string;
    uniqueId: string;
    tenantId: string;
    scopes: Array<string>;
    account: AccountInfo | null;
    idToken: string;
    idTokenClaims: object;
    accessToken: string;
    fromCache: boolean;
    expiresOn: Date | null;
    tokenType: string;
    correlationId: string;
    extExpiresOn?: Date;
    state?: string;
    familyId?: string;
    cloudGraphHostName?: string;
    msGraphHost?: string;
    code?: string;
    fromNativeBroker?: boolean;
};
/**
 * Account object with the following signature:
 * - homeAccountId          - Home account identifier for this account object
 * - environment            - Entity which issued the token represented by the domain of the issuer (e.g. login.microsoftonline.com)
 * - tenantId               - Full tenant or organizational id that this account belongs to
 * - username               - preferred_username claim of the id_token that represents this account
 * - localAccountId         - Local, tenant-specific account identifer for this account object, usually used in legacy cases
 * - name                   - Full name for the account, including given name and family name
 * - idTokenClaims          - Object contains claims from ID token
 * - localAccountId         - The user's account ID
 * - nativeAccountId        - The user's native account ID
 */
export declare type AccountInfo = {
    homeAccountId: string;
    environment: string;
    tenantId: string;
    username: string;
    localAccountId: string;
    name?: string;
    idTokenClaims?: TokenClaims & {
        [key: string]: string | number | string[] | object | undefined | unknown;
    };
    nativeAccountId?: string;
};

But from what I understand from this discussion is that the Credentials flow will not register new users and automatically add them to the database #2282 (comment)

One caveat using the Credentials flow though, that these users won't be saved in a database, as we generally discourage this username+password flow.

So my question is what would the simpliest way for me to add the new user to the database? Is there a method I can hook in? Or maybe I should use another Provider? Any suggestion or exemples available?

[gablabelle]

So in addition to my OAuth2 providers, I am now able to use Teams SSO (using the credentials provider) and persist user, account and session to the database through next-auth and the prisma adapter.

const adapter = PrismaAdapter(prisma);

export const authOptions: NextAuthOptions = {
  adapter,
  providers: [
    CredentialsProvider({
      id: 'teams-sso',
      name: 'Teams SSO',
      credentials: {
        clientSideToken: {
          label: 'Client side token',
          type: 'text',
        },
      },
      async authorize(credentials) {
        const { clientSideToken } = credentials || {};
        if (clientSideToken) {
          try {
            // Validate client side token
            const { validatedToken } = await validateToken(clientSideToken);

            // Exchange for an MS Graph access token
            const userInfo = await getUserInfoOnBehalfOf(validatedToken);
            if (!userInfo) {
              throw new Error('No user info on behalf of');
            }
            const { account, idToken, accessToken, scopes, tokenType } =
              userInfo;
            if (!account) {
              throw new Error('No account received from MS Graph');
            }
            const { name, username: email } = account;
            const decoded: { [key: string]: any } = jwtDecode(accessToken) as {
              [key: string]: any;
            };
            const { iat, exp } = decoded;

            // Check if user already exists
            const existingUser = email
              ? await adapter.getUserByEmail(email)
              : null;

            // If user exists, return user
            if (existingUser) {
              return existingUser;
            }

            // If user doesn't exist, create user
            const newUser = { name, email };
            const user = account ? await adapter.createUser(newUser) : null;

            if (!user?.id || !account?.idTokenClaims?.sub) {
              throw new Error('Incomplete user data');
            }

            const newAccount = {
              userId: user.id,
              provider: 'teams-sso',
              providerAccountId: account.idTokenClaims.sub,
              id_token: idToken,
              access_token: accessToken,
              expires_at: exp,
              ext_expires_in: exp - iat,
              scope: scopes.join(' '),
              token_type: tokenType,
              type: 'credentials' as ProviderType,
            };

            // Link account
            await adapter.linkAccount(newAccount);

            // Can't run `adapter.createSession` here, because we need to use the same session-token
            // that will be created by next-auth (callback.js, see below) and used to retrieve our session.

            return user;
          } catch (error) {
            console.error(error);
            return null;
          }
        }
        return null;
      },
    }),
    AtlassianProvider({
      clientId: String(process.env.ATLASSIAN_CLIENT_ID),
      clientSecret: String(process.env.ATLASSIAN_CLIENT_SECRET),
      authorization: {
        params: {
          scope: 'write:jira-work read:jira-work read:me offline_access',
        },
      },
    }),
    AzureAdProvider({
      clientId: String(process.env.AZURE_AD_CLIENT_ID),
      clientSecret: String(process.env.AZURE_AD_CLIENT_SECRET),
      tenantId: String(process.env.AZURE_AD_TENANT_ID),
    }),
    LinkedInProvider({
      clientId: String(process.env.LINKEDIN_CLIENT_ID),
      clientSecret: String(process.env.LINKEDIN_CLIENT_SECRET),
    }),
  ],
  callbacks: {
    async jwt({ token, account, user }) {
      // Initial sign in
      if (account && user) {
        return {
          provider: account.provider || null,
          accessToken: account.access_token || null,
          accessTokenExpires: account.expires_at
            ? Date.now() + account.expires_at * 1000
            : null,
          refreshToken: account.refresh_token || null,
          user: token || null,
        };
      }
      return token;
    },
    async session({ token, session, user }) {
      if (session && token) {
        session.provider = token.provider;
        session.accessToken = token.accessToken;
        session.accessTokenExpires = token.accessTokenExpires;
        session.refreshToken = token.refreshToken;
        session.user = token.user as DefaultSession['user'];
      } else {
        const { createdAt, updatedAt, ...userRest } = user;
        session.user = userRest;
      }
      return session;
    },
  },
  secret: process.env.NEXTAUTH_SECRET,
  jwt: {
    secret: process.env.NEXTAUTH_SECRET,
  },
  pages: {
    signIn: '/login',
  },
  // Teams/Zoom/JIRA apps are embedded in an iframe
  // Need to have `sameSite` set to none for
  // the cookies to be set properly
  cookies: {
    sessionToken: {
      name: `__Secure-next-auth.session-token`,
      options: {
        httpOnly: true,
        sameSite: 'none',
        path: '/',
        secure: true,
      },
    },
    callbackUrl: {
      name: `__Secure-next-auth.callback-url`,
      options: {
        httpOnly: true,
        sameSite: 'none',
        path: '/',
        secure: true,
      },
    },
    csrfToken: {
      name: `__Host-next-auth.csrf-token`,
      options: {
        httpOnly: true,
        sameSite: 'none',
        path: '/',
        secure: true,
      },
    },
  },
};

The problem I was then facing is that I now have patch-package to be able to run createSession from within node_modules/next-auth/core/routes/callback.js

[gablabelle]

Suggestions to createSession using that newToken in a better way that doesn't require patch-package would be nice.

[FL0S0T]

@gablabelle thanks for sharing. do you have the full code? I'm facing the same issue and looking for away to authenticate...

[rollsrobby]

I guess this will stop working once google stops supporting third party cookies, or am I missing something?

[gablabelle]

@rollsrobby it should continue to work. For example, if you set your cookies using the partitioned: true flag in your next-auth config, these will be partitioned (scoped) to the context where they were created. In our case, this is the Teams iframe. So, cookies set during this flow will only work when accessed in the context of the Teams iframe. This is fine as long as you understand that if you visit the app outside of the Teams iframe, for example, if your app is also a standalone app, these cookies that were set within the iframe will not apply there.

See CHIPS for more information.

[rollsrobby]

@gablabelle thanks, I was checking this as-well, but it wasn't working for me. I will need to go over my code again and see what I missed.

To use the above example config, this should do the trick then?

...
cookies: {
    sessionToken: {
      name: `__Secure-next-auth.session-token`,
      options: {
        httpOnly: true,
        sameSite: 'none',
        path: '/',
        secure: true,
       partitioned: true,    /* <----------- new */
      },
    },
    callbackUrl: {
      name: `__Secure-next-auth.callback-url`,
      options: {
        httpOnly: true,
        sameSite: 'none',
        path: '/',
        secure: true,
       partitioned: true,    /* <----------- new */
      },
    },
    csrfToken: {
      name: `__Host-next-auth.csrf-token`,
      options: {
        httpOnly: true,
        sameSite: 'none',
        path: '/',
        secure: true,
       partitioned: true,    /* <----------- new */
      },
    },
  },
...

[gablabelle]

@rollsrobby maybe it only works in the beta, I feel I had the issue at some point.

[rollsrobby]

@gablabelle yep, I just checked, it requires v0.6.0 of jshttp/cookie which was never updated in v4.