├── .editorconfig
├── .env.example
├── .github
    └── ISSUE_TEMPLATE
    │   └── config.yml
├── .gitignore
├── LICENSE
├── README.md
├── assets
    └── main.css
├── components
    ├── ForkThis.vue
    ├── Navbar.vue
    └── SuperSecretDiv.vue
├── layouts
    └── default.vue
├── now.json
├── nuxt.config.js
├── package.json
├── pages
    ├── about.vue
    ├── auth
    │   └── signed-in.vue
    ├── index.vue
    └── secret.vue
├── renovate.json
├── store
    └── index.js
└── yarn.lock


/.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 | 


--------------------------------------------------------------------------------
/.env.example:
--------------------------------------------------------------------------------
1 | AUTH0_CLIENT_ID=""
2 | AUTH0_DOMAIN=""
3 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/config.yml:
--------------------------------------------------------------------------------
 1 | blank_issues_enabled: false
 2 | contact_links:
 3 |   - name: 🚨 Bug report
 4 |     url: https://cmty.app/nuxt/issues/new?type=bug-report&repo=example-auth0
 5 |     about: |
 6 |       Please report bugs here.
 7 |   - name: 🙋 Feature request
 8 |     url: https://cmty.app/nuxt/issues/new?type=feature-request&repo=example-auth0
 9 |     about: |
10 |       Please request features here.
11 |   - name: 🤔 Consulting from the Nuxt team
12 |     url: https://otechie.com/nuxt
13 |     about: |
14 |       Get technical support, project audits, app deployments, and custom development from the core Nuxt.js team.
15 |   - name: ❗️ All other issues | 其他问题
16 |     url: https://cmty.app/nuxt/issues/new?repo=example-auth0
17 |     about: |
18 |       Please create all other issues here.
19 | 


