Place the token within the Nuxt auth-module

Working on a project using the Nuxt auth-module. The Login API response is structured like this:

data:{
    data:{
        user:{
            bio: null,
            createdAt: "2021-06-29T12:28:42.442Z",
            email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a1cfc0ccc4e1c8cfc7ce8fc2ce">[email protected]</a>",
            id: 1,
            image: null,
            token: "token",
            updatedAt: "2021-06-29T12:28:42.447Z",
            username: "name"
        }
     }
} 

nuxtconfig:

  auth: {
    strategies: {
      local: {
        endpoints: {
          login: { url: 'users/login', method: 'post', propertyName: 'data.user.token' },
          user: { url: 'me', method: 'get', propertyName: 'data' },
          logout: false
        }
      }
    }
  },

Having trouble saving the token in the app. Any suggestions?

After some research, I came across a solution:

  auth: {
    strategies: {
      local: {
        token: {
          property: 'user.token', // /user endpoint API returns user object
          type: 'Token' // if your token type is not Bearer
        },
        user: {
          user: 'user'
        },
        endpoints: {
          login: { url: '/users/login', method: 'post' },
          user: { url: '/user', method: 'get' },
          logout: false
        }
      }
    }
  },

Answer №1

The structure you're looking for is data.data.user and not just data.user. Therefore, in my opinion, you will need to define it in the configuration like this:

auth: {
  strategies: {
    local: {
      user: {
        property: 'data.user', // or possibly 'data.data.user'
        // autoFetch: true
      },
    }
  }
}

This information can be found in the official documentation.

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

I am working on developing a CRUD application using Vue.Js, but I'm facing difficulties in adding new users to

I encountered an error while attempting to insert data into the database. The error message states that "Property or method 'saveUser' is not defined on the instance but referenced during render." Below is the code snippet: <script> impor ...

Combining an Image with a CanvasJS Graph and Generating a Downloadable Image of the Composite

I am attempting to combine an image (a background image for my graph) with my canvasJS chart. Once these elements have been merged on a canvas, I aim to obtain a DataURL of this canvas, enabling me to download an image of it (depicting the graph along wit ...

Creating aesthetically pleasing URLs from data: A simple guide

Can someone help me transform this data into a pretty URL? I am looking for something similar to Appreciate the assistance! :) var x = {data1, data2, data3}; $.ajax({ url: 'https://mywebsite.com/admin/leads/count/', data: x, type: &a ...

What are the best practices for protecting a web application with login and database in the year 2022?

My knowledge of security is outdated and I am looking to update my skills in full stack development. Currently, I am exploring Oauth2, JWT, Next.JS, Auth0, and more, but I am struggling to integrate all these components together. Please bear with me as I m ...

Challenge involving CSS and Javascript for solving puzzles

In my attempt to create a puzzle with 2 rows and 3 columns using CSS and JavaScript, I envision the pieces of the puzzle being black and cut into various shapes. The objective is for users to drag these pieces onto the board in order to complete it. I have ...

Update to react version 18.2.0, router-dom v6, and mui 5 for improved performance

Struggling to convert the following file or code into React's latest version and react-router-dom v6. I attempted it myself but encountered errors related to createBrowserHistory that I couldn't comprehend. My routes are stored in a JSON file and ...

Converting PHP date format to JavaScript date format

I'm struggling to solve this problem $datetime = new Date().toLocaleString(); // returns current date in format 10/21/2021, 14:29:43 How can I generate the desired date format using JavaScript? The output should look like this: 2021-10-21 16:30:01 ...

Exploring PrimeNG's method for expanding and collapsing groups

I'm attempting to incorporate two buttons that can be used to either expand or collapse all the groups in my code utilizing primeNG. Below is the functioning code: PLUNKER <p-dataTable [value]="data" sortField="room" rowGroupMode="subheader" grou ...

Is it feasible to package shared modules into individual files using Browserify?

In my web app, I am using Browserify, Babel, and Gulp to bundle my scripts into a single file. However, when I checked the file size, it was over 3MB which seems excessive to me. Although I'm not entirely sure how Babel and Browserify modify my sourc ...

How can I turn off shadows for every component?

Is it feasible to deactivate shadows and elevation on all components using a configuration setting? ...

Which should take precedence in a URL: the hash or the querystring?

While some online articles suggest there is no standard for the placement of querystring and hash in a URL, we have continued to observe common practices. This leads to the question: what is the best approach for including both a querystring and hash in th ...

Uncovering the inherent worth of an item pulled from a remote location using Vue.js

Currently, I am retrieving a list of countries by making an API call in VueX. The fetched data is then stored in a state using a mutation. Essentially, the countries are saved in a variable known as this.$state.getters.countryList, which can be accessed f ...

ag grid - issue with icons not appearing correctly

<script> import {AgGridVue} from "ag-grid-vue"; import 'ag-grid-enterprise'; import 'ag-grid-community/dist/styles/ag-grid.scss'; import "ag-grid-community/dist/styles/ag-grid.css"; import "ag-grid-community/dist/styles/ag-theme-a ...

Will the useEffect hook re-run whenever the component renders if it includes props in its dependency array?

According to the React documentation on useEffect, it is recommended to include props in the dependency array of useEffect: import { useEffect } from 'react'; import { createConnection } from './chat.js'; function ChatRoom({ roomId }) ...

Implementing setTimeout with the copy button: A guide

How can I implement a setTimeout function in the copy button so that when a user clicks on it, the text will change to "copied" and then revert back to "copy" after 3-4 seconds? Please help me find a solution to this problem and also optimize the JavaScrip ...

Tips for eliminating the backslash introduced by JQuery

Switching back from framework 4.5 to 4.0 caused several issues that needed fixing. One significant change I noticed was that jQuery started escaping double quotes. Is there a way to stop this behavior? I attempted datatest = datatest.replace("\\ ...

WebDriverIO effortlessly converts the text extracted using the getText() command

One of my webpage elements contains the following text: <span class="mat-button-wrapper">Sicherheitsfrage ändern</span> However, when I attempt to verify this text using webdriver, it indicates that it is incorrect assert.strictEqual($(.mat ...

Submit simple text via XMLHttpRequest to an Express server

I am currently facing an issue with making a post XMLHttpRequest to my Express server. Despite attempting to send a string, it seems that I am missing something crucial in my implementation. Client: const sendMessage = () => { const message = "This ...

What could be causing the JSON output to appear in a disordered fashion?

I am attempting to retrieve weather information for 8 different locations. Utilizing a weather API that requires longitude and latitude, it returns JSON output with the weather data for each location. I provided the coordinates in sequential order from 0 t ...

Tips for globally overriding MUIv4 class in JSS for nested themes

Summary: Skip to EDIT2 MUIv4 has generated the following classes for me based on my nested theming: <label class="MuiFormLabel-root-121 MuiInputLabel-root-113 MuiInputLabel-formControl-115 MuiInputLabel-animated-118 MuiInputLabel-shrink-117 M ...