Home / Vue.js / Examples

Vue.js 2.5 with vue-cli v3 including authentication with auth0 by Dominik Angerer, Storyblok

Auth0 Vue Make sure to exchnage the auth0 information with your own in the auth.js. A Vue.js Demo Application which uses Auth0 for Authentication You
Information
Category: Vue.js / Examples
Watchers: 1
Star: 38
Fork: 13
Last update: May 29, 2023
Resource links
https://www.storyblok.com/tp/how-to-auth0-vuejs-authentication
https://github.com/DominikAngerer/auth0-vue

Auth0 Vue

Make sure to exchnage the auth0 information with your own in the auth.js.

A Vue.js Demo Application which uses Auth0 for Authentication

Final Result

You can follow the full tutorial on Storyblok or simply use this as a boilerplate for your applications.

The tutorial for this repository...

can be found on Storyblok. It guides you through the following steps:

How to use

  1. Checkout this repository
  2. Exchange your Auth0 client settings in src/auth.js
  3. Navigate into the project folder
  4. Execute npm install or yarn to install dependencies
  5. Start application: npm run serve

Feedback

I'm looking forward to receive your feedback, best place would definitly be in the comment section at the bottom of the tutorial on Storyblok.

What to expect

This application/tutorial gives you a quick feeling of how to use Auth0 with your Vue.js application, you can also use it as a starting point for your projects.

0 Open More issues
Closed

script doesn't work when build'ed

Hey Dominik,

Im having problems, when i build this repo, and try to use it.

When i enter the url for the site http://test.rasmusp.com i get an error "Not Found - the requested URL /callback was not found on this server." and doesn't redirect to the login screen

I have changed the redirectUri in the script and the allow urls on auth0. I works fine, when i run "npm run serve" - can you help me to why it doesn't work ?

opened Nov 15, 2018 by djrasmusp 1
Closed

Logout loop

Thanks so much for putting this together! It's frustrating that all of the official docs I've tried to follow so far haven't worked.

One issue, I can't actually log out with the tutorial. It does delete from local storage, but then webAuth.authorize() fires and the user is logged in again.

To fix I needed to:

  1. Add a logout route in the Auth0 dashboard
  2. Change the logout function to be:
