a vue3 auth plugin that fetches and stores jwt periodically in typescript

Assuming you have a backend API for authentication that returns a JWT token upon successful authentication, here is an example of how you can create a Vue 3 plugin that handles fetching and storing the JWT token periodically using TypeScript.

Create a new file auth.ts in your project's /src folder with the following code:


index.ts
import { App, Plugin } from 'vue';

interface JwtPayload {
  // Define the JWT payload type here
}

class AuthPlugin {
  private token?: string;
  private readonly refreshTokenIntervalId: number | undefined;

  constructor() {
    // Set up the JWT refresh interval
    this.refreshTokenIntervalId = setInterval(() => this.refreshToken(), 10 * 60 * 1000); // Every 10 minutes
  }

  public static install(app: App): void {
    const plugin = new AuthPlugin();
    app.config.globalProperties.$auth = plugin;
  }

  public async login(username: string, password: string): Promise<void> {
    // Make an API call to authenticate the user and get the JWT token
    const response = await fetch('/api/authenticate', {
      method: 'POST',
      body: JSON.stringify({ username, password }),
      headers: { 'Content-Type': 'application/json' },
    });
    const { token, payload }: { token: string; payload: JwtPayload } = await response.json();

    // Store the JWT token
    this.token = token;

    // Save the JWT payload in localStorage for quick access
    localStorage.setItem('jwt_payload', JSON.stringify(payload));
  }

  public async logout(): Promise<void> {
    // Clear the JWT token
    this.token = undefined;

    // Clear the JWT payload from localStorage
    localStorage.removeItem('jwt_payload');
  }

  public getToken(): string | undefined {
    return this.token;
  }

  private async refreshToken(): Promise<void> {
    if (!this.token) return;

    // Make an API call to refresh the JWT token
    const response = await fetch('/api/refresh-token', {
      method: 'POST',
      headers: {
        Authorization: `Bearer ${this.token}`,
      },
    });
    const { token }: { token: string } = await response.json();

    // Store the new JWT token
    this.token = token;
  }
}

export default AuthPlugin as unknown as Plugin;
1855 chars
67 lines

Then import the plugin in your main.ts file and use the app.use() method to install it:


index.ts
import { createApp } from 'vue';
import AuthPlugin from './auth';

const app = createApp(App);
app.use(AuthPlugin);
app.mount('#app');
135 chars
7 lines

You can now use the $auth global property in your Vue components to access the authentication methods and the current JWT token:


index.ts
import { defineComponent } from 'vue';

export default defineComponent({
  methods: {
    async login(username: string, password: string): Promise<void> {
      await this.$auth.login(username, password);
    },

    async logout(): Promise<void> {
      await this.$auth.logout();
    },
  },

  computed: {
    isLoggedIn(): boolean {
      return !!this.$auth.getToken();
    },
  },
});
391 chars
20 lines

This implementation periodically refreshes the JWT token every 10 minutes as long as the user is logged in. You can customize the refresh interval by changing the interval time in the AuthPlugin constructor.

similar typescript code snippets

create vue 3 wrapper component in typescript

create vue 3 plugin in typescript

vue3 quasar in typescript

vue3 table in typescript

vite server side rendering in typescript

check if enum is valid in typescript

create a function that calculates volume of a cube in typescript

create a generic interface in typescript

store generic into localstorage in typescript

split a provided array into chunks of a provided size in javascript in typescript

related categories

typescript

auth