AwesCode UI Nuxt Auth Module

JWT authentication module for Nuxt.js applications with Laravel backends.

Overview

@awes-io/nuxt-auth provides comprehensive authentication for Nuxt.js applications, built on top of @nuxtjs/auth-next. It includes pre-built authentication pages, two-factor authentication (2FA), social login support, and seamless integration with Laravel backends.

Key Features:

• JWT token-based authentication
• Two-factor authentication (2FA)
• Social login (OAuth)
• Email verification
• Password reset
• Pre-built auth pages
• Route protection middleware
• Auto token refresh

Quick Start

Installation

yarn add @awes-io/nuxt-auth

Requirements:

• @nuxtjs/axios - For API calls
• @nuxtjs/auth-next - Authentication core (auto-installed)

Basic Setup

// nuxt.config.js
export default {
    modules: [
        '@nuxtjs/axios',
        '@awes-io/nuxt-auth'
    ],

    axios: {
        baseURL: process.env.API_URL || 'http://localhost:8000'
    }
}

Basic Usage

<!-- Protect a page -->
<template>
    <div>
        <h1>Welcome, {{ $auth.user.name }}!</h1>
    </div>
</template>

<script>
export default {
    middleware: 'auth'  // Requires authentication
}
</script>

Documentation

Comprehensive documentation is available in the /docs folder:

• Getting Started - Overview, quick start, features
• Setup - Installation and configuration
• Authentication Flows - Login, register, logout, token management
• Two-Factor Auth - 2FA implementation and setup
• Social Login - OAuth integration (Google, Facebook, GitHub)
• Email Verification - Email confirmation flows
• Password Reset - Forgot password and reset flows
• Protecting Pages - Route protection with middleware
• Accessing User Data - Working with $auth object
• Customization - Override pages and behavior
• API Reference - Complete API documentation

Pre-Built Pages

The module automatically provides these routes:

| Route | Description | |-------|-------------| | /login | Login page with optional social login | | /register | Registration page (if enabled) | | /logout | Logout page | | /forgot-password | Request password reset | | /forgot-password/:token | Set new password | | /verify-email/:userId | Email verification | | /twofactor-verify | 2FA verification | | /login/:service/callback | OAuth callback (if enabled) |

Module Options

export default {
    modules: [
        ['@awes-io/nuxt-auth', {
            register: true,          // Enable registration page
            socialLogin: true,       // Enable social login
            registerUrl: '/signup',  // Custom register URL
            excludeAuthToken: {      // Exclude token from specific requests
                pattern: '!/api/**',
                nonBase: true
            }
        }]
    ]
}

Authentication Strategy

The module uses a custom LaravelJWTScheme with:

Token Configuration:

• Access token: 1 hour
• Refresh token: 2 weeks
• Auto-refresh: Enabled
• Sliding expiration: Yes

Endpoints:

• Login: POST /api/login
• Refresh: POST /api/refresh
• Logout: POST /api/logout
• User: GET /api/me
• 2FA Verify: POST /api/login/twofactor/verify

Common Usage Patterns

Check if User is Logged In

<template>
    <div v-if="$auth.loggedIn">
        <p>Welcome, {{ $auth.user.name }}</p>
    </div>
    <div v-else>
        <nuxt-link to="/login">Please login</nuxt-link>
    </div>
</template>

Protect a Page

<script>
export default {
    middleware: 'auth'  // Require authentication
}
</script>

Manual Login

<script>
export default {
    methods: {
        async login() {
            try {
                await this.$auth.loginWith('twofactor', {
                    data: {
                        email: this.email,
                        password: this.password
                    }
                })
            } catch (error) {
                console.error('Login failed:', error)
            }
        }
    }
}
</script>

Access Current User

<script>
export default {
    computed: {
        currentUser() {
            return this.$auth.user
        },

        isAdmin() {
            return this.$auth.user?.role === 'admin'
        }
    }
}
</script>

Development

Setup Development Environment

# Install dependencies
yarn install

# Development server with hot reload
yarn watch

# Tests in watch mode
yarn test:watch

Build for Production

# Build project
yarn build

# Lint in auto-fix mode
yarn lint:fix

Git Commit Convention

Ensure to write proper commit message according to Git Commit convention

External Resources

• @nuxtjs/auth-next Documentation
• @nuxtjs/axios Documentation
• AwesCode UI Components
• AwesCode UI Vue-MC
• AwesCode UI Nuxt-Laravel