The token endpoint in Nuxtjs auth module's configuration for auth strategies is not being triggered

Our system has two important endpoints, namely /auth and /token. The endpoint /auth is responsible for providing the authorization code required to call /token in order to obtain an access token.

The utilization of NuxtJS has made the auth module a preferred method. The login process using

this.$auth.loginWith("company")
appears to be functioning properly based on my observations. Upon entering valid credentials, I am redirected to the Login Page and subsequently directed to the configured URL.

Everything seems to be progressing as expected until this point. The redirection includes the authorization code as part of the request parameters.

Here is how the URL structure looks:

http://localhost:3000/?state=Y6CWcCZanJ&session_state=2c966cd9-5834-4045-9bfb-6aa9f616f841&code=fbabf615-cd5e-4479-818a-6a7ba72de01b.2c966cd9-5834-4045-9bfb-6aa9f616f841.553d562b-c454-4681-83ae-98cd93dbfa90

However, despite having this code, the auth module does not seem to automatically trigger the /token endpoint. What could be causing this delay?

Is it necessary to explicitly call it after executing

this.$auth.loginWith("company")
? For instance:

this.$auth.loginWith("company");
this.$auth.fetchToken();

Or should this action be triggered implicitly?

The configuration details can be found in the nuxt.config.js file:

...
  auth: {
    strategies: {
      company: {
        scheme: "oauth2",
        endpoints: {
          authorization:
            "https://login.mycompany.com/auth/realms/apps/protocol/openid-connect/auth",
          token:
            "https://login.mycompany.com/auth/realms/apps/protocol/openid-connect/token",
          userInfo:
            "https://login.mycompany.com/auth/realms/apps/protocol/openid-connect/userinfo",
          logout: "http://localhost:3000/logout"
        },
        token: {
          name: "Authorization",
          property: "access_token",
          type: "Bearer",
          maxAge: 1800
        },
        refreshToken: {
          property: "refresh_token",
          maxAge: 60 * 60 * 24 * 30
        },
        responseType: "code",
        grantType: "authorization_code",
        accessType: undefined,
        redirectUri: "http://localhost:3000",
        logoutRedirectUri: undefined,
        clientId:
          process.env.CLIENT_ID ||
          "3004761-241-dab74c5e-ad70-11eb-bea4-4193bd361dc612123",
        scope: ["all"],
        codeChallengeMethod: "S256"
      }
    }
  },
...

Answer №1

Did you possibly overlook setting up @nuxtjs/axios or specifically configuring the auth middleware?

// nuxt.config.js
modules: ['@nuxtjs/auth-next', '@nuxtjs/axios'],

router: {
  middleware: ['auth'],
},

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

A guide to removing functions from the render method

Greetings! Currently, I am in the process of creating a simple webpage that utilizes a map function to display all details to the user. Some fellow developers have advised me to remove my functions from the render method, as it continuously renders unneces ...

Using VueResource to send a GET request in Vue.js returned a response with a status

There is an issue I am facing with sending a request to the API to retrieve all users. The login function is called (index.vue) and it attempts to access api/users/all which should return all the users in that collection. Using Postman, the API returns th ...

Verify changes in the Cross Domain RSS feed by utilizing Ajax technology

I have a website where I am trying to automatically reload an RSS news feed from every 60 seconds if it has been updated. I attempted to use Ajax for this purpose, but I seem to be facing some issues: <script type="text/javascript" src="../js/jquery.a ...

Utilizing d3.js to implement a scatterplot with zoom functionality that focuses solely on zooming the axis without affecting

Having trouble creating a scatterplot with zoom functionality where only the axis is getting zoomed, not the data itself. Can anyone provide some assistance or insight on what might be wrong? If you're interested in checking out the project, here&apo ...

Verify whether a specific value is present within a nested array in MongoDB

