├── static
    ├── favicon.ico
    └── README.md
├── .gitignore
├── middleware
    ├── guest.js
    └── README.md
├── pages
    ├── index.vue
    ├── README.md
    ├── profile.vue
    ├── login.vue
    └── register.vue
├── store
    ├── index.js
    └── README.md
├── components
    ├── README.md
    ├── Notification.vue
    └── Navbar.vue
├── layouts
    ├── default.vue
    └── README.md
├── .editorconfig
├── assets
    └── README.md
├── plugins
    └── README.md
├── README.md
├── .eslintrc.js
├── package.json
└── nuxt.config.js


/static/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/do-community/nuxt-auth-app/HEAD/static/favicon.ico


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # dependencies
 2 | node_modules
 3 | 
 4 | # logs
 5 | npm-debug.log
 6 | 
 7 | # Nuxt build
 8 | .nuxt
 9 | 
10 | # Nuxt generate
11 | dist
12 | 


--------------------------------------------------------------------------------
/middleware/guest.js:
--------------------------------------------------------------------------------
1 | export default function ({
2 |   store,
3 |   redirect
4 | }) {
5 |   if (store.state.auth.loggedIn) {
6 |     return redirect('/')
7 |   }
8 | }
9 | 


--------------------------------------------------------------------------------
/pages/index.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <section class="section">
3 |     <div class="container">
4 |       <h1 class="title">Nuxt Auth</h1>
5 |     </div>
6 |   </section>
7 | </template>
8 | 


--------------------------------------------------------------------------------
/store/index.js:
--------------------------------------------------------------------------------
 1 | export const getters = {
 2 |   isAuthenticated(state) {
 3 |     return state.auth.loggedIn
 4 |   },
 5 | 
 6 |   loggedInUser(state) {
 7 |     return state.auth.user
 8 |   }
 9 | }
10 | 


--------------------------------------------------------------------------------
/components/README.md:
--------------------------------------------------------------------------------
1 | # COMPONENTS
2 | 
3 | The components directory contains your Vue.js Components.
4 | Nuxt.js doesn't supercharge these components.
5 | 
6 | **This directory is not required, you can delete it if you don't want to use it.**
7 | 


--------------------------------------------------------------------------------
/components/Notification.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="notification is-danger">
 3 |     {{ message }}
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 |   name: 'Notification',
10 |   props: ['message'],
11 | };
12 | </script>
13 | 


--------------------------------------------------------------------------------
/layouts/default.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <Navbar/>
 4 |     <nuxt/>
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script>
 9 | import Navbar from '~/components/Navbar';
10 | 
11 | export default {
12 |   components: {
13 |     Navbar,
14 |   },
15 | };
16 | </script>
17 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | # editorconfig.org
 2 | root = true
 3 | 
 4 | [*]
 5 | indent_size = 2
 6 | indent_style = space
 7 | end_of_line = lf
 8 | charset = utf-8
 9 | trim_trailing_whitespace = true
10 | insert_final_newline = true
11 | 
12 | [*.md]
13 | trim_trailing_whitespace = false
14 | 


--------------------------------------------------------------------------------
/layouts/README.md:
--------------------------------------------------------------------------------
1 | # LAYOUTS
2 | 
3 | This directory contains your Application Layouts.
4 | 
5 | More information about the usage of this directory in the documentation:
6 | https://nuxtjs.org/guide/views#layouts
7 | 
8 | **This directory is not required, you can delete it if you don't want to use it.**
9 | 


--------------------------------------------------------------------------------
/pages/README.md:
--------------------------------------------------------------------------------
1 | # PAGES
2 | 
3 | This directory contains your Application Views and Routes.
4 | The framework reads all the .vue files inside this directory and creates the router of your application.
5 | 
6 | More information about the usage of this directory in the documentation:
7 | https://nuxtjs.org/guide/routing
8 | 


--------------------------------------------------------------------------------
/assets/README.md:
--------------------------------------------------------------------------------
1 | # ASSETS
2 | 
3 | This directory contains your un-compiled assets such as LESS, SASS, or JavaScript.
4 | 
5 | More information about the usage of this directory in the documentation:
6 | https://nuxtjs.org/guide/assets#webpacked
7 | 
8 | **This directory is not required, you can delete it if you don't want to use it.**
9 | 


--------------------------------------------------------------------------------
/plugins/README.md:
--------------------------------------------------------------------------------
1 | # PLUGINS
2 | 
3 | This directory contains your Javascript plugins that you want to run before instantiating the root vue.js application.
4 | 
5 | More information about the usage of this directory in the documentation:
6 | https://nuxtjs.org/guide/plugins
7 | 
8 | **This directory is not required, you can delete it if you don't want to use it.**
9 | 


