MirageJS: Mock an authenticated endpoint with Auth0 in React
By: Christian Perry
Tags: Mocking, Auth0, Front End Development, Miragejs, React

MirageJS is an amazing new backend mocking utility that ‘s taking the React world by storm.

My use case for learning Mirage was to mock the endpoint for a new feature I’m building at work. As a result I had the following three conditions:

I do want a Mirage server to intercept calls to my new endpoint I don’t want to mock our Auth0 authentication routes I simply want the rest of my app to behave

This article will show you how MirageJS lets you mock an endpoint that requires real authentication, for instance, in simulating a feature that sits behind a login screen.

I’ll go through each of the above three conditions step-by-step to show how to do them.

1. Intercept API calls to your new route

Follow the same steps for route handling as documented in the MirageJS React Quick Start:

Install MirageJS: npm i -D miragejs

Create server.js in src/ (Note: server.js must be in root directory if you’re using create-react-app)

in (Note: server.js must be in root directory if you’re using create-react-app) Customize your mocked route as desired

Add imports and config to index.js

(Tip: If you’re learning MirageJS and taking their Quick Start for React, skip “Test a Component with React Testing Library” because this code doesn’t work with the code from the previous step.)

2. Whitelist Auth0 within MirageJS Server config

Let’s say you’re building a route that sits behind an Auth0 authentication layer and requires the user to login in order to see your new feature.

In this case, if you npm start your app without taking any additional steps, you’ll encounter a browser console error once you attempt to login. For me it looked like this:

// MirageJS Auth0 error message of doom

Uncaught (in promise)

{…}

description: “Mirage: undefined”

fileName: “http://localhost:3000/static/js/0.chunk.js"

lineNumber: 81768

message: “Mirage: Your app tried to POST ‘https://fun-facts-about-bob.auth0.com/oauth/token', but there was no route defined to handle this request. Define a route for this endpoint in your routes() config. Did you forget to define a namespace?”

name: “Error”

Since most of the documentation around MirageJS comes from the Vue world, searches for “miragejs routes config” tend to direct you to the Vue-specific implementation, where passthroughs are set in a mirage/config.js file.

On React, no such config file or folder exists. Instead, the option to whitelist a URL is accomplished by modifying the Pretender instance in server.js.

// in src/server.js import { Server, Model } from "miragejs"; export function makeServer({ environment = "development" } = {}) {



{...} routes() {

this.namespace = "api" // handled routes here...

this.get("/bob", (schema) => {

return schema.funFactsAboutBob.all()

})

this.passthrough(' // troublesome auth route herethis.passthrough(' https://fun-facts-about-bob.auth0.com/oauth/token' ); },

}) return server

}

3. Tell Mirage to leave the rest of your routes alone

You can make Mirage only mock endpoints that are explicitly declared.

To do so, simply add the following four lines to your routes() method:

routes() {

this.namespace = "api" {... all your other routes go here ...} // add wildcards for all other routes and pass them through

this.get('/**', this.passthrough);

this.post('/**', this.passthrough);

this.put('/**', this.passthrough);

this.delete('/**', this.passthrough);

},



Celebrate with a Slice of Pizza