logout() {
  return new Promise((resolve, reject) => {
    localStorage.removeItem('access_token')
    localStorage.removeItem('id_token')
    localStorage.removeItem('expires_at')
    localStorage.removeItem('user')
    webAuth.logout({
      returnTo: 'http://localhost:8080/', // the logout route added to dashboard goes here
      clientID: '...', // same clientID in the constructor
    })
})

I don't know if you're still updating this, but I'd be happy to make a PR with those changes.

help wanted 
opened Sep 1, 2018 by nicholasshirley 1
Closed

Update logout

Update logout function to take client ID and redirect location per docs here: https://auth0.com/docs/libraries/auth0js/v9#logout

Note: User must add redirectTo value in "Allowed Logout URLs" in the dashboard or they will get an error.

Issue ref: #2

opened Sep 1, 2018 by nicholasshirley 0
Closed

Update auth0-js to version >9.3.0

Known vulnerability -> update in package.json and package-lock

opened Apr 24, 2018 by DominikAngerer 0

Contents

    storyblok Storyblok vuejs-boilerplate - Integrates Storyblok's Component System, allows to create editable Websites.
    HarunMbaabu Adding Headless CMS to NextJS like a Pro, this repository contains code examples and guide on how to integrate Storyblok, a headless CMS to NextJS.
    mikepenz Blog implemented via the Storyblok Kotlin Multiplatform SDK (Android, JVM)
    alexjoverm Vite best-practise example on creating a frontend library for Vue, React and Svelte
    sahilpabale A CLI-based Notes App built using TypeScript, MongoDB, and Auth0.
    spatie Associate users with roles and permissions
    danestves An Auth0Strategy for Remix Auth, based on the OAuth2Strategy
    m0dch3n vue-cli-plugin-cordova - Vue CLI 3 Plugin to add Cordova easily to your project
    Angarsk8 App example with JWT Authentication Phoenix Framework demo @Angarsk8App example with JWT Authentication developed with Phoenix Framework, Vue and Vue Router (demo) by @Angarsk8
    aofdev vue-firebase-auth-vuex A Vue2 Firebase Authentication with Vuex and support Progressive Web Apps
    coluck The authentication-server is a node app that handles user registration, authentication & authorization with JWT.
    delay Feathers and Vue 2.0 Blog Admin Demo delayFeathers and Vue 2.0 Blog Admin Demo Demo for using Feathers with Vue 2.0. It includes authentication, vue-router, vue-infinite-loading and roles by delay
    pennersr Integrated set of Django applications addressing authentication, registration, account management as well as 3rd party (social) account authentication.
    saanuregh Windows Hello™ style facial authentication for Linux written in Rust
    laravel Laravel Fortify is a frontend agnostic authentication backend for Laravel
    codazoda A template that does basic authentication in PHP
    codetrial vue-cli-plugin-element - Vue CLI 3 Plugin to build an enterprise application with element-ui in seconds
    vuejs vue-cli - Simple CLI for scaffolding Vue.js projects.
    tymondesigns 🔐 JSON Web Token Authentication for Laravel & Lumen
    invertase A React Native library providing support for Apple Authentication on iOS.
    codetrial element-admin Online Demoelement-admin - A dead simple but powerful vue admin with Vue CLI 3 and element-ui.Online Demo
    Share this repo

    Related Repos


    Examples
    19
    A minimal template that hooks up Vue 3, Pinia (Vuex 5), Quasar, Vue Router 4, and TypeScri...
    CharlieDigital Vue3, Vite, Pinia (Vuex 5), Vue Router 4, Quasar, TypeScript Starter Template This repo contains a starter template that connects the following pieces
     
    Examples
    3
    my cd collection a way for me to discover vue.js
    apoleon33 cdtheque Project setup yarn install Compiles and hot-reloads for development yarn serve Compiles and minifies for production yarn build Lints and f
     
    Examples
    3
    varlet nuxt3 example
    varletjs Nuxt 3 Minimal Starter We recommend to look at the documentation. Setup Make sure to install the dependencies yarn install Development Start the devel
     
    Examples
    15
    Test vue typescript - Hotel views
    joe0zf vue test https://test-vue-typescript.vercel.app/ Project setup npm install Compiles and hot-reloads for development npm run serve Compiles and minif
     
    Examples
    1.4k
    Enterprise Design System
    Tencent TDesign 是一套完整的 企业级设计体系，拥有基于 Vue / React / 小程序 等技术栈的组件库解决方案。 用于构建 设计统一 / 跨端多技术栈 的前端应用时，TDesign 更有优势。 仓库 TDesign 是一个 multi-repo， TDesign 有如下代码仓库： 桌面端组件库
     
    Examples
    19
    VueJS with Atomic Design exemple
    Karytonn VueJS with Atomic Design Build Setup # install dependencies $ npm install # serve with hot reload at localhost:3000 $ npm run dev # build for produc
     
    Examples
    8
    URL shortener using GitHub Pages and Firebase
    gustavwilliam Shortify URL shortener using GitHub Pages and Firebase Project setup yarn install Compiles and hot-reloads for development yarn serve Compiles and m
     
    Examples
    49
    Discuss with me 💬
    Atinux Discuss with Atinux Demo of using Nuxt 3 with GitHub authentication and creating issues with real-time updates. See it live on https://discuss.atinux.
     
    Examples
    3
    Readily Configured Starter Template to quickly setup Jetstream Inertia Generator
    savannabits (Laravel + Vite.js + Tailwindcss + Vue3) + JIG CRUD Generator Intro This is a starter template with a ready-made setup of Jetstream Inertia Generator
     
    Examples
    21
    nuxt3 demo
    Johnson-hd Nuxt3 Demo nuxt3 demo 集成功能列表 Saas ESLint + Prettier Element Plus I18n 数据库 多环境部署 开发 导入 init.sql $ yarn install $ yarn dev # 健康检查 $ curl http://localho
     
    Examples
    10
    Countdown timer with Flip Animation for Vue 3.x
    coskuncayemre vue3-flip-countdown Customize Countdown timer with Flip Animation for Vue 3.x vue3-flip-countdown.netlify.app Demo Table of contents Demo Installation
     
    Examples
    3
    🌧 📱VueJS Weather App that uses the OpenWeather API
    GillParm vue-weather uses OpenWeather API to search and display weather from accross the globe Demo Here by Parmandeep Gill Project setup npm install Compiles
     
    Examples
    3
    AdminLTE 3 theme integration with Vue 3
    carlospccarvalho webapp Project setup npm install Compiles and hot-reloads for development npm run serve Compiles and minifies for production npm run build Lints an
     
    Examples
    3
    sample app of nuxt3
    tessai9 Nuxt 3 Minimal Starter We recommend to look at the documentation. Setup Make sure to install the dependencies yarn install Development Start the devel
     
    Examples
    4
    Vuejs Hotels App with Vue Router and Vuelidate
    Reengen-FullStack-Development-Bootcamp Vue Hotels App This is a solution to Reengen Full Stack Bootcamp with Vuejs and Nodejs Week-2 Project. It is built with Vuejs by using Vue CLI, Vue Ro