Looking to verify whether a value sent in a request already exists within an array associated with a particular User. The data structure is as follows: { "_id": "63233972df0f14076e027106", "firstName": "mako" ...

Records are being loaded into the table, but the browser is unresponsive

After making an ajax call, I am receiving over 1000 tr elements for the tbody of a table. However, when I try to load this data into the tbody of the table, Loading the records into the tbody of the table becomes a problem. $('#loadingRecords') ...

Storing data in the browser's local storage using jQuery without requiring any CSS

I have a form that receives data and I am trying to save the first two pages of received data into localStorage: <form id="myForm" method="post"> Font Size (px): <input id="fontsize" type="text" name="fontsize" /> </form> <s ...

What makes the ng-file-upload Upload service so special?

Why do I need to use the Upload service with ng-file-upload in this specific way? Upload.upload({ url: '/postMyFormHere', data: { fileToUpload: model.file, someField1: model.field1, someField2: model.field2, ...

How can the @blur event be added to the vue-bootstrap-typeahead in Nuxt/Vue application?

I am facing an issue where I want to trigger a function upon leaving an input field. The input in question is set up using vue-bootstrap-typeahead. Upon inspecting the DOM, I found that the structure of the input element looks like this: <div id="m ...

Utilizing JSON in a d3.js application within a Rails environment

I have been exploring the gem gon in order to generate JSON data from my Rails database. I have successfully managed to display this data in an alert, but now I am looking to visualize it using d3.js. Within my database named "users" with columns (name:st ...

The presence of Firefox Marionette has been identified by hCaptcha

Whenever I go on indeed.com using the firefox web driver in Marionette mode, I keep encountering an hCaptcha popup. In an attempt to avoid this, I experimented with a user script that alters the navigator.webdriver getter to return false right at the sta ...

What is the most effective method for synchronizing data with HTML5 video playback?

I am currently developing a program that retrieves data from an android application and plays it back on a web browser. The android app allows users to record videos while logging data every 100ms, such as GPS location, speed, and accelerometer readings, i ...

What's the process for creating a synchronous function in AngularJS?

Is there a way to make storyboard.getAdressTimeLine run synchronously? I need storyboard.drawTimeLine to continue executing only after storyboard.getAdressTimeLine is done for (var i = 0; i < response.data.length; i++) { var obj=response.data[i]; var d ...

Warning: Attempting to destructure the property 'name' from 'req.body', which is undefined, is causing a TypeError

Currently, I am diving into the world of MERN Stack web development and running into a unique issue. When using Postmate to input data from the body to the database, everything works smoothly when done from the server.js file. However, when attempting the ...

Initiate a project and organize by using mongoose to sort array fields

My mongoose model for a post on a social networking platform is called PostModel: { caption: String, likes: [] // array to store information about users who liked the video, essentially referencing another model comments: [] // array to hold comment object ...

The server is failing to provide the requested data in JSON format

I am struggling with making a simple API call using Node.js as the backend and React in the frontend. My Node.js file is not returning data in JSON format, and I'm unsure of the reason behind this issue. I need assistance with two main things: Why is ...

Consistent Errors with AJAX POST Requests Despite CORS Enablement

Here is a function I have created for making an ajax post request: function POST(url, data) { $.ajax({ 'type' : "POST", 'url' : url, 'data' : data, headers : { 'Access-Cont ...

include the ReactToastify.css file in your project using the import statement

Error in file path C:\Users\User\Documents\GitHub\zampliasurveys_frontend\node_modules\react-toastify\dist\ReactToastify.css:1 ({"Object.":function(module,exports,require,__dirname,__filename,jest){:ro ...

Stopping the interval in Vue before the component is destroyed

I am currently facing an issue with a countdown timer implemented on a component. The timer functions properly, however, I want it to stop counting down once the user navigates away from the page where the component is located. I have attempted to use cl ...

TinyMCE toolbar missing the "hr" option

I am encountering an issue while using TinyMCE as my editor. I have added the plugin as instructed, but I cannot find the "hr" button/option in the editor interface. If anyone has any insights or solutions to this problem, please share! This is how I am ...