3 min.

How to use Postman with Nuxt auth module based on JWT

Learn How to Access and Use Restricted Endpoints by Passing JWT in Cookies

If you haven't yet implemented authentication in your Nuxt application, start by exploring how to integrate the Auth Nuxt module with Express.js.

 

 

Request the Login Endpoint and Intercept the JWT

 

Determine which endpoint your login page queries when users submit their credentials in Nuxt. Utilize this URL in Postman, selecting the appropriate method (GET or POST) to pass the credentials. For POST requests, use the body tab; for GET, use the params tab

 

 

Postman login JWT Nuxt

 

 

Postman Login with JWT in Nuxt


Upon submitting a request, you should receive a token as a response. Copy this token, as you will need it shortly.

 

 

Postman token response Nuxt

 

 

Handling Invalid Endpoint Responses in Postman

 

If Postman sends back some html doc it means that you hit invalid url, probably in such a case you used a nuxt route instead of backend endpoint.

 

 

Postman login invalid endpoint Nuxt

 

 

Saving the Token in Cookies


n Postman, locate the cookies button near the Send button to open a modal with options for adding cookies. Find or add your domain and create a new cookie named auth._token.local. Postman will generate a default cookie template. In the value field, include the token you obtained from the login endpoint, prefixed with "Bearer " followed by a space (alternatively, "%20" can be used).

 

 

Postman cookies section Nuxt

 

 

// default template cookie generate by Postman

Cookie_4=value; Path=/; Domain=.your domain; Expires=Tue, 02 Nov 2021 12:10:27 GMT;

 

 

// cookie with your token

auth._token.local=Bear yourTokenStringGoesHere; Path=/; Domain=.yourDomain; Expires=Tue, 02 Nov 2021 11:18:30 GMT;

 

 

Verify that your cookies are correctly stored by accessing the code section next to the cookies button. This will display the full request sent to the server, including cookie information. Ensure the cookie header includes the required cookie and that your token is correctly prefixed.

 

 

Postman code section Nuxt

 

 

Requesting Restricted Endpoints

 

With the configuration saved, you can now access your application's authenticated endpoints. Identify which endpoints require authentication and return JSON for easier interpretation. Request these endpoints, and your Nuxt app should receive all the data as though you were logged in through a browser.

 

Leveraging Postman to simulate an authenticated user in Nuxt facilitates testing various aspects of your authentication mechanism, including password resets, scope access, and more.