What is the correct way to access $auth in Nuxt with TypeScript?

<script lang="ts">
import LoginAdmin from '@/components/LoginAdmin.vue'
import { Component, Vue } from 'nuxt-property-decorator'
import Auth from "@nuxtjs/auth";

export default class MyStore extends Vue {

public username:string="";
  public password:string="";
  public error:string="";
  async login(){
   
    try {
        await this.$auth.loginWith('local', {
          data: {
          email: this.username,
          password: this.password
          },
        })
console.log(this.$auth.loggedIn)
        // this.$router.push('/')
      } catch (e) {
      console.log(e.message)
      }
  }
}

</script>

I am facing an issue with calling this.$auth inside a class in TypeScript within Nuxt. Any suggestions on how I can properly access it?

typescript

Answer №1

REVELATION

In a stroke of enlightenment, I have uncovered the solution for those facing challenges with this issue. Simply include nuxt-property-decorator in your package.json file and then add @Component to your class declaration like so:

@Component
export default class MyStore extends Vue {

Voila! You are now able to utilize $auth.

Answer №2

If you are working with the Options API in Nuxt along with TypeScript, make sure to implement it as shown below:

<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
  middleware: ['auth'],
  methods: {
    async login(): Promise<void> {
        try {
            let res = await this.$auth.loginWith('google');
            console.log("login result: " + res);
        } catch (err) {
            console.log("login error: " + err);
        }
    }
  }
})
</script>

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

Unable to bring in a TypeScript library that was downloaded from a GitHub fork repository

Currently, I am working on developing a GitHub app using the probot library. However, I have encountered an obstacle as outlined in this particular issue. It seems that probot does not offer support for ESM modules, which are crucial for my app to function ...

javascriptnode.jstypescriptnpm

Failure to trigger the callback for mongoose.connection.once('open') event

Currently, I am in the process of setting up a custom Node server using Next.js. Although I'm utilizing Next.js this time around, it should not affect the outcome. In my previous applications, I always relied on mongoose.connection.once('open&ap ...

javascriptnode.jstypescriptmongoosenext.js

Retrieve the :id parameter from the URL as a numerical value in Node.js using Typescript

Is there a way to directly get the :id param from the URL as a number instead of a string in order to easily pass it on to TypeORM for fetching data based on a specific ID? Currently, I am using the following approach where I have to create an additional ...

node.jstypescripttypeorm

Create an array variable for services in Angular

My goal is to define this user as an array. users = new BehaviorSubject<any>([]); In my component, I am attempting to add the userID to the array. this.Service.users.push(userID); To subscribe to it, I use the following code: this.Service.users.su ...

angulartypescriptobservable

Unlock the Power of Typescript: Using the Browser Console to Access Functions

Scenario Within the file ts/app.ts, the following function exists: function foo() { console.log('Hello Word'); } After successful compilation with Webpack, it generates a file named bundle.js. To load this file, use the following script tag ...

javascripttypescriptwebpack

Angular 2 orderByPipe not displaying any results initially

At first, I thought the reason for not displaying anything initially was due to it not being async and returning an empty array. Everything worked fine without the pipe, but the posts weren't shown on startup. After submitting a post, all the posts ap ...

javascriptangulartypescriptfirebasefirebase-realtime-database

Checking the text both before and after clicking a link by using a method such as content verification

Currently, I am encountering an issue with validating the text on my links before and after they are clicked. If the link text reads "one two" before clicking and remains as "one two" after the click, then the test case passes. However, if the text change ...

typescriptprotractor

Guide on sorting an array within a specific range and extracting a sample on each side of the outcome

I need a simple solution for the following scenario: let rangeOfInterest = [25 , 44]; let input = [10, 20, 30, 40, 50, 60]; I want to extract values that fall between 25 and 44 (inclusive) from the given input. The range may be within or outside the inpu ...

javascriptarraystypescript

Error message in Ionic 2: "Property is not found on type"

Currently, I am working on a project in Ionic 2 and have encountered a stumbling block with a seemingly simple task. My issue lies with a Textbox where I aim to input text that will then be displayed. I found some code on a website (http://www.tizag.com/j ...

javascripttypescriptionic-frameworkionic2

Using GraphQL in React to access a specific field

Here is the code snippet I am working with: interface MutationProps { username: string; Mutation: any; } export const UseCustomMutation: React.FC<MutationProps> | any = (username: any, Mutation: DocumentNode ) => { const [functi ...

javascriptreactjstypescriptgraphql

I keep receiving error code TS2339, stating that property 'total' is not recognized within type any[]

Check out this code snippet. Can you provide some assistance? responseArray: any[] = []; proResponseArray: any[] = []; clearArray(res: any[]): void {res.length = 0; this.response.total = 0; } handleSubmit(searchForm: FormGroup) { this.sho ...

angulartypescript

Ways to set a button as default clicked in an Array

I have a collection that stores languages and their boolean values. My goal is to automatically set buttons to be clicked (active) for each language with a true value in the collection. Whenever a different language is selected by clicking on its respect ...

javascripthtmltypescript

Utilize Array.push to add 2 new rows to a table using Angular 4

I have two arrays that are almost identical, except for two items which are the fakeDates: this.prodotti.push({ idAgreement: this.idAgreement,landingStatus: this.landingStatus, landingType: this.landingType, startDate: this.startDate, expirationDate: thi ...

arraysangulartypescripthtml-table

Tips for ensuring all files are recognized as modules during the transition of an established NodeJS project to TypeScript

I'm diving into TypeScript as a newcomer and I am exploring the process of transitioning a large, existing NodeJS codebase that is compliant with ES2017 to TypeScript. Here's a glimpse at my tsconfig.json: { "compilerOptions": { "mo ...

node.jstypescriptmigration

Mapping an array of objects using dynamically generated column names

If I have an array of objects containing country, state, city data, how can I utilize the .map method to retrieve unique countries, states, or cities based on specific criteria? How would I create a method that accepts a column name and maps it to return ...

javascripttypescript

Tips on preventing the need for null or undefined checks in JS/Typescript singletons that have an initialization function

Is there a way to streamline the process of handling props in an Object literal that is dynamically initialized only once? I'm looking for a pattern that would eliminate the need for repetitive null/undefined checks and throw errors when certain metho ...

javascripttypescriptdesign-patternssingletoncoding-style

Can you explain the variance between Next.js and Create React App?

I've been curious about understanding the distinctions between Next.js and Create React App (CRA). Both aim to simplify our lives when developing front-end applications with React. While researching online, I came across a key difference: Next.js o ...

reactjstypescriptreduxnext.jscreate-react-app

Utilize ngClass for every individual section

I have completed the implementation of all UI components, which are visually appealing. https://i.sstatic.net/hxJQr.png Here is the data structure I am using: public filters = [ { tag: 'Year', label: 'ye ...

cssangulartypescriptng-class

typescript dispatch issue

Whenever I attempt to send this dispatch, it consistently results in the following error message (and the same issue occurs with all my other dispatches): The argument of type '(dispatch: Dispatch) => Promise' is not compatible with a paramet ...

reactjstypescript

Error: React - Unable to access the 'lazy' property because it is undefined

I used a helpful guide on the webpack website to incorporate TypeScript into my existing React App. However, upon launching the app, an error message pops up saying: TypeError: Cannot read property 'lazy' of undefined The version of React being ...

reactjstypescript