--------------------------------------------------------------------------------
/.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 | 
13 | # Auth0 config
14 | .env
15 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2017-2020 NuxtJS Team
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # nuxt-auth0
 2 | 
 3 | > A simple example that shows how to use [Nuxt.js](https://nuxtjs.org) with [Auth0](https://auth0.com)
 4 | 
 5 | ![nuxt-auth0](https://cloud.githubusercontent.com/assets/904724/22703834/d971838c-ed65-11e6-90f9-5ecf2a1be5f0.gif)
 6 | 
 7 | You can access a simple demo here: https://auth0.nuxtjs.org
 8 | 
 9 | ## Setup
10 | 
11 | * Create an account at Auth0 (https://auth0.com)
12 | * Add your endpoints to your client's allowed urls like this ![nuxt-callbacks](https://cloud.githubusercontent.com/assets/904724/22703633/23f35724-ed65-11e6-83e4-227ad77c00ff.png)
13 | * Add your logout endpoint to your account allowed urls like this ![nuxt-logout-cb](https://cloud.githubusercontent.com/assets/904724/22703768/9782bbbc-ed65-11e6-93b7-9c1e4d5d7984.png)
14 | 
15 | * Copy the file `.env.example` at the root folder, rename it as `.env` and add your Auth0 keys
16 | 
17 | ## Running Locally
18 | 
19 | ```
20 | git clone https://github.com/nuxt/example-auth0.git
21 | cd example-auth0
22 | npm install
23 | npm run dev
24 | ```
25 | 
26 | 


--------------------------------------------------------------------------------
/assets/main.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |   margin: 0;
 3 |   font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
 4 | }
 5 | 
 6 | h1 {
 7 |   font-size: 40px;
 8 |   font-weight: 200;
 9 |   line-height: 40px;
10 | }
11 | p {
12 |   font-size: 20px;
13 |   font-weight: 200;
14 |   line-height: 30px;
15 | }
16 | a {
17 |   color: #333;
18 |   padding-bottom: 2px;
19 |   border-bottom: 1px solid #ccc;
20 |   text-decoration: none;
21 |   font-weight: 400;
22 |   line-height: 30px;
23 |   transition: border-bottom .2s;
24 |   cursor: pointer;
25 | }
26 | a:hover {
27 |   border-bottom-color: #333;
28 | }
29 | 


--------------------------------------------------------------------------------
/components/ForkThis.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <a href="https://github.com/nuxt/example-auth0" class="github-corner" aria-label="View source on Github">
 4 |       <svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true">
 5 |         <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z" />
 6 |         <path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" class="octo-arm" />
 7 |         <path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" />
 8 |       </svg>
 9 |     </a>
10 |   </div>
11 | </template>
12 | 
13 | <style scoped>
14 | .github-corner:hover .octo-arm {
15 |   animation: octocat-wave 560ms ease-in-out;
16 | }
17 | svg {
18 |   fill: #333;
19 |   color: #fff;
20 |   position: absolute;
21 |   top: 0;
22 |   right: 0;
23 |   border: 0;
24 | }
25 | .octo-arm {
26 |   transform-origin: 130px 106px;
27 | }
28 | @keyframes octocat-wave {
29 |   0%, 100% {
30 |     transform: rotate(0);
31 |   }
32 |   20%, 60% {
33 |     transform: rotate(-25deg);
34 |   }
35 |   40%, 80% {
36 |     transform: rotate(10deg);
37 |   }
38 | }
39 | @media (max-width: 500px) {
40 |   .github-corner:hover .octo-arm {
41 |     animation: none;
42 |   }
43 |   .github-corner .octo-arm {
44 |     animation: octocat-wave 560ms ease-in-out;
45 |   }
46 | }
47 | </style>
48 | 


--------------------------------------------------------------------------------
/components/Navbar.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="header">
 3 |     <nuxt-link to="/" exact>Home</nuxt-link>
 4 |     <nuxt-link to="/about">About</nuxt-link>
 5 |     <nuxt-link v-if="$auth.loggedIn" to="/secret">Top Secret</nuxt-link>
 6 |     <a v-if="$auth.loggedIn" @click="$auth.logout()">Sign Off</a>
 7 |     <a v-else @click="$auth.loginWith('auth0')">Sign In</a>
 8 |   </div>
 9 | </template>
10 | 
11 | <script>
12 | import { mapGetters } from 'vuex'
13 | 
14 | export default {
15 |   computed: mapGetters(['isAuthenticated'])
16 | }
17 | </script>
18 | 
19 | <style scoped>
20 | .header {
21 |   display: flex;
22 |   margin-bottom: 20px;
23 | }
24 | a {
25 |   margin-right: 20px;
26 |   font-size: 14px;
27 |   color: #999;
28 |   text-decoration: none;
29 |   text-transform: uppercase;
30 |   padding-top: 2px;
31 |   padding-bottom: 2px;
32 |   border-top: 1px solid transparent;
33 |   border-bottom: 1px solid transparent;
34 |   transition: color .25s;
35 |   font-weight: 400;
36 |   line-height: normal;
37 |   cursor: pointer;
38 | }
39 | a:hover {
40 |   color: #333;
41 | }
42 | a.nuxt-link-active {
43 |   color: #333;
44 |   border-top: 1px solid #333;
45 |   border-bottom: 1px solid #333;
46 |   font-weight: 600;
47 | }
48 | </style>
49 | 


--------------------------------------------------------------------------------
/components/SuperSecretDiv.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>This is a super secret div.</div>
 3 | </template>
 4 | 
 5 | <style scoped>
 6 | div {
 7 |   background-color: #ecf0f1;
 8 |   box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
 9 |   border-radius: 2px;
10 |   padding: 10px;
11 |   min-height: 100px;
12 |   display: flex;
13 |   align-items: center;
14 |   justify-content: center;
15 |   color: #333;
16 |   text-align: center;
17 |   font-size: 40px;
18 |   font-weight: 100;
19 |   margin-bottom: 30px;
20 | }
21 | </style>
22 | 


--------------------------------------------------------------------------------
/layouts/default.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="app">
 3 |     <fork-this/>
 4 |     <div class="main">
 5 |       <navbar/>
 6 |       <nuxt/>
 7 |     </div>
 8 |   </div>
 9 | </template>
10 | 
11 | <script>
12 | import Navbar from '~/components/Navbar'
13 | import ForkThis from '~/components/ForkThis'
14 | 
15 | export default {
16 |   components: {
17 |     Navbar,
18 |     ForkThis
19 |   }
20 | }
21 | </script>
22 | 
23 | <style scoped>
24 | .app {
25 |   height: 100vh;
26 |   width: 100vw;
27 | }
28 | .main {
29 |   max-width: 1024px;
30 |   margin: 0 auto;
31 |   padding: 30px;
32 | }
33 | </style>
34 | 


--------------------------------------------------------------------------------
/now.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "version": 2,
 3 |   "builds": [
 4 |     {
 5 |       "src": "nuxt.config.js",
 6 |       "use": "@nuxtjs/now-builder"
 7 |     }
 8 |   ],
 9 |   "build": {
10 |     "env": {
11 |       "AUTH0_DOMAIN": "@auth0-domain",
12 |       "AUTH0_CLIENT_ID": "@auth0-client-id"
13 |     }
14 |   }
15 | }
16 | 


--------------------------------------------------------------------------------
/nuxt.config.js:
--------------------------------------------------------------------------------
 1 | import 'dotenv/config'
 2 | 
 3 | export default {
 4 |   /*
 5 |   ** Headers of the page
 6 |   */
 7 |   head: {
 8 |     title: 'Nuxt.js + Auth0',
 9 |     meta: [
10 |       { charset: 'utf-8' },
11 |       { name: 'viewport', content: 'width=device-width, initial-scale=1' },
12 |       { hid: 'description', name: 'description', content: 'Nuxt.js project' }
13 |     ],
14 |     link: [
15 |       { rel: 'icon', type: 'image/x-icon', href: 'https://nuxtjs.org/favicon.ico' }
16 |     ]
17 |   },
18 |   /*
19 |   ** Global CSS
20 |   */
21 |   css: [
22 |     'normalize.css',
23 |     '@/assets/main.css'
24 |   ],
25 |   /*
26 |   ** Modules
27 |   */
28 |   modules: [
29 |     // axios is required by @nuxtjs/auth
30 |     '@nuxtjs/axios',
31 |     // https://auth.nuxtjs.org
32 |     '@nuxtjs/auth'
33 |   ],
34 |   auth: {
35 |     redirect: {
36 |       login: '/', // redirect user when not connected
37 |       callback: '/auth/signed-in'
38 |     },
39 |     strategies: {
40 |       local: false,
41 |       auth0: {
42 |         domain: process.env.AUTH0_DOMAIN,
43 |         client_id: process.env.AUTH0_CLIENT_ID
44 |       }
45 |     }
46 |   },
47 |   build: {
48 |     // For stormkit.io
49 |     publicPath: process.env.PUBLIC_PATH,
50 |   }
51 | }
52 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "nuxt-auth0",
 3 |   "version": "1.0.0",
 4 |   "description": "Nuxt.js + Auth0",
 5 |   "author": "NuxtJS Team",
 6 |   "private": true,
 7 |   "scripts": {
 8 |     "dev": "nuxt",
 9 |     "build": "nuxt build",
10 |     "start": "nuxt-start"
11 |   },
12 |   "dependencies": {
13 |     "@nuxtjs/auth": "^4.9.1",
14 |     "@nuxtjs/axios": "^5.12.2",
15 |     "dotenv": "^8.2.0",
16 |     "normalize.css": "^8.0.1",
17 |     "nuxt-start": "^2.14.3"
18 |   },
19 |   "devDependencies": {
20 |     "nuxt": "^2.14.3"
21 |   }
22 | }
23 | 


--------------------------------------------------------------------------------
/pages/about.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <div>
3 |     <h1>About Page</h1>
4 |     <p>Hello, I am the about page :)</p>
5 |   </div>
6 | </template>
7 | 