--------------------------------------------------------------------------------
/static/README.md:
--------------------------------------------------------------------------------
 1 | # STATIC
 2 | 
 3 | This directory contains your static files.
 4 | Each file inside this directory is mapped to /.
 5 | 
 6 | Example: /static/robots.txt is mapped as /robots.txt.
 7 | 
 8 | More information about the usage of this directory in the documentation:
 9 | https://nuxtjs.org/guide/assets#static
10 | 
11 | **This directory is not required, you can delete it if you don't want to use it.**
12 | 


--------------------------------------------------------------------------------
/middleware/README.md:
--------------------------------------------------------------------------------
 1 | # MIDDLEWARE
 2 | 
 3 | This directory contains your Application Middleware.
 4 | The middleware lets you define custom function to be ran before rendering a page or a group of pages (layouts).
 5 | 
 6 | More information about the usage of this directory in the documentation:
 7 | https://nuxtjs.org/guide/routing#middleware
 8 | 
 9 | **This directory is not required, you can delete it if you don't want to use it.**
10 | 


--------------------------------------------------------------------------------
/store/README.md:
--------------------------------------------------------------------------------
 1 | # STORE
 2 | 
 3 | This directory contains your Vuex Store files.
 4 | Vuex Store option is implemented in the Nuxt.js framework.
 5 | Creating a index.js file in this directory activate the option in the framework automatically.
 6 | 
 7 | More information about the usage of this directory in the documentation:
 8 | https://nuxtjs.org/guide/vuex-store
 9 | 
10 | **This directory is not required, you can delete it if you don't want to use it.**
11 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # nuxt-auth
 2 | 
 3 | > Nuxt.js project
 4 | 
 5 | ## Build Setup
 6 | 
 7 | ``` bash
 8 | # install dependencies
 9 | $ npm install # Or yarn install
10 | 
11 | # serve with hot reload at localhost:3000
12 | $ npm run dev
13 | 
14 | # build for production and launch server
15 | $ npm run build
16 | $ npm start
17 | 
18 | # generate static project
19 | $ npm run generate
20 | ```
21 | 
22 | For detailed explanation on how things work, checkout the [Nuxt.js docs](https://github.com/nuxt/nuxt.js).
23 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: {
 4 |     browser: true,
 5 |     node: true
 6 |   },
 7 |   parserOptions: {
 8 |     parser: 'babel-eslint'
 9 |   },
10 |   extends: [
11 |     // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
12 |     // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
13 |     'plugin:vue/essential'
14 |   ],
15 |   // required to lint *.vue files
16 |   plugins: [
17 |     'vue'
18 |   ],
19 |   // add your custom rules here
20 |   rules: {}
21 | }
22 | 


--------------------------------------------------------------------------------
/pages/profile.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <section class="section">
 3 |     <div class="container">
 4 |       <h2 class="title">My Profile</h2>
 5 | 
 6 |       <div class="content">
 7 |         <p>
 8 |           <strong>Username:</strong>
 9 |           {{ loggedInUser.username }}
10 |         </p>
11 |         <p>
12 |           <strong>Email:</strong>
13 |           {{ loggedInUser.email }}
14 |         </p>
15 |       </div>
16 |     </div>
17 |   </section>
18 | </template>
19 | 
20 | <script>
21 | import { mapGetters } from 'vuex';
22 | 
23 | export default {
24 |   middleware: 'auth',
25 | 
26 |   computed: {
27 |     ...mapGetters(['loggedInUser']),
28 |   },
29 | };
30 | </script>
31 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "nuxt-auth",
 3 |   "version": "1.0.0",
 4 |   "description": "Nuxt.js project",
 5 |   "author": "Chimezie Enyinnaya <meziemichael@gmail.com>",
 6 |   "private": true,
 7 |   "scripts": {
 8 |     "dev": "nuxt",
 9 |     "build": "nuxt build",
10 |     "start": "nuxt start",
11 |     "generate": "nuxt generate",
12 |     "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
13 |     "precommit": "npm run lint"
14 |   },
15 |   "dependencies": {
16 |     "@nuxtjs/auth": "^4.5.1",
17 |     "@nuxtjs/axios": "^5.3.1",
18 |     "nuxt": "^1.0.0"
19 |   },
20 |   "devDependencies": {
21 |     "babel-eslint": "^8.2.1",
22 |     "eslint": "^4.15.0",
23 |     "eslint-friendly-formatter": "^3.0.0",
24 |     "eslint-loader": "^1.7.1",
25 |     "eslint-plugin-vue": "^4.0.0"
26 |   }
27 | }
28 | 


