How to mock authentication when the backend is not ready

Authentication serves as the secure access point for users to enter your application, essentially acting as a gateway. This fundamental process involves the verification of user identities and the allocation of appropriate permissions for accessing specific resources. Notably, it is also often one of the initial features developers embark upon when building an application. However, what if your authentication APIs are not yet functional? How can you effectively proceed with developing your front-end interfaces under these circumstances? This is where the concept of simulating authentication comes into play.

In this blog post, we’ll understand in-depth why we need to simulate authentication and in turn, learn how we can use a tool called Requestly to simulate authentication.

Why Do We Need to Simulate Authentication?

In a lot of situations, frontend developers are faced with the challenge of creating user interfaces when the backend APIs are not fully developed or integrated.

Without a fully functional backend, front-end developers cannot test the authentication process, limiting their ability to create a seamless user experience.

Moreover, sometimes backend development may take longer especially in the case of authentication since it entails a lot of security considerations. Simulating authentication allows front-end teams to work independently and speed up development cycles. It also enables developers to identify and fix issues early in the development process.

Types of Authentication

Before we dive into the topic at hand, let’s take a quick primer on various types of authentication methods available today:

1. Basic Authentication: With every request, the user’s main credentials such as their username and password are sent to authenticate that request. It’s the simplest form of authentication but is generally less secure as compared to other methods.
2. Token-based Authentication: A token-based authentication method includes generating a special token on a successful login. This token is then used to authenticate the user in every request sent thereafter.
3. OAuth: OAuth stands for Open-Authentication and is considered to be an open standard used commonly for third-party authentication. Using OAuth, users can grant access to their resources without actually sharing credentials. All authentication flows themselves are handled by OAuth providers.
4. JSON Web Token (JWT): In this method, a digitally signed token is generated for users upon login. This token contains information related to the user and necessary permissions, which are sent with each request to authenticate the user.

Introducing Requestly

Requestly is a powerful tool that helps developers simulate various scenarios in their web applications. It offers several features, including:

• Rules Engine: Create and manage rules to modify network requests and responses.
• Mock Server: Simulate API responses without a backend.
• Session Recording: Record and replay user sessions for testing.
• API Client: Test APIs directly from your browser.

We’ll use the Requestly Mock Server to simulate authentication APIs without an actual backend.

Using Requestly for Authentication Simulation

Let’s start by creating a simple API for signing up new users. We’ll return a status field as success and along with some user information that’s essential for subsequent request. This can include the user’s email, the authentication token and a unique user ID as an identifier.

Great! Now let’s test this mock API:

That works! But what if an existing user tries to signup? Let’s create a new mock API for this case:

In this case, we should return the status as failure and an appropriate error message that the frontend can show:

While we’re at it, let’s talk about how we can set custom status codes for our mock APIs. Setting a custom status code can help frontend developers mimic the behaviour of an erroneous request and show error messages accordingly. Let’s create a mock API now that simulates an error on signup:

Notice that we’re setting the status code to 400 in this case, which indicates a bad request. In the response, we receive the status code 400 which can then be used on the frontend to show an error state and the error messages from the API.

Similarly, we can even send headers in the request to our mock API. Remember the authentication token we’ve been sending in the API responses? Let’s use this for a mock user profile API. This time, I’m not going to put in any dummy response of my own, instead I’ll use a neat little feature to generate some dummy data using AI on the mock API. When sending the request, I’ll add the Authorisation header as Token 1234 :

So Requestly can even help you with generating dummy response objects, that’s pretty useful when working with mock APIs. From this point, you can try to create some more mock APIs for authentication such as simulating a login error, a failed login attempt, an incorrect email/password and much more.

Conclusion

Simulating authentication in web development is crucial for overcoming the challenges faced by front-end developers when the backend is not ready. Requestly provides a convenient and efficient way to simulate authentication, enabling developers to work more effectively and deliver high-quality applications. By understanding the different types of authentication and mastering Requestly’s features, you can streamline your development process and create robust, secure web applications.