--------------------------------------------------------------------------------
/pages/auth/signed-in.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <p>Signing in...</p>
3 | </template>
4 | 


--------------------------------------------------------------------------------
/pages/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <super-secret-div v-if="$auth.loggedIn"/>
 4 |     <div class="content">
 5 |       <h1>Hello, {{ $auth.loggedIn ? $auth.user.username : 'friend' }}!</h1>
 6 |       <p>
 7 |         This is a super simple example of how to use <a href="https://nuxtjs.org" target="_blank">Nuxt.js</a> and <a href="https://auth0.com" target="_blank">Auth0</a> together.
 8 |       </p>
 9 |       <p v-if="$auth.loggedIn">
10 |         Now that you're authenticated, maybe you should try going to our <nuxt-link to="/secret" class="link">super secret page</nuxt-link>!
11 |       </p>
12 |       <p v-else>
13 |         You're not authenticated yet. Maybe you want to <a @click="$auth.login()" class="link">sign in</a> and see what happens?
14 |       </p>
15 |     </div>
16 |   </div>
17 | </template>
18 | 
19 | <script>
20 | import SuperSecretDiv from '~/components/SuperSecretDiv'
21 | 
22 | export default {
23 |   components: {
24 |     SuperSecretDiv
25 |   }
26 | }
27 | </script>
28 | 
29 | <style scoped>
30 | .content {
31 |   max-width: 750px;
32 |   margin: 0 auto;
33 |   text-align: center;
34 | }
35 | </style>
36 | 


--------------------------------------------------------------------------------
/pages/secret.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="content">
 3 |     <img :src="user.picture"/>
 4 |     <p>Hi {{ user.email }}!</p>
 5 |     <p>This is a super secure page! Try loading this page again using the incognito/private mode of your browser.</p>
 6 |   </div>
 7 | </template>
 8 | 
 9 | <script>
10 | export default {
11 |   middleware: 'auth',
12 |   computed: {
13 |     user() {
14 |       return this.$auth.user
15 |     }
16 |   }
17 | }
18 | </script>
19 | 
20 | <style scoped>
21 | .content {
22 |   text-align: center;
23 |   padding-top: 20px;
24 | }
25 | img {
26 |   width: 100px;
27 |   height: 100px;
28 |   border-radius: 100px;
29 |   margin: 15px 0;
30 | }
31 | </style>
32 | 


--------------------------------------------------------------------------------
/renovate.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": [
3 |     "@nuxtjs"
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/store/index.js:
--------------------------------------------------------------------------------
1 | // Enable store for auth module
2 | 


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