--------------------------------------------------------------------------------
/components/Navbar.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <nav class="navbar is-light">
 3 |     <div class="container">
 4 |       <div class="navbar-brand">
 5 |         <nuxt-link class="navbar-item" to="/">Nuxt Auth</nuxt-link>
 6 | 
 7 |         <button class="button navbar-burger">
 8 |           <span></span>
 9 |           <span></span>
10 |           <span></span>
11 |         </button>
12 |       </div>
13 | 
14 |       <div class="navbar-menu">
15 |         <div class="navbar-end">
16 |           <div class="navbar-item has-dropdown is-hoverable" v-if="isAuthenticated">
17 |             <a class="navbar-link">
18 |               {{ loggedInUser.username }}
19 |             </a>
20 |             <div class="navbar-dropdown">
21 |               <nuxt-link class="navbar-item" to="/profile">My Profile</nuxt-link>
22 |               <hr class="navbar-divider">
23 |               <a class="navbar-item" @click="logout">Logout</a>
24 |             </div>
25 |           </div>
26 |           <template v-else>
27 |             <nuxt-link class="navbar-item" to="/register">Register</nuxt-link>
28 |             <nuxt-link class="navbar-item" to="/login">Log In</nuxt-link>
29 |           </template>
30 |         </div>
31 |       </div>
32 |     </div>
33 |   </nav>
34 | </template>
35 | 
36 | <script>
37 | import { mapGetters } from 'vuex';
38 | 
39 | export default {
40 |   computed: {
41 |     ...mapGetters(['isAuthenticated', 'loggedInUser']),
42 |   },
43 | 
44 |   methods: {
45 |     async logout() {
46 |       await this.$auth.logout();
47 |     },
48 |   },
49 | };
50 | </script>
51 | 
52 | 


--------------------------------------------------------------------------------
/nuxt.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   /*
 3 |   ** Headers of the page
 4 |   */
 5 |   head: {
 6 |     title: 'nuxt-auth',
 7 |     meta: [
 8 |       { charset: 'utf-8' },
 9 |       { name: 'viewport', content: 'width=device-width, initial-scale=1' },
10 |       { hid: 'description', name: 'description', content: 'Nuxt.js project' }
11 |     ],
12 |     link: [
13 |       { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
14 |       {
15 |         rel: 'stylesheet',
16 |         href: 'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css'
17 |       }
18 |     ]
19 |   },
20 |   /*
21 |   ** Customize the progress bar color
22 |   */
23 |   loading: { color: '#3B8070' },
24 |   /*
25 |   ** Build configuration
26 |   */
27 |   build: {
28 |     /*
29 |     ** Run ESLint on save
30 |     */
31 |     extend (config, { isDev, isClient }) {
32 |       if (isDev && isClient) {
33 |         config.module.rules.push({
34 |           enforce: 'pre',
35 |           test: /\.(js|vue)$/,
36 |           loader: 'eslint-loader',
37 |           exclude: /(node_modules)/
38 |         })
39 |       }
40 |     }
41 |   },
42 | 
43 |   modules: ['@nuxtjs/axios', '@nuxtjs/auth'],
44 | 
45 |   axios: {
46 |     baseURL: 'http://127.0.0.1:3333/api'
47 |   },
48 | 
49 |   auth: {
50 |     strategies: {
51 |       local: {
52 |         endpoints: {
53 |           login: { url: 'login', method: 'post', propertyName: 'data.token' },
54 |           user: { url: 'me', method: 'get', propertyName: 'data' },
55 |           logout: false
56 |         }
57 |       }
58 |     }
59 |   }
60 | }
61 | 


--------------------------------------------------------------------------------
/pages/login.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <section class="section">
 3 |     <div class="container">
 4 |       <div class="columns">
 5 |         <div class="column is-4 is-offset-4">
 6 |           <h2 class="title has-text-centered">Welcome back!</h2>
 7 | 
 8 |           <Notification :message="error" v-if="error"/>
 9 | 
