Appearance

Authentication Schemes ​

Overview ​

Authentication schemes in Nuxt.js define how the application authenticates users with the backend API. The Admin Frontend uses custom authentication schemes built on top of @nuxtjs/auth-next to handle different authentication flows including regular user authentication and external user authentication.

Scheme Location ​

All authentication schemes are located in the schemes/ directory and are registered in nuxt.config.js under the auth module configuration.

Available Schemes ​

Custom Scheme ​

  • File: schemes/customScheme.js
  • Purpose: Main authentication scheme for regular workspace users
  • Features: Email/password login, token management, workspace handling

External Scheme ​

  • File: schemes/external.js
  • Purpose: Authentication scheme for external/guest users
  • Features: OTP-based authentication, limited access, workspace restrictions

Scheme Structure ​

Authentication schemes follow the Nuxt.js auth-next scheme pattern:

javascript
export default class CustomScheme {
  constructor(auth, options) {
    // Initialize scheme
  }
  
  mounted() {
    // Called when auth module is mounted
  }
  
  login(endpoint, data) {
    // Handle login
  }
  
  logout(endpoint) {
    // Handle logout
  }
  
  fetchUser(endpoint) {
    // Fetch user data
  }
  
  reset() {
    // Reset authentication state
  }
}

Scheme Configuration ​

Schemes are configured in nuxt.config.js:

javascript
auth: {
  strategies: {
    custom: {
      scheme: '~/schemes/customScheme',
      endpoints: {
        login: { url: '/login', method: 'post' },
        logout: { url: '/logout', method: 'post' },
        user: { url: '/user', method: 'get' }
      }
    },
    external: {
      scheme: '~/schemes/external',
      endpoints: {
        login: { url: '/external/login', method: 'post' },
        logout: { url: '/external/logout', method: 'post' },
        user: { url: '/external/user', method: 'get' }
      }
    }
  }
}

Scheme Features ​

Token Management ​

  • Token storage (cookies/localStorage)
  • Token refresh
  • Token expiration handling
  • Automatic token injection

User Management ​

  • User data fetching
  • User state management
  • Workspace context
  • Permission handling

Session Management ​

  • Session creation
  • Session validation
  • Session expiration
  • Cross-tab synchronization

Usage ​

In Components ​

javascript
// Login
await this.$auth.loginWith('custom', {
  data: {
    email: '[email protected]',
    password: 'password'
  }
})

// Logout
await this.$auth.logout()

// Check authentication
if (this.$auth.loggedIn) {
  // User is authenticated
}

// Get user
const user = this.$auth.user

In Middleware ​

javascript
export default function ({ $auth, redirect }) {
  if (!$auth.loggedIn) {
    return redirect('/login')
  }
}

Integration Points ​

  • Login Pages: Scheme login methods
  • Middleware: Authentication checks
  • API Calls: Token injection
  • Store: User state management

Notes for Development ​

  • Schemes extend auth-next base scheme
  • Token storage configurable
  • User data cached
  • Automatic token refresh
  • Error handling required