How do I get AccountJS working with Fastify and Mercurius?

[mrclean-oa]

TL;DR
I am using Accounts with Fastify and Mercurius, using @accounts/password and @accounts/graphql-api with mongo as a db, and am having the following problems (most likely due to misconfiguration or a misunderstanding of what this library does for you):

1. createUser returns session and user as null
2. addEmail and verifyEmail throw "Cannot read property 'nModified' of undefined"
3. I can't use authenticate by sending token, or access_token by itself otherwise it gives me "unexpected configuration"
4. authenticate and verifyAuthenticated (returns true) work fine

Below I included my configuration, and my package.json file. Also links to issues, examples, and library code that have informed me thus far.

---

I really love the API of accounts-js and was really excited to learn it when I saw it. I started a project with:

• Fastify - An Express competitor
• Mercurius - The Fastify version of Apollo Server
• and finally TypeScript

I read the documentation front to back a few times. I also downloaded and ran the React Example while running the TypeScript Backend and was instantly sold! This lib is exactly what I'm looking for—hook, line, and sinker.

I'm using Fastify, which uses Mercurius for GraphQL, and quickly ran into an issue where the userId was undefined in my resolvers—but authenticate and verifyAuthentication worked fine. I didn't check that this was the case in the TypeScript example code mentioned earlier, but the example worked fine.

My Accounts configuration code within a Fastify plugin—imports included

```typescript
import { buildContext } from "./context";
import { config } from "./../../config";
import { DatabaseManager } from "@accounts/database-manager";
import { AccountsModule } from "@accounts/graphql-api";
import MongoDbDriver from "@accounts/mongo";
import { AccountsPassword } from "@accounts/password";
import { AccountsServer } from "@accounts/server";
import { mergeResolvers, mergeTypeDefs } from "@graphql-tools/merge";
import { makeExecutableSchema } from "@graphql-tools/schema";
import { FastifyPluginAsync } from "fastify";
import mongodb from "fastify-mongodb";
import fp from "fastify-plugin";
import mercurius from "mercurius";
import { hashPassword, verifyPassword } from "./hash";
import { resolvers } from "./resolvers";
import typeDefs from "./typeDefs";
import { User } from "./types";
import { validateEmail, validateNewUser, validatePassword } from "./validate";
import mercuriusCodegen from "mercurius-codegen";

export interface AccountsJSPluginOptions {
databaseUrl: string;
tokenSecret: string;
}

declare module "fastify" {
interface FastifyInstance {
    accounts: AccountsServer;
    accountsGraphQL: ReturnType<typeof AccountsModule.forRoot>;
}
}

const accountsJsGraphQLPlugin: FastifyPluginAsync<AccountsJSPluginOptions> =
async (fastify, opts) => {
    await fastify
    .register(mongodb, {
        retryWrites: true,
        w: "majority",
        url: opts.databaseUrl,
    })
    .after();

    fastify.register((instance, _, done) => {
    // Build a storage for storing users
    const userStorage = new MongoDbDriver(instance.mongo.db, {
        convertSessionIdToMongoObjectId: true,
        convertUserIdToMongoObjectId: true,
    });
    userStorage.setupIndexes();
    // Create database manager (create user, find users, sessions etc) for accounts-js
    const accountsDb = new DatabaseManager({
        sessionStorage: userStorage,
        userStorage,
    });

    const accountsPassword = new AccountsPassword<User>({
        // This option is called when a new user create an account
        // Inside we can apply our logic to validate the user fields
        validateNewUser,
        validateEmail,
        validatePassword,
        hashPassword,
        verifyPassword,
        invalidateAllSessionsAfterPasswordChanged: true,
    });

    // Create accounts server that holds a lower level of all accounts operations
    const accountsServer = new AccountsServer(
        {
        db: accountsDb,
        tokenSecret: opts.tokenSecret,
        ambiguousErrorMessages: false,
        enableAutologin: true,
        },
        {
        password: accountsPassword,
        }
    );

    const accountsGraphQL = AccountsModule.forRoot({
        accountsServer,
    });

    instance.decorate("accounts", accountsServer);
    instance.decorate("accountsGraphQL", accountsGraphQL);

    const schema = makeExecutableSchema({
        typeDefs: mergeTypeDefs([accountsGraphQL.typeDefs, typeDefs]),
        resolvers: mergeResolvers([accountsGraphQL.resolvers, resolvers]),
        schemaDirectives: {
        ...accountsGraphQL.schemaDirectives,
        },
    });

    /**
    * Add 'mercurius' to our fastify server
    */
    fastify.register(mercurius, {
        routes: true,
        prefix: "/api",
        schema,
        // @ts-expect-error - haven't fixed it yet
        context: buildContext(accountsGraphQL, accountsServer),
        // Enable the GraphQL Playground
        graphiql: config.nodeEnv === "development",
        ide: config.nodeEnv === "development",
    });

    mercuriusCodegen(instance, {
        // Commonly relative to your root package.json
        targetPath: "./src/generated/graphql.ts",
    }).catch(console.error);

    done();
    });
};

export default fp(accountsJsGraphQLPlugin, "3.x");
```