10 |           <form method="post" @submit.prevent="login">
11 | 
12 |             <div class="field">
13 |               <label class="label">Email</label>
14 | 
15 |               <div class="control">
16 |                 <input
17 |                   type="email"
18 |                   class="input"
19 |                   name="email"
20 |                   v-model="email"
21 |                 >
22 |               </div>
23 |             </div>
24 | 
25 |             <div class="field">
26 |               <label class="label">Password</label>
27 | 
28 |               <div class="control">
29 |                 <input
30 |                   type="password"
31 |                   class="input"
32 |                   name="password"
33 |                   v-model="password"
34 |                 >
35 |               </div>
36 |             </div>
37 | 
38 |             <div class="control">
39 |               <button type="submit" class="button is-dark is-fullwidth">Log In</button>
40 |             </div>
41 |           </form>
42 | 
43 |           <div class="has-text-centered" style="margin-top: 20px">
44 |             <p>
45 |               Don't have an account? <nuxt-link to="/register">Register</nuxt-link>
46 |             </p>
47 |           </div>
48 |         </div>
49 |       </div>
50 |     </div>
51 |   </section>
52 | </template>
53 | 
54 | <script>
55 | import Notification from '~/components/Notification';
56 | 
57 | export default {
58 |   middleware: 'guest',
59 | 
60 |   components: {
61 |     Notification,
62 |   },
63 | 
64 |   data() {
65 |     return {
66 |       email: '',
67 |       password: '',
68 |       error: null,
69 |     };
70 |   },
71 | 
72 |   methods: {
73 |     async login() {
74 |       try {
75 |         await this.$auth.loginWith('local', {
76 |           data: {
77 |             email: this.email,
78 |             password: this.password,
79 |           },
80 |         });
81 | 
82 |         this.$router.push('/');
83 |       } catch (e) {
84 |         this.error = e.response.data.message;
85 |       }
86 |     },
87 |   },
88 | };
89 | </script>
90 | 
91 | 


--------------------------------------------------------------------------------
/pages/register.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <section class="section">
  3 |     <div class="container">
  4 |       <div class="columns">
  5 |         <div class="column is-4 is-offset-4">
  6 |           <h2 class="title has-text-centered">Register!</h2>
  7 | 
  8 |           <Notification :message="error" v-if="error"/>
  9 | 
 10 |           <form method="post" @submit.prevent="register">
 11 | 
 12 |             <div class="field">
 13 |               <label class="label">Username</label>
 14 | 
 15 |               <div class="control">
 16 |                 <input
 17 |                   type="text"
 18 |                   class="input"
 19 |                   name="username"
 20 |                   v-model="username"
 21 |                   required
 22 |                 >
 23 |               </div>
 24 |             </div>
 25 | 
 26 |             <div class="field">
 27 |               <label class="label">Email</label>
 28 | 
 29 |               <div class="control">
 30 |                 <input
 31 |                   type="email"
 32 |                   class="input"
 33 |                   name="email"
 34 |                   v-model="email"
 35 |                   required
 36 |                 >
 37 |               </div>
 38 |             </div>
 39 | 
 40 |             <div class="field">
 41 |               <label class="label">Password</label>
 42 | 
 43 |               <div class="control">
 44 |                 <input
 45 |                   type="password"
 46 |                   class="input"
 47 |                   name="password"
 48 |                   v-model="password"
 49 |                   required
 50 |                 >
 51 |               </div>
 52 |             </div>
 53 | 
 54 |             <div class="control">
 55 |               <button type="submit" class="button is-dark is-fullwidth">Register</button>
 56 |             </div>
 57 |           </form>
 58 | 
 59 |           <div class="has-text-centered" style="margin-top: 20px">
 60 |             Already got an account? <nuxt-link to="/login">Login</nuxt-link>
 61 |           </div>
 62 |         </div>
 63 |       </div>
 64 |     </div>
 65 |   </section>
 66 | </template>
 67 | 
 68 | <script>
 69 | import Notification from '~/components/Notification';
 70 | 
 71 | export default {
 72 |   middleware: 'guest',
 73 | 
 74 |   components: {
 75 |     Notification,
 76 |   },
 77 | 
 78 |   data() {
 79 |     return {
 80 |       username: '',
 81 |       email: '',
 82 |       password: '',
 83 |       error: null,
 84 |     };
 85 |   },
 86 | 
 87 |   methods: {
 88 |     async register() {
 89 |       try {
 90 |         await this.$axios.post('register', {
 91 |           username: this.username,
 92 |           email: this.email,
 93 |           password: this.password,
 94 |         });
 95 | 
 96 |         await this.$auth.loginWith('local', {
 97 |           data: {
 98 |             email: this.email,
 99 |             password: this.password,
100 |           },
101 |         });
102 | 
103 |         this.$router.push('/');
104 |       } catch (e) {
105 |         this.error = e.response.data.message;
106 |       }
107 |     },
108 |   },
109 | };
110 | </script>
111 | 
112 | 


--------------------------------------------------------------------------------