---

Authentication

Welcome to the Vue3 Authentication documentation. This guide will walk you through the step-by-step process of setting up and using the Vue3 Use Authentication package in your Vue.js project.

Step 1: Installation

To begin, you need to install the Vue3 Use Authentication package. You can do this using npm or yarn:

npm install @resourge/vue3-use-authentication
# or
yarn add @resourge/vue3-use-authentication

Step 2: Configuration

App.tsx Configuration

In your main App.vue file, configure the AuthenticationProvider component. This component is responsible for managing authentication state throughout your application.

<script lang="ts" setup>
import { AuthenticationProvider } from '@resourge/vue3-use-authentication';
</script>

<template>
  <AuthenticationProvider :localStorageSessionKey="SESSION_STORAGE_KEY" encrypted :encryptedSecret="SOME_RANDOM_STRING">
    <RouterView />
  </AuthenticationProvider>
</template>

Replace SESSION_STORAGE_KEY and SOME_RANDOM_STRING with your actual session storage key and encrypted secret respectively.

Profile and Permissions Configuration

Define your user Profile and Permissions in your application. You can use TypeScript interfaces or classes to define your user profile and permissions.:

User.ts

export class Profile {
  id: string;
  name: string;
  email: string;
  
  constructor(id: string, name: string, email: string) {
    this.id = id;
    this.name = name;
    this.email = email;
  }
}

useAuthentication.ts

import { useAuthentication as useAuthenticationBase } from '@resourge/vue3-use-authentication'
import Permissions from '../permissions/Permissions' // Replace with your actual file path from your permissions file
import { Profile } from './User' // Replace with your actual file path from you user profile

// Use the useAuthenticationBase function to access the authentication
export default function useAuthentication(){
    return useAuthenticationBase<Profile, Permissions>()
}

Permissions.ts

export default class Permissions {
  isAdmin: boolean;
  isUser: boolean;

  constructor(roles: string[] = []) {
    // Define your permissions here based on the user roles
    // Complete the implementation based on your application's requirements
  }
}

usePermissions.ts

import { usePermissions as usePermissionsBase } from '@resourge/vue3-use-authentication'
import Permissions from '../permissions/Permissions' // Replace with your actual file path from your permissions file
import { Profile } from './User' // Replace with your actual file path from you user profile

// Use the usePermissionsBase function to access the permissions
export default function usePermissions(){
  return usePermissionsBase<Profile, Permissions>()
}

Step 3: Usage from useAuthentication

With the package installed and configured, you can now use the authentication and permissions features in your Vue components.

import { defineComponent } from 'vue';
import useAuthentication from './shared/authentication/user/usePermissions'; // Replace with your actual file path

export default defineComponent({
  setup() {
    const { isAuthenticated, user } = useAuthentication();

    // Use isAuthenticated and user in your component

    return {
      isAuthenticated,
      user
    };
  }
});

Step 4: Usage from usePermissions

With the package installed and configured, you can now use the authentication and permissions features in your Vue components.

import { defineComponent } from 'vue';
import usePermissions from './shared/authentication/user/usePermissions'; // Replace with your actual file path

export default defineComponent({
  setup() {
    const { isUser } = usePermissions();
    // Use hasPermission in your component
    return {
      isUser
    };
  }
});

Replace usePermissions with your actual file path and function name.

Conclusion

Congratulations! You’ve successfully set up and configured the Vue3 Use Authentication package in your Vue.js project. You can now start building authentication and authorization features with ease.

For more detailed information and advanced usage, please refer to the Vue3 Use Authentication documentation.

---