How to setup authentication with graphql, and passport but still use Playground

Question

After adding authentication to our backend Graphql server the "Schema" and "Docs" are no longer visible in the Graphql Playground. Executing queries when adding a token to the "HTTP HEADERS" in the Playground does work correctly when authenticated and not when a user isn't authenticated, so that's ok.

We disabled the built-in Playground from Apollo-server and used the middleware graphql-playground-middleware-express to be able to use a different URL and bypass authentication. We can now browse to the Playground and use it but we can't read the "Schema" or "Docs" there.

Trying to enable introspection didn't fix this. Would it be better to call passport.authenticate() in the Context of apollo-server? There's also a tool called passport-graphql but it works with local strategy and might not solve the problem. I've also tried setting the token in the header before calling the Playground route, but that didn't work.

We're a bit lost at this. Thank you for any insights you could give us.

The relevant code:

// index/ts
import passport from 'passport'
import expressPlayground from 'graphql-playground-middleware-express'

const app = express()
app.use(cors({ origin: true }))
app.get('/playground', expressPlayground({ endpoint: '/graphql' }))
app.use(passport.initialize())
passport.use(bearerStrategy)

app.use(
  passport.authenticate('oauth-bearer', { session: false }),
  (req, _res, next) => { next() }
)
;(async () => {
    await createConnections()
    const server = await new ApolloServer({
      schema: await getSchema(),
      context: ({ req }) => ({ getUser: () => req.user, }),
      introspection: false,
      playground: false,
    })
    server.applyMiddleware({ app, cors: false })

    app.listen({ port: ENVIRONMENT.port }, () => { console.log(`Server ready`) })      
})()

// passport.ts
import { IBearerStrategyOptionWithRequest, BearerStrategy, ITokenPayload } from passport-azure-ad'
import { Account } from '@it-portal/entity/Account'

export const bearerStrategy = new BearerStrategy( config,
  async (token: ITokenPayload, done: CallableFunction) => {
    try {
      if (!token.oid) throw 'token oid missing'

      const knownAccount = await Account.findOne({ accountIdentifier: token.oid })
      if (knownAccount) return done(null, knownAccount, token)

      const account = new Account()
      account.accountIdentifier = token.oid
      account.name = token.name
      account.userName = (token as any).preferred_username
      const newAccount = await account.save()
      return done(null, newAccount, token)
    } catch (error) {
      console.error(`Failed adding the user to the request object: ${error}`)
    }
  }
)

Answer 1

I figured it out thanks to this SO answer. The key was not to use passport as middleware on Express but rather use it in the Graphql Context.

In the example code below you can see the Promise getUser, which does the passport authentication, being used in the Context of ApolloServer. This way the Playground can still be reached and the "Schema" end "Docs" are still accessible when run in dev mode.

This is also the preferred way according to the Apollo docs section "Putting user info on the context".

// apollo.ts
passport.use(bearerStrategy)

const getUser = (req: Express.Request, res: Express.Response) =>
  new Promise((resolve, reject) => {
    passport.authenticate('oauth-bearer', { session: false }, (err, user) => {
      if (err) reject(err)
      resolve(user)
    })(req, res)
  })

const playgroundEnabled = ENVIRONMENT.mode !== 'production'

export const getApolloServer = async () => {
  return new ApolloServer({
    schema,
    context: async ({ req, res }) => {
      const user = await getUser(req, res)
      if (!user) throw new AuthenticationError('No user logged in')
      console.log('User found', user)

      return { user }
    },
    introspection: playgroundEnabled,
    playground: playgroundEnabled,
  })
}

The best thing is that you only need two functions for this to work: passport.use(BearerStrategy) and passport.authenticate(). This is because sessions are not used so we don't need to add it as Express middleware.

// index/ts
const app = express()
app.use(cors({ origin: true }))

;(async () => {
    await createConnections()
    const server = await getApolloServer()
    server.applyMiddleware({ app, cors: false })

    app.listen({ port: ENVIRONMENT.port }, () => { console.log(`Server ready`) })      
})()

I hope this helps others with the same issues.