A example application using nuxt-auth.

Overview

Nuxt Auth Example

This is an example project using nuxt-auth, the Nuxt module providing authentication and sessions via NextAuth.js. nuxt-auth wraps NextAuth.js to offer the reliability & convenience of a 12k star library to the nuxt 3 ecosystem with a native developer experience (DX).

The deployed version can be found here.

sidebase-preview-for-light

Setup

To run this locally:

# install dependencies
npm install

# run dev server
npm run dev

# build production
npm run build

# start production build
node .output/server/index.mjs

NOTE: For full functionality you'll need to add your own github oauth app client id and client secret in the NuxtAuthHandler. See the next section for more on this and other configuration.

Environment variables

The test deployment is done via docker-compose with nginx-certbot image which automatically issues certificate for the domain. Please don't forget to create .env file in the project root, which will contain:

  • GITHUB_CLIENT_*
  • NUXT_SECRET - A random string used to generate authentication tokens
  • ORIGIN - The URL of your authentication api (should be https://example.com, this no trailing slash)
  • CERTBOT_* - NuxtAuth requires a SSL certificate to run in production. We use Certbot to automatically generate these
    • CERTBOT_DOMAIN - The domain for which the Certbot should register a certificate
    • CERTBOT_EMAIL - The email under which the domain certificate will be registered
You might also like...
Nuxt authentication demo

Nuxt authentication demo

Authenticated server-side rendering with Nuxt 3 and Firebase 9

Authenticated server-side rendering with Nuxt 3 and Firebase 9

Vue plugin for using Microsoft Authentication Library (MSAL)

vue-msal Wrapper of MSAL.js (Microsoft Authentication Library) for usage in Vue. The vue-msal library enables client-side vue applications, running in

vue-authenticate is easily configurable solution for Vue.js that provides local login/registration as well as Social login using Github, Facebook, Google and other OAuth providers.

vue-authenticate is easily configurable solution for Vue.js that provides local login/registration as well as Social login using Github, Facebook, Google and other OAuth providers.

A simple authentication and authorization library for Vue.js using typescript

🔑 Vue Auth Plugin A simple authentication and authorization library for Vue.js using typescript Inspired in @websanova/vue-auth Pull requests and iss

A Vue.js Vuex module for authentication using Amazon AWS Cognito

vue-auth-cognito This small library serves as a wrapper of Amazon Cognito for Vuex. As pointed out in #65 the aws-amplify/amplify-js project officiall

A simple app using Firebase Auth to authenticate users, and using Vuex to manage state.

Firebase Auth for Vite This project was created with Vite. This is a simple app using Firebase Auth to authenticate users, and using Vuex to manage st

Nuxt-Crud-Auth - Simple CRUD App for tickets with authentification/login
Nuxt-Crud-Auth - Simple CRUD App for tickets with authentification/login

Nuxt Crud Auth Simple CRUD App for tickets with authentification/login Step to l

⚡ Vue - Laravel - Example is a simple example to set Vue with Laravel.

创造不息,交付不止 Vue - Laravel - Example Vue - Laravel - Example is a simple example to set Vue 2.0 with Laravel 5.1. Install Clone the project to local git

🙋🏽‍♂️ Domain-Driven Design & Nuxt - Using Nuxt Modules to structure large Nuxt Apps

🙋🏽‍♂️ Domain-Driven Design & Nuxt - Using Nuxt Modules to structure large Nuxt Apps ⚡️ Talk at NUXT NATION 2021 by Anton Reindl In this talk I will

A vue boiler plate with state management, vuex, vue-router that can be backed by a laravel restful api using jwt auth
A vue boiler plate with state management, vuex, vue-router that can be backed by a laravel restful api using jwt auth

Laravel 6 (LTS) Vue.js Frontend Boilerplate A Vue.js Frontend starter project kit template/boilerplate with Laravel 6 Backend API support. Features Re

A vue boiler plate with state management, vuex, vue-router that can be backed by a laravel restful api using jwt auth
A vue boiler plate with state management, vuex, vue-router that can be backed by a laravel restful api using jwt auth

Laravel 6 (LTS) Vue.js Frontend Boilerplate A Vue.js Frontend starter project kit template/boilerplate with Laravel 6 Backend API support. Features Re

vue-auth is easily configurable solution for Vue.js that provides local login/registration as well as Social login using Github, Facebook, Google and other OAuth providers.

vue-auths vue-auth is easily configurable solution for Vue.js that provides local login/registration as well as Social login using Github, Facebook, G

Example using Nuxt 3

Example using Nuxt 3

Breeze-nuxt - An application / authentication starter kit frontend in Nuxt.js for Laravel Breeze

Laravel Breeze - Nuxt.js Edition Introduction This repository is an implementing

Fcl-nuxt-starter - FCL plugin + full stack Nuxt application starter template
Fcl-nuxt-starter - FCL plugin + full stack Nuxt application starter template

How to use the Flow Client Library (FCL) with Nuxt Access the FCL instance from

An exemplary real-world application built with Vue.js, Vuex, axios and different other technologies. This is a good example to discover Vue for beginners.
An exemplary real-world application built with Vue.js, Vuex, axios and different other technologies. This is a good example to discover Vue for beginners.

Vue.js codebase containing real world examples (CRUD, auth, advanced patterns, etc) that adheres to the RealWorld spec and API. Project demo is availa

Vue 3 Typescript example with Axios: CRUD application with Vue Router
Vue 3 Typescript example with Axios: CRUD application with Vue Router

Vue 3 Typescript example with Axios & Vue Router: Build CRUD App Build a Vue.js 3 Typescript example to consume REST APIs, display and modify data usi

Comments
  • Polish & Expand show-case to show off more features

    Polish & Expand show-case to show off more features

    Describe the feature

    Some features exist that are not yet part of the demo:

    • [ ] getToken
    • [ ] direct signIn with provider, e.g., via signIn('github') or signIn('credentials', {username: 'a', password: 'b'})

    These should be show-cased as well.

    Polishing:

    [1]: bar that flickers when logged in: image

    Additional information

    No response

    enhancement 
    opened by BracketJohn 5
  • Investigate long loading times

    Investigate long loading times

    Environment

    No response

    Reproduction

    No response

    Describe the bug

    After deploying https://nuxt-auth-example.sidebase.io we noticed that the initial loading time is very high. This issue is to track down the reason and fix it, or add a loading indicator for when the page has not loaded yet.

    Additional context

    No response

    Logs

    No response

    bug 
    opened by zoey-kaiser 3
Owner
sidebase
High quality open-source software to kick-start your development
sidebase
vue-auth is easily configurable solution for Vue.js that provides local login/registration as well as Social login using Github, Facebook, Google and other OAuth providers.

vue-auths vue-auth is easily configurable solution for Vue.js that provides local login/registration as well as Social login using Github, Facebook, G

Chantouch 1 Aug 9, 2020
Vue auth plugin with typescript

?? Vue Auth Plugin A simple authentication and authorization library for Vue.js using typescript Inspired in @websanova/vue-auth Pull requests and iss

d0wHc3r 57 Nov 10, 2022
Vue Firebase auth ui user management frontend pack version 3

Vue Firebase auth ui user management frontend pack version 3

Dr. Takeyuki Ueda 0 Oct 10, 2021
a simple Vue auth verify plugin.

vue-authplugin an elegant view auth control plugin, support directive and prototype methods. Installation $ npm install vue-authplugin Demo import aut

null 6 Jul 30, 2020
Vue plugin for easily managing your app's auth state

vue-auth Vue plugin for easily managing your app's auth state This is a work in progress and the API may change without

Wade Urry 15 Feb 7, 2018
Jwt Auth library for Vue.js.

Vue.js token based authentication plugin. Supports simple token based and JSON Web Tokens (JWT) authentication.

Ganilla Grace 1 Sep 30, 2017
Vue Firebase Auth: A simple light-weight authentication library for Vue.

Vue Firebase Auth A simple light-weight authentication library for Vue. Installation npm install @service-paradis/vue-firebase-auth Usage Basic Config

Alexandre Paradis 0 Apr 29, 2021
Vue 3 JWT Refresh Token with Axios Interceptors, Vuex and Vue Router example

Vue 3 JWT Refresh Token with Axios example For instruction, please visit: Vue 3 JWT Refresh Token with Axios example Vue 3 Authentication & Authorizat

null 36 Nov 16, 2022
A sample application with authentication setup using firebase.

vue-auth (currently, firebase) A sample application with authentication setup using firebase. Project setup Create a firebase account Enable Google SS

Jackson 1 Dec 6, 2021
Modular security for Vue, Vuex, Vue-Router and Nuxt

vue-kindergarten Introduction vue-kindergarten is a plugin for VueJS 2.0 that integrates kindergarten into your VueJS applications. It helps you to au

Jiří Chára 309 Aug 20, 2022