I saw in so many different places code that used accountsGraphQL.context directly on context, being new to the library, I still don't know if that's my problem. I also didn't know if it was fundamental differences between Mercurius and Apollo Server causing it to not populate or a misunderstanding of what the library actually does for you.

{
//...
context: accountsGraphQL.context
//...

Gives me typescript errors, about how the booleans (2nd and 3rd args) were incompatible with reply. Event when I did just straight return the context, userId and user were always undefined:

{
//...
// First argument is request here, and `raw` equates to `IncommingMessage` as I noted it needed to be in the typings file.
context: ({raw}) => accountsGraphQL.context(raw)
//...

In one place there was a super vague, no imports or anything (see How to use this package? under "The last step is to add to your ApolloServer, the accounts context.") that I thought might be something, so I used that for reference as well. But didn't understand where functions were coming from.

I had been passing an Authorization header with Bearer token that I got from the authenticate mutation:

Still not sure if I was implementing it right, I went to the authenticate resolver in code, and saw it called loginWithService which I found on AccountsServer here. I noted it calls authenticate (in my case) using password, then returns the result so that loginWithUser can be called. Which the documentation warns:

This method creates a session without authenticating any user identity. Any authentication should happen before calling this function.
Creating a new session for a user

But do not see anything about the session in that code. At my lowest, I even resorted to using the accountsServer.on event to listen for successful authentication, then calling the loginWithUser method manually, to no avail.

Am I misunderstanding something fundamental about how the library works? How do I get a user from a session when they pass a token? I started to get some good information with this issue but it was vague, and thought I might have the same misunderstanding.

So I built a context function based on this issue, to do this work manually, but I'm not sure if there's a better way or not, but it feels right to me:

The code for the buildContext function

```typescript import { AccountsModuleConfig, AccountsModuleContext, AccountsRequest, } from "@accounts/graphql-api"; import AccountsServer, { AccountsJsError } from "@accounts/server"; import { GraphQLModule, ModuleContext } from "@graphql-modules/core"; import { FastifyRequest } from "fastify"; import { InvalidTokenError } from "jwt-decode"; import { MercuriusContext } from "mercurius"; import { User } from "./types";

export type Context = ModuleContext<AccountsModuleContext<User>> &
MercuriusContext;

export const buildContext =
(
    accountsGraphQL: GraphQLModule<
    AccountsModuleConfig,
    AccountsRequest,
    AccountsModuleContext<User>
    >,
    accountsServer: AccountsServer<User>
) =>
async ({ raw }: FastifyRequest) => {
    const ctx = await accountsGraphQL.context({ req: raw });
    const { authToken } = ctx;

    if (authToken) {
    let user;

    try {
        user = await accountsServer.resumeSession(authToken as string);
    } catch (error) {
        if (error instanceof AccountsJsError) {
        if (error.code === "InvalidToken") {
            throw new Error("Unauthorized");
        }
        }
    }

    return {
        ...ctx,
        user,
        // @ts-expect-error - just testing the id
        userId: user && user.id && user._id,
    };
    }
    return {
    ...ctx,
    };
};
```

Now that I have that in place the me resolver (as demonstrated here) and the getUser queries return data, but createUser still returns session and user as null. I poured through the issues and found a suggestion from @vuode to use:

ambiguousErrorMessages: false,
enableAutologin: true,

And now I get a proper error message when trying to create a user whose username or email already exists.

But then I try to verify an email, or add an email (so far have just tried those two before coming here) I get this error message:

{
  "data": {
    "addEmail": null
  },
  "errors": [
    {
      "message": "Cannot read property 'nModified' of undefined",
      "locations": [
        {
          "line": 74,
          "column": 3
        }
      ],
      "path": [
        "addEmail"
      ]
    }
  ]
}

But it successfully persists the data. It verified my email but barfed at me, and when I added an email it added it and then barfed that.

package.json

```json { "name": "user", "version": "1.0.0", "description": "", "main": "./src/server.ts", "scripts": { "test": "jest --runInBand", "clean": "rm -rf dist", "build": "npm run clean && tsc", "dev": "nodemon src/server.ts", "start": "node dist/src/server.js", "lint": "eslint \"src/**/*.ts\"", "lint:write": "eslint \"src/**/*.ts\" --fix", "ts-node": "ts-node --compiler-options \"{\\\"module\\\":\\\"commonjs\\\"}\"", "generate:prisma": "prisma generate", "generate:secret": "uuid v4" }, "devDependencies": { "@tsconfig/node14": "^1.0.1", "@types/jsonwebtoken": "^8.5.5", "@types/jwt-decode": "^3.1.0", "@types/node": "^16.11.6", "@types/supertest": "^2.0.10", "@types/uuid": "^8", "@types/ws": "^7.4.0", "@typescript-eslint/eslint-plugin": "^4.9.1", "@typescript-eslint/parser": "^4.9.1", "eslint": "^7.15.0", "eslint-config-google": "^0.14.0", "eslint-plugin-import": "^2.22.1", "eslint-plugin-jest": "^24.1.3", "eslint-plugin-promise": "^4.2.1", "jest": "^26.6.3", "nodemon": "^2.0.15", "prettier-plugin-prisma": "^3.4.1", "prisma": "3.4.1", "supertest": "^6.0.1", "ts-jest": "^26.4.4", "ts-node": "^10.4.0", "ts-node-dev": "^1.1.1", "typescript": "^4.4.4" }, "dependencies": { "@accounts/database-manager": "^0.33.1", "@accounts/graphql-api": "^0.33.1", "@accounts/magic-link": "^0.1.1", "@accounts/mongo": "^0.33.5", "@accounts/password": "^0.32.1", "@accounts/rest-express": "^0.33.1", "@accounts/server": "^0.33.1", "@graphql-modules/core": "^0.7.17", "@graphql-tools/merge": "^8.2.1", "@graphql-tools/schema": "^7.1.2", "@prisma/client": "3.4.1", "argon2": "^0.28.2", "dotenv": "^10.0.0", "fastify": "^3.9.2", "fastify-express": "^0.3.3", "fastify-mongodb": "^4.1.1", "fastify-plugin": "^3.0.0", "graphql": "^15.4.0", "graphql-tag": "^2.12.6", "jsonwebtoken": "^8.5.1", "jwt-decode": "^3.1.2", "mercurius": "^8.9.1", "mercurius-codegen": "^1.2.0", "mongoose": "^6.0.13", "reflect-metadata": "^0.1.13", "tslib": "^2.3.1", "uuid": "^8.3.2", "yup": "^0.32.11", "yup-env": "^1.2.0" }, "author": "Kevin Dench ", "license": "ISC", "prisma": { "seed": "ts-node prisma/seed.ts" } } ```

I could really use some help getting this set up properly, it's been a very hard and exasperating experience so far, but I don't want to give up on all the niceities and good design from this library. What am I doing/how am I thinking wrong? I have been using graphiql to test all this configuration, haven't built the frontend yet.

Thanks for any help ahead of time. It's a great library, even with all these problems I've experienced, I'm thinking it's just me being slow.

[mrclean-oa]

Cannot read property of 'nModified' of undefined

Fixed by downgrading to a specific version of Mongoose I noticed in the example code. (Here's a compatibility matrix but confusingly the @accounts/mongo package uses an even older version than seems right for that matrix.

I pointed the React Frontend example up to my backend to test, and it seems to be working perfectly now... but I'd still like feedback on whether I've got my ducks in a row, and am understanding things properly.

[mrclean-oa]

@pradel Any thoughts on why I may have had to do this as well?

[mrclean-oa]

What ended up fixing it was having context that resumed the session. I really think the docs should be updated to reflect that in all the examples, I didn't get a user until I did this, since it seems like it's needed, but I'm open to being corrected:

  async ({ raw }: FastifyRequest): Promise<Context> => {
    const ctx = await accountsGraphQL.context({ req: raw });
    const { authToken } = ctx;

    if (authToken) {
      let user;

      try {
        user = await accountsServer.resumeSession(authToken as string); //<=== this is the key here.
      } catch (error) {
        if (error instanceof AccountsJsError) {
          if (error.code === 'InvalidToken') {
            throw new Error('Unauthorized');
          }
        }
      }

      return {
        ...ctx,
        user,
        userId: user && user.id && user._id, //<-- not sure if this lib maps the `_id` to `id` or not.
      };
    }
    return {
      ...ctx,
    };
  };

[pradel]

The server is trying to extract { req, connection } from the request.
https://github.com/accounts-js/accounts/blob/master/packages/graphql-api/src/utils/context-builder.ts#L7

[mrclean-oa]

Ah, I see now. So for a Fastify-specific Request it should be:

context: (req) => accountsGraphQL.context({ req: req.raw, connection: req.socket })

From reading the code, the only property used from req is req.headers, but the request-ip package additionally looks for an ip in the following non-header locations:

9. req.connection.remoteAddress
10. req.socket.remoteAddress
11. req.connection.socket.remoteAddress
12. req.info.remoteAddress

Okay, and I also see that AccountsRequest's req is typed as IncomingMessage.

So as long as I can get my hands on that—which I think Fastify's raw is—then that should work.

Thank you for that really helpful source link! I think I'm getting it now. Unless you see something wrong with my thought process.

[pradel]

I don't really use Fastify so I can't confirm it but what you said sounds right 👍 , if you want to open an issue / create a pr to add native support to fastify, or just update the docs to explain how that can be great for other users!

[mrclean-oa]

That sounds great! I was also thinking about opening a PR to configure the pathFragment for Email. So the docs PR would be a good way to get my feet wet.

[mrclean-oa]

The server is trying to extract { req, connection } from the request.

In an effort to fill in my understanding and contribute to the docs in a meaningful way, I went back to basics and used the function you referenced: accountsGraphQL.context. I found it uses not the util you linked, but the node_modules/@graphql-modules/core/dist/index.cjs.js#GraphQLModule get context()` function. I then get some weird errors like this one coming from the MongoDB package:

{
  "data": {
    "logout": null
  },
  "errors": [
    {
      "message": "Argument passed in must be a single String of 12 bytes or a string of 24 hex characters",
      "locations": [
        {
          "line": 15,
          "column": 3
        }
      ],
      "path": [
        "logout"
      ]
    }
  ]
}

Here is a screenshot of the debugger inside that function I had referenced:

Seems like this code returns a GraphQL Module, and so the get context() should be the same function you mentioned earlier, but when the runtime hits (or when following the type definition in VSCode), it doesn't go to that function (at least that I can tell). My GraphQL accounts module is set up like so:

import { AccountsModule } from '@accounts/graphql-api';
//...
const accountsGraphQL = AccountsModule.forRoot({
  accountsServer,
});

Not sure what I could be mis-configuring... When I use it like:

import {context} from '@accounts/graphql-api';
//...
context: context('accounts')

I get this response, which makes sense because injector is not passed yet and is undefined:

{
  "data": null,
  "errors": [
    {
      "message": "Cannot destructure property 'injector' of 'undefined' as it is undefined."
    }
  ]
}

So then I came up with the solution to leave my buildContext function as shown previously:

context: buildContext(accountsGraphQL),

But change the guts of it:

import { User } from '@accounts/types';
import { GraphQLModule, ModuleContext } from '@graphql-modules/core';
import {
  AccountsModuleConfig,
  AccountsModuleContext,
  AccountsRequest,
  context,
} from '@accounts/graphql-api';
// other imports

export const buildContext =
  (
    accountsGraphQL: GraphQLModule<
      AccountsModuleConfig,
      AccountsRequest,
      AccountsModuleContext<User>
    >,
  ) =>
  async ({ raw, socket }: FastifyRequest): Promise<Context> => {
   // Calls the GraphQLModule context (in cache?)
    const ctx = await accountsGraphQL.context({ req: raw, connection: socket });
    const { injector } = ctx;
    return context('accounts')(
      // @ts-expect-error - context does not exist on `socket`
      { req: raw, connection: socket.context },
      undefined,
      // @ts-expect-error - The injector is all this function calls for.
      {
        injector,
      }
    );
  };

Am I using the right module name for this utility? I looked in the source code I linked and it had said accounts but I wasn't confident, because it seems like there might be some inheritance with some of the packages?

One caveat is that connection: socket.context in Fastify socket is populated (at least when using GraphiQL). So I just included it as socket.context but realize when it's called in the function body it would be socket.context.context which doesn't seem right. What is the intent of returning socket.context inside the context utility?

By the way, using it this way "fixes" that MongoDB bug I was seeing... I assume it has something to do with including more information in the context than I was giving previously.