How to mock OAuth flow?

[cmacdonnacha]

Hey,

I understand that MSW is mostly used to mock API endpoints. But I was wondering if it can be used to mock something like when authenticating with slack (https://slack.com/oauth/v2/):

rest.get('https://slack.com/oauth/v2/*', (req, res, ctx) => {
  // do something else
}),

[kettanaito]

Hey, @cmacdonnacha.

Yeah, sure. Authentication also involves API requests to endpoints, so no extra case here. I haven't worked with the Slack API per se but I imagine it's not much different from other OAuth protocols.

Here's how I'd mock a GitHub OAuth:

rest.get('https://github.com/oauth/v2/authorize', (req, res, ctx) => {
  const callbackUrl = new URL('http://localhost:3000/oauth/callback')
  callbackUrl.searchParams.set('code', 'abc-123')

  // Redirect to the local OAuth callback route with a mock "code".
  // The route handler for this callback remains as-is, no need to mock it.
  return res(ctx.status(301), ctx.set('Location', callbackUrl))
})

rest.post('https://github.com/oauth/v2/authorize', async (req, res, ctx) => {
  const { code } = await req.json()

  // Mock a successful authorization payload.
  return res(ctx.json({
    access_token: mockAccessToken()
  })
})

Just keep in mind that MSW intercepts fetch requests. So you cannot intercept a navigation request if your app opens https://github.com/oauth/authorize to trigger the in-browser authorization flow. You don't mock those things usually. But the approach I've posted above is good for testing the server-side logic of your OAuth handler.

For in-browser flows skip the entire thing and only mock the authorization endpoint of your service (i.e. GET /user as if the auth went successfully).

[cmacdonnacha]

Excellent thanks @kettanaito for the quick response!

[kettanaito]

Since most OAuth flows are triggered from the browser, bear my suggestions at the bottom in mind. You're likely better off mocking your own auth endpoint instead of mocking the entire OAuth provider's flow. I'd mock the provider flow when testing my own /auth route